frontend/src/main.tsx

@@ -1,5 +1,6 @@
 import "./instrument"; // Sentry must init before any other imports
 
+import posthog from 'posthog-js'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { reactErrorHandler } from '@sentry/react'
@@ -9,10 +10,17 @@ import { Toaster } from 'sonner'
 import './index.css'
 import App from './App'
 
-const posthogOptions = {
+// Initialize PostHog client before rendering
-  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
+const posthogKey = import.meta.env.VITE_PUBLIC_POSTHOG_KEY as string | undefined
-  defaults: '2026-01-30',
+if (posthogKey) {
-} as const
+  posthog.init(posthogKey, {
+    api_host: (import.meta.env.VITE_PUBLIC_POSTHOG_HOST as string) || 'https://us.i.posthog.com',
+    autocapture: true,
+    capture_pageview: true,
+    capture_pageleave: 'if_capture_pageview',
+    persistence: 'localStorage+cookie',
+  })
+}
 
 createRoot(document.getElementById('root')!, {
   onUncaughtError: reactErrorHandler(),
@@ -20,10 +28,7 @@ createRoot(document.getElementById('root')!, {
   onRecoverableError: reactErrorHandler(),
 }).render(
   <StrictMode>
-    <PostHogProvider
+    <PostHogProvider client={posthog}>
-      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY || ''}
-      options={posthogOptions}
-    >
       <HelmetProvider>
         {/* Toast notification system - theme syncs automatically via CSS custom properties */}
         <Toaster