New Posthog user id pattern: [inspectionId]-[UUID-distinctId] (#931)

Author: dlymonkai

configs/test-utils/src/__mocks__/@monkvision/analytics.tsx

@@ -4,6 +4,7 @@ class AnalyticsAdapterMock {
   resetUser = jest.fn();
   trackEvent = jest.fn();
   setEventsProperties = jest.fn();
+  getUserId = jest.fn(() => 'test-user-id');
 }
 
 export = {
@@ -18,6 +19,7 @@ export = {
     resetUser: jest.fn(),
     trackEvent: jest.fn(),
     setEventsProperties: jest.fn(),
+    getUserId: jest.fn(() => 'test-user-id'),
   })),
   AnalyticsProvider: jest.fn(({ children }) => <>{children}</>),
 };

packages/analytics/README.md

@@ -56,6 +56,7 @@ function MyCustomComponent() {
     resetUser,
     trackEvent,
     setEventsProperties,
+    getUserId,
   } = useAnalytics();
 }
 ```
@@ -89,6 +90,10 @@ class MyCustomAnalyticsAdapter implements AnalyticsAdapter {
   setEventsProperties(context: Record<string, Primitive>): void {
     // Set properties for every events
   }
+
+  getUserId(): string {
+    // Get the current user ID
+  }
 }
 ```
 
@@ -142,12 +147,12 @@ trackEvent: (name: string, context?: Record<string, Primitive>) => void
 
 This method track a event and send it to the analytics tool. The name of the event is required and an optional context can be provided that can contain tags or properties associated to the event.
 
-#### setEventsProperties
+#### getUserId 
 ```typescript
-trackEvent: (context: Record<string, Primitive>) => void
+getUserId: () => string 
 ```
 
-This method set properties that will be sent with every `trackEvent`.
+This method retrieves the current user ID.
 
 ## Analytics Adapters
 ### EmptyAnalyticsAdapter

packages/analytics/src/adapters/adapter.ts

@@ -38,4 +38,8 @@ export interface AnalyticsAdapter {
    * @param context context of every event.
    */
   setEventsProperties: (context: Record<string, Primitive>) => void;
+  /**
+   * Get the ID of the user currently using the application.
+   */
+  getUserId: () => string;
 }

packages/analytics/src/adapters/emptyAdapter.ts

@@ -88,4 +88,14 @@ export class EmptyAnalyticsAdapter implements AnalyticsAdapter {
       );
     }
   }
+
+  getUserId(): string {
+    if (this.options.showUnsupportedMethodWarnings) {
+      console.warn(
+        'Application users are not supported by the current Monk Analytics Adapter and calling getUserId will have no effect.',
+      );
+    }
+
+    return '[UserId]';
+  }
 }

packages/analytics/src/react/hooks.ts

@@ -15,6 +15,7 @@ export function useAnalytics(): AnalyticsAdapter {
       resetUser: adapter.resetUser.bind(adapter),
       trackEvent: adapter.trackEvent.bind(adapter),
       setEventsProperties: adapter.setEventsProperties.bind(adapter),
+      getUserId: adapter.getUserId.bind(adapter),
     }),
     [],
   );

