Add Amplitude analytics integration and tracking (#27890)

- Introduced AmplitudeProvider component for initializing Amplitude analytics.
- Integrated user tracking in AppContextProvider to report user and workspace information.
- Added event tracking for workflow log filter selections.
- Updated package.json and pnpm-lock.yaml to include @amplitude/unified dependency.

web/app/components/app/workflow-log/filter.tsx

@@ -8,6 +8,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import type { QueryParam } from './index'
 import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
+import { trackEvent } from '../../base/amplitude/utils'
 dayjs.extend(quarterOfYear)
 
 const today = dayjs()
@@ -37,6 +38,9 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
         value={queryParams.status || 'all'}
         onSelect={(item) => {
           setQueryParams({ ...queryParams, status: item.value as string })
+          trackEvent('workflow_log_filter_status_selected', {
+            workflow_log_filter_status: item.value as string,
+          })
         }}
         onClear={() => setQueryParams({ ...queryParams, status: 'all' })}
         items={[{ value: 'all', name: 'All' },

web/app/components/base/amplitude/utils.ts

@@ -14,14 +14,6 @@ export const trackEvent = (eventName: string, eventProperties?: Record<string, a
  * @param userId User ID
  */
 export const setUserId = (userId: string) => {
-  if (!userId) {
-    console.warn('[Amplitude] ⚠️ Cannot set empty user ID')
-    return
-  }
-
-  if (process.env.NODE_ENV === 'development')
-    console.log('[Amplitude] 👤 Setting User ID:', userId)
-
   amplitude.setUserId(userId)
 }
 
@@ -30,37 +22,11 @@ export const setUserId = (userId: string) => {
  * @param properties User properties
  */
 export const setUserProperties = (properties: Record<string, any>) => {
-  // Filter out undefined and null values
-  const validProperties = Object.entries(properties).reduce((acc, [key, value]) => {
-    if (value !== undefined && value !== null)
-      acc[key] = value
-
-    return acc
-  }, {} as Record<string, any>)
-
-  if (Object.keys(validProperties).length === 0) {
-    if (process.env.NODE_ENV === 'development')
-      console.warn('[Amplitude] ⚠️ No valid properties to set')
-    return
-  }
-
-  if (process.env.NODE_ENV === 'development')
-    console.log('[Amplitude] 📊 Setting user properties:', validProperties)
-
   const identifyEvent = new amplitude.Identify()
-  Object.entries(validProperties).forEach(([key, value]) => {
+  Object.entries(properties).forEach(([key, value]) => {
     identifyEvent.set(key, value)
   })
-
-  const result = amplitude.identify(identifyEvent)
-
-  // Log the result in development
-  result.promise.then(() => {
-    if (process.env.NODE_ENV === 'development')
-      console.log('[Amplitude] ✅ User properties set successfully')
-  }).catch((err) => {
-    console.error('[Amplitude] ❌ Failed to set user properties:', err)
-  })
+  amplitude.identify(identifyEvent)
 }
 
 /**

web/context/app-context.tsx

@@ -163,41 +163,28 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
   // #region Amplitude user tracking
   useEffect(() => {
     // Report user info to Amplitude when loaded
-    if (!userProfile?.id)
-      return
-
-    // Step 1: Set User ID first
-    setUserId(userProfile.id)
-
-    // Step 2: Set user properties
-    const userProperties: Record<string, any> = {
-      email: userProfile.email,
-      name: userProfile.name,
-      has_password: userProfile.is_password_set,
+    if (userProfile?.id) {
+      setUserId(userProfile.id)
+      setUserProperties({
+        email: userProfile.email,
+        name: userProfile.name,
+        has_password: userProfile.is_password_set,
+      })
     }
+  }, [userProfile?.id, userProfile?.email, userProfile?.name, userProfile?.is_password_set])
 
-    // Step 3: Add workspace properties if available
-    if (currentWorkspace?.id) {
-      userProperties.workspace_id = currentWorkspace.id
-      userProperties.workspace_name = currentWorkspace.name
-      userProperties.workspace_plan = currentWorkspace.plan
-      userProperties.workspace_status = currentWorkspace.status
-      userProperties.workspace_role = currentWorkspace.role
+  useEffect(() => {
+    // Report workspace info to Amplitude when loaded
+    if (currentWorkspace?.id && userProfile?.id) {
+      setUserProperties({
+        workspace_id: currentWorkspace.id,
+        workspace_name: currentWorkspace.name,
+        workspace_plan: currentWorkspace.plan,
+        workspace_status: currentWorkspace.status,
+        workspace_role: currentWorkspace.role,
+      })
     }
-
-    // Set all properties at once
-    setUserProperties(userProperties)
-  }, [
-    userProfile?.id,
-    userProfile?.email,
-    userProfile?.name,
-    userProfile?.is_password_set,
-    currentWorkspace?.id,
-    currentWorkspace?.name,
-    currentWorkspace?.plan,
-    currentWorkspace?.status,
-    currentWorkspace?.role,
-  ])
+  }, [currentWorkspace?.id, currentWorkspace?.name, currentWorkspace?.plan, currentWorkspace?.status, currentWorkspace?.role, userProfile?.id])
   // #endregion Amplitude user tracking
 
   return (