feat: track posthog events

apps/backoffice-v2/src/common/components/templates/Providers/Providers.tsx

@@ -1,16 +1,29 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { FunctionComponent, PropsWithChildren } from 'react';
+import { TooltipProvider } from '@ballerine/ui';
+import { PostHogProvider } from 'posthog-js/react';
 
 import { queryClient } from '@/lib/react-query/query-client';
 import { AuthProvider } from '@/domains/auth/context/AuthProvider/AuthProvider';
-import { TooltipProvider } from '@ballerine/ui';
+import { env } from '@/common/env/env';
 
 export const Providers: FunctionComponent<PropsWithChildren> = ({ children }) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <AuthProvider>
-        <TooltipProvider delayDuration={100}>{children}</TooltipProvider>
-      </AuthProvider>
-    </QueryClientProvider>
+    <PostHogProvider
+      apiKey={env.VITE_POSTHOG_KEY}
+      options={{
+        api_host: env.VITE_POSTHOG_HOST,
+        person_profiles: 'identified_only',
+        loaded: ph => {
+          ph.register_for_session({ environment: env.VITE_ENVIRONMENT_NAME });
+        },
+      }}
+    >
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <TooltipProvider delayDuration={100}>{children}</TooltipProvider>
+        </AuthProvider>
+      </QueryClientProvider>
+    </PostHogProvider>
   );
 };

apps/backoffice-v2/src/initialize-monitoring/initialize-monitoring.ts

@@ -14,16 +14,6 @@ export const initializeMonitoring = () => {
     return;
   }
 
-  if (env.VITE_POSTHOG_KEY && env.VITE_POSTHOG_HOST) {
-    posthog.init(env.VITE_POSTHOG_KEY, {
-      api_host: env.VITE_POSTHOG_HOST,
-      person_profiles: 'identified_only',
-      loaded: ph => {
-        ph.register_for_session({ environment: env.VITE_ENVIRONMENT_NAME });
-      },
-    });
-  }
-
   if (env.VITE_SENTRY_DSN) {
     Sentry.init({
       dsn: env.VITE_SENTRY_DSN,

apps/backoffice-v2/src/main.tsx

@@ -17,8 +17,8 @@ import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import { initializeMonitoring } from '@/initialize-monitoring/initialize-monitoring';
 import { initializeSessionRecording } from '@/initialize-session-recording/initialize-session-recording';
-initializeMonitoring();
 
+initializeMonitoring();
 initializeSessionRecording();
 
 dayjs.extend(advancedFormat);

apps/backoffice-v2/src/pages/Root/Root.page.tsx

@@ -5,6 +5,7 @@ import { FullScreenLoader } from '@/common/components/molecules/FullScreenLoader
 import Chatbot from '@/domains/chat/chatbot-opengpt';
 import { env } from '@/common/env/env';
 import { Outlet } from 'react-router-dom';
+import { PostHogPageView } from './components/PostHogRootEvents';
 
 const ReactQueryDevtools = lazy(() =>
   process.env.NODE_ENV !== 'production'
@@ -44,6 +45,7 @@ export const Root: FunctionComponent = () => {
   return (
     <Providers>
       <Outlet />
+      <PostHogPageView />
       <ChatbotLayout />
       {/*<Suspense>*/}
       {/*  <ReactQueryDevtools  />*/}

apps/backoffice-v2/src/pages/Root/components/PostHogRootEvents.tsx

@@ -0,0 +1,19 @@
+// https://posthog.com/tutorials/single-page-app-pageviews#tracking-pageviews-in-react-router
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { usePostHog } from 'posthog-js/react';
+
+export const PostHogPageView = () => {
+  const location = useLocation();
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (posthog) {
+      posthog.capture('$pageview', {
+        $current_url: window.location.href,
+      });
+    }
+  }, [posthog, location]);
+
+  return null;
+};