packages/analytics/test/react/provider.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { AnalyticsAdapter, AnalyticsProvider, useAnalytics } from '../../src';
 
 function TestComponent() {
-  const { setUserId, setUserProperties, trackEvent, resetUser, setEventsProperties } =
+  const { setUserId, setUserProperties, trackEvent, resetUser, setEventsProperties, getUserId } =
     useAnalytics();
 
   return (
@@ -29,7 +29,10 @@ function TestComponent() {
         data-testid='set-events-properties-btn'
         onClick={() => setEventsProperties({ test: 'test' })}
       >
-        trackEvent
+        setEventsProperties
+      </button>
+      <button data-testid='get-user-id-btn' onClick={() => getUserId()}>
+        setEventsProperties
       </button>
     </div>
   );
@@ -43,12 +46,14 @@ describe('AnalyticsProvider component', () => {
       resetUser: jest.fn(),
       trackEvent: jest.fn(),
       setEventsProperties: jest.fn(),
+      getUserId: jest.fn(() => 'test-user-id'),
     };
     const setUserIdSpy = jest.spyOn(adapter, 'setUserId');
     const setUserPropertiesSpy = jest.spyOn(adapter, 'setUserProperties');
     const resetUserSpy = jest.spyOn(adapter, 'resetUser');
     const trackEventSpy = jest.spyOn(adapter, 'trackEvent');
     const setEventsPropertiesSpy = jest.spyOn(adapter, 'setEventsProperties');
+    const getUserId = jest.spyOn(adapter, 'getUserId');
 
     const { unmount } = render(
       <AnalyticsProvider adapter={adapter}>
@@ -66,6 +71,8 @@ describe('AnalyticsProvider component', () => {
     expect(trackEventSpy).toHaveBeenCalledTimes(1);
     fireEvent.click(screen.getByTestId('set-events-properties-btn'));
     expect(setEventsPropertiesSpy).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByTestId('get-user-id-btn'));
+    expect(getUserId).toHaveBeenCalledTimes(1);
     unmount();
   });
 });

packages/common-ui-web/src/components/CreateInspection/CreateInspection.tsx

@@ -9,7 +9,6 @@ import {
   useMonkAppState,
 } from '@monkvision/common';
 import { useMonitoring } from '@monkvision/monitoring';
-import { useAnalytics } from '@monkvision/analytics';
 import { styles } from './CreateInspection.styles';
 import { i18nCreateInspection } from './i18n';
 import { Spinner } from '../Spinner';
@@ -57,7 +56,6 @@ export const CreateInspection = i18nWrap(function CreateInspection({
     apiDomain: config.apiDomain,
     thumbnailDomain: config.thumbnailDomain,
   });
-  const analytics = useAnalytics();
   const isMounted = useIsMounted();
 
   useEffect(() => {
@@ -84,10 +82,9 @@ export const CreateInspection = i18nWrap(function CreateInspection({
       }
     } else {
       setTags({ inspectionId });
-      analytics.setUserId(inspectionId);
       onInspectionCreated?.();
     }
-  }, [inspectionId, setTags, analytics, retry, isMounted]);
+  }, [inspectionId, setTags, retry, isMounted]);
 
   return (
     <div style={styles['container']}>

packages/common-ui-web/src/components/Login/Login.tsx

@@ -9,7 +9,6 @@ import {
   useMonkTheme,
 } from '@monkvision/common';
 import { useMonitoring } from '@monkvision/monitoring';
-import { useAnalytics } from '@monkvision/analytics';
 import { Button } from '../Button';
 import { i18nLogin } from './i18n';
 import { styles } from './Login.styles';
@@ -55,7 +54,6 @@ export const Login = i18nWrap(function Login({ onLoginSuccessful, lang, style =
   const loading = useLoadingState();
   const { authToken, setAuthToken, config } = useMonkAppState();
   const { handleError, setUserId } = useMonitoring();
-  const analytics = useAnalytics();
   const { login, logout } = useAuth();
   const { t } = useTranslation();
   const { rootStyles } = useMonkTheme();
@@ -95,7 +93,6 @@ export const Login = i18nWrap(function Login({ onLoginSuccessful, lang, style =
           const userId = token ? decodeMonkJwt(token) : undefined;
           if (userId?.sub) {
             setUserId(userId.sub);
-            analytics.setUserProperties({ authToken: userId.sub });
           }
         }
       })

packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx

@@ -10,7 +10,6 @@ import { AllOrNone, VehicleType } from '@monkvision/types';
 import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import { decodeMonkJwt, MonkApiConfig, useMonkApi } from '@monkvision/network';
 import { useMonitoring } from '@monkvision/monitoring';
-import { useAnalytics } from '@monkvision/analytics';
 import { styles } from './VehicleTypeSelection.styles';
 import { i18nVehicleTypeSelection } from './i18n';
 import { Button } from '../Button';
@@ -88,7 +87,6 @@ export const VehicleTypeSelection = i18nWrap(function VehicleTypeSelection(
   });
   const loading = useLoadingState();
   const { handleError, setTags, setUserId } = useMonitoring();
-  const analytics = useAnalytics();
   const [initialScroll, setInitialScroll] = useState(true);
   const vehicleTypes = useMemo(
     () => getVehicleTypes(props.availableVehicleTypes),
@@ -105,14 +103,12 @@ export const VehicleTypeSelection = i18nWrap(function VehicleTypeSelection(
   useEffect(() => {
     if (props.inspectionId) {
       setTags({ inspectionId: props.inspectionId });
-      analytics.setUserId(props.inspectionId);
     }
     const userId = props.authToken ? decodeMonkJwt(props.authToken) : undefined;
     if (userId?.sub) {
       setUserId(userId.sub);
-      analytics.setUserProperties({ authToken: userId.sub });
     }
-  }, [props.inspectionId, props.authToken, analytics, setTags, setUserId]);
+  }, [props.inspectionId, props.authToken, setTags, setUserId]);
 
   useEffect(() => {
     loading.start();

packages/common/src/apps/appStateProvider.tsx

@@ -7,7 +7,7 @@ import {
   VideoCaptureAppConfig,
 } from '@monkvision/types';
 import { sights } from '@monkvision/sights';
-import React, { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
+import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
 import { useIsMounted, useLoadingState } from '../hooks';
 import { MonkSearchParam, useMonkSearchParams } from './searchParams';
 import {
@@ -17,7 +17,6 @@ import {
   VideoCaptureAppState,
 } from './appState';
 import { useAppStateMonitoring } from './monitoring';
-import { useAppStateAnalytics } from './analytics';
 import { getAvailableVehicleTypes } from '../utils';
 
 /**
@@ -98,7 +97,6 @@ export function MonkAppStateProvider({
   const monkSearchParams = useMonkSearchParams({ availableVehicleTypes });
   const isMounted = useIsMounted();
   useAppStateMonitoring({ authToken, inspectionId, vehicleType, steeringWheel });
-  useAppStateAnalytics({ inspectionId });
 
   useEffect(() => {
     loading.onSuccess();

packages/inspection-capture-web/src/hooks/useTracking.ts

@@ -25,9 +25,17 @@ export function useTracking({ inspectionId, authToken }: TrackingParams) {
   const monitoring = useMonitoring();
 
   useEffect(() => {
+    const currentAnalyticsUserId = analytics.getUserId();
+    let newAnalyticsUserId = `${inspectionId}:${currentAnalyticsUserId}`;
+    if (currentAnalyticsUserId.includes(':')) {
+      newAnalyticsUserId = `${inspectionId}:${currentAnalyticsUserId.split(':')[1]}`;
+    }
+    analytics.setUserId(newAnalyticsUserId);
+    console.log('posthog id  : ', newAnalyticsUserId, ', inspectionId: ', inspectionId);
     monitoring.setTags({
       inspectionId,
     });
+
     const userId = decodeMonkJwt(authToken)?.sub;
     if (userId) {
       monitoring.setUserId(userId);

packages/posthog/src/adapter.ts

@@ -98,4 +98,8 @@ export class PosthogAnalyticsAdapter implements AnalyticsAdapter {
   setEventsProperties(context: Record<string, Primitive>): void {
     posthog.register(context);
   }
+
+  getUserId(): string {
+    return posthog.get_distinct_id();
+  }
 }