feat: posthog improvements (#3235)

web/package.json

@@ -42,7 +42,7 @@
     "markdown-it": "13.0.1",
     "parse-curl": "0.2.6",
     "path-browserify": "1.0.1",
-    "posthog-js": "1.75.3",
+    "posthog-js": "1.82.3",
     "postman-collection": "4.1.4",
     "protobufjs": "7.2.4",
     "query-string": "7.1.1",

web/src/App.tsx

@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/react';
 import {HistoryRouter} from 'redux-first-history/rr6';
 
+import CaptureWrapper from 'components/CaptureWrapper';
 import CustomizationWrapper from 'components/CustomizationWrapper';
 import DashboardWrapper from 'components/DashboardWrapper';
 import ErrorBoundary from 'components/ErrorBoundary';
@@ -19,11 +20,13 @@ const App = () => (
     <Sentry.ErrorBoundary fallback={({error}) => <ErrorBoundary error={error} />}>
       <ReduxWrapperProvider>
         <HistoryRouter history={history} basename={serverPathPrefix}>
-          <CustomizationWrapper>
-            <DashboardWrapper>
-              <BaseApp />
-            </DashboardWrapper>
-          </CustomizationWrapper>
+          <CaptureWrapper>
+            <CustomizationWrapper>
+              <DashboardWrapper>
+                <BaseApp />
+              </DashboardWrapper>
+            </CustomizationWrapper>
+          </CaptureWrapper>
         </HistoryRouter>
       </ReduxWrapperProvider>
     </Sentry.ErrorBoundary>

web/src/components/CaptureWrapper/CaptureWrapper.tsx

@@ -0,0 +1,22 @@
+import {PostHogProvider} from 'posthog-js/react';
+import Env from 'utils/Env';
+import Content from './Content';
+
+const posthogKey = Env.get('posthogKey');
+
+const options = {
+  api_host: 'https://app.posthog.com',
+  opt_out_capturing_by_default: true,
+};
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const CaptureWrapper = ({children}: IProps) => (
+  <PostHogProvider apiKey={posthogKey} options={options}>
+    <Content>{children}</Content>
+  </PostHogProvider>
+);
+
+export default CaptureWrapper;

web/src/components/CaptureWrapper/Content.tsx

@@ -0,0 +1,43 @@
+import {usePostHog} from 'posthog-js/react';
+import CaptureProvider from 'providers/Capture';
+import {useCallback, useMemo} from 'react';
+import Env from 'utils/Env';
+
+const appVersion = Env.get('appVersion');
+const env = Env.get('env');
+const serverID = Env.get('serverID');
+const isAnalyticsEnabled = () => Env.get('analyticsEnabled') && !Env.get('isTracetestDev');
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const Content = ({children}: IProps) => {
+  const posthog = usePostHog();
+
+  const load = useCallback(() => {
+    if (!isAnalyticsEnabled()) {
+      if (posthog?.has_opted_in_capturing()) {
+        posthog?.opt_out_capturing();
+      }
+      return;
+    }
+
+    posthog?.opt_in_capturing();
+    posthog?._start_queue_if_opted_in();
+    posthog?.identify(serverID, {
+      appVersion,
+      env,
+    });
+  }, [posthog]);
+
+  const pageView = useCallback(() => {
+    posthog?.capture('$pageview');
+  }, [posthog]);
+
+  const captureProviderValue = useMemo(() => ({load, pageView}), [load, pageView]);
+
+  return <CaptureProvider value={captureProviderValue}>{children}</CaptureProvider>;
+};
+
+export default Content;

web/src/components/CaptureWrapper/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './CaptureWrapper';

web/src/components/WithAnalytics/WithAnalytics.tsx

@@ -1,11 +1,15 @@
+import {useCapture} from 'providers/Capture';
 import {useEffect} from 'react';
 import AnalyticsService from 'services/Analytics/Analytics.service';
 
 const withAnalytics = <P extends object>(Component: React.ComponentType<P>, name: string) => {
   const FunctionComponent = (props: P) => {
+    const {pageView} = useCapture();
+
     useEffect(() => {
+      pageView();
       AnalyticsService.page(name);
-    }, [props]);
+    }, [pageView, props]);
 
     return <Component {...props} />;
   };

web/src/providers/Capture/Capture.provider.tsx

@@ -0,0 +1,25 @@
+import noop from 'lodash/noop';
+import {createContext, useContext} from 'react';
+
+interface IContext {
+  load(): void;
+  pageView(): void;
+}
+
+export const Context = createContext<IContext>({
+  load: noop,
+  pageView: noop,
+});
+
+export const useCapture = () => useContext(Context);
+
+interface IProps {
+  children: React.ReactNode;
+  value: IContext;
+}
+
+const CaptureProvider = ({children, value}: IProps) => {
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+};
+
+export default CaptureProvider;

web/src/providers/Capture/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default, useCapture} from './Capture.provider';

web/src/providers/SettingsValues/SettingsValues.provider.tsx

@@ -7,6 +7,7 @@ import Demo from 'models/Demo.model';
 import Linter from 'models/Linter.model';
 import Polling from 'models/Polling.model';
 import TestRunner from 'models/TestRunner.model';
+import {useCapture} from 'providers/Capture';
 import TracetestAPI from 'redux/apis/Tracetest';
 import {useAppDispatch, useAppSelector} from 'redux/hooks';
 import {setUserPreference} from 'redux/slices/User.slice';
@@ -95,12 +96,14 @@ const SettingsValuesProvider = ({children}: IProps) => {
 
   // Config
   const {data: config = Config()} = useGetConfigQuery({});
+  const {load} = useCapture();
 
   useEffect(() => {
     Env.set('analyticsEnabled', config.analyticsEnabled);
     AnalyticsService.load();
     AnalyticsService.identify();
-  }, [config]);
+    load();
+  }, [config, load]);
 
   // Polling
   const {data: pollingProfile = Polling()} = useGetPollingQuery({});

web/src/services/Analytics/Analytics.service.ts

@@ -1,5 +1,4 @@
 import {AnalyticsBrowser} from '@segment/analytics-next';
-import posthog from 'posthog-js';
 import {Categories} from 'constants/Analytics.constants';
 import Env from 'utils/Env';
 
@@ -8,7 +7,6 @@ const appVersion = Env.get('appVersion');
 const env = Env.get('env');
 const serverID = Env.get('serverID');
 const measurementId = Env.get('measurementId');
-const posthogKey = Env.get('posthogKey');
 
 export const analytics = new AnalyticsBrowser();
 
@@ -37,8 +35,6 @@ const AnalyticsService = (): TAnalyticsService => ({
       appVersion,
       env,
     });
-
-    posthog.capture('$pageview');
   },
   identify() {
     if (!isAnalyticsEnabled()) return;
@@ -47,17 +43,6 @@ const AnalyticsService = (): TAnalyticsService => ({
       appVersion,
       env,
     });
-
-    posthog.init(posthogKey, {
-      api_host: 'https://app.posthog.com',
-      loaded: ph => {
-        ph.identify(serverID, {appVersion, env});
-      },
-    });
-
-    if (posthog.has_opted_out_capturing()) {
-      posthog.opt_in_capturing();
-    }
   },
   load() {
     const isSegmentLoaded = Env.get('segmentLoaded');
@@ -70,7 +55,6 @@ const AnalyticsService = (): TAnalyticsService => ({
 
     if (!isAnalyticsEnabled() && isSegmentLoaded) {
       analytics.reset();
-      posthog.persistence && posthog.opt_out_capturing();
       Env.set('segmentLoaded', false);
     }
   },