Update Amplitude integration and dependencies

- Replaced @amplitude/unified with @amplitude/analytics-browser and added @amplitude/plugin-session-replay-browser for enhanced tracking capabilities.
- Modified AmplitudeProvider to include session replay functionality with a configurable sample rate.
- Updated user identification in AppContextProvider to use user email instead of ID for tracking.
- Bumped various dependencies in package.json and pnpm-lock.yaml for compatibility and improvements.

web/app/components/base/amplitude/AmplitudeProvider.tsx

@@ -3,13 +3,16 @@
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import * as amplitude from '@amplitude/analytics-browser'
+import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'
 
 export type IAmplitudeProps = {
   apiKey?: string
+  sessionReplaySampleRate?: number
 }
 
 const AmplitudeProvider: FC<IAmplitudeProps> = ({
   apiKey = '702e89332ab88a7f14e665f417244e9d',
+  sessionReplaySampleRate = 1,
 }) => {
   useEffect(() => {
     // // Only enable in non-CE edition
@@ -30,10 +33,12 @@ const AmplitudeProvider: FC<IAmplitudeProps> = ({
       logLevel: amplitude.Types.LogLevel.Warn,
     })
 
-    // Log initialization success in development
-    if (process.env.NODE_ENV === 'development')
-      console.log('[Amplitude] Initialized successfully, API Key:', apiKey)
-  }, [apiKey])
+    // Add Session Replay plugin
+    const sessionReplay = sessionReplayPlugin({
+      sampleRate: sessionReplaySampleRate,
+    })
+    amplitude.add(sessionReplay)
+  }, [apiKey, sessionReplaySampleRate])
 
   // This is a client component that renders nothing
   return null

web/context/app-context.tsx

@@ -12,7 +12,6 @@ import { setZendeskConversationFields } from '@/app/components/base/zendesk/util
 import { ZENDESK_FIELD_IDS } from '@/config'
 import { setUserId, setUserProperties } from '@/app/components/base/amplitude'
 import { useGlobalPublicStore } from './global-public-context'
-import { setUserId, setUserProperties } from '@/app/components/base/amplitude'
 
 export type AppContextValue = {
   userProfile: UserProfileResponse
@@ -165,7 +164,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
   useEffect(() => {
     // Report user info to Amplitude when loaded
     if (userProfile?.id) {
-      setUserId(userProfile.id)
+      setUserId(userProfile.email)
       setUserProperties({
         email: userProfile.email,
         name: userProfile.name,

web/package.json

@@ -44,7 +44,8 @@
     "knip": "knip"
   },
   "dependencies": {
-    "@amplitude/unified": "1.0.0-beta.9",
+    "@amplitude/analytics-browser": "^2.31.3",
+    "@amplitude/plugin-session-replay-browser": "^1.23.6",
     "@emoji-mart/data": "^1.2.1",
     "@floating-ui/react": "^0.26.28",
     "@formatjs/intl-localematcher": "^0.5.10",