feat(posthog): added posthog provider instead of using nextjs instrumentation (#1555)

waleedlatif1 · web-flow · commit 07fd9c3a4a15 · 2025-10-06T10:59:46.000-07:00
* fix(posthog): make instrumentation client not use next-runtime-env

* feat(posthog): added posthog provider
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
@@ -1,11 +1,10 @@
-import { Analytics } from '@vercel/analytics/next'
 import type { Metadata, Viewport } from 'next'
 import { PublicEnvScript } from 'next-runtime-env'
 import { BrandedLayout } from '@/components/branded-layout'
 import { generateThemeCSS } from '@/lib/branding/inject-theme'
 import { generateBrandedMetadata, generateStructuredData } from '@/lib/branding/metadata'
-import { isHosted } from '@/lib/environment'
 import { createLogger } from '@/lib/logs/console/logger'
+import { PostHogProvider } from '@/lib/posthog/provider'
 import '@/app/globals.css'
 
 import { SessionProvider } from '@/lib/session/session-context'
@@ -55,7 +54,6 @@ export const viewport: Viewport = {
   ],
 }
 
-// Generate dynamic metadata based on brand configuration
 export const metadata: Metadata = generateBrandedMetadata()
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -91,19 +89,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <PublicEnvScript />
       </head>
       <body suppressHydrationWarning>
-        <ThemeProvider>
-          <SessionProvider>
-            <BrandedLayout>
-              <ZoomPrevention />
-              {children}
-              {isHosted && (
-                <>
-                  <Analytics />
-                </>
-              )}
-            </BrandedLayout>
-          </SessionProvider>
-        </ThemeProvider>
+        <PostHogProvider>
+          <ThemeProvider>
+            <SessionProvider>
+              <BrandedLayout>
+                <ZoomPrevention />
+                {children}
+              </BrandedLayout>
+            </SessionProvider>
+          </ThemeProvider>
+        </PostHogProvider>
       </body>
     </html>
   )
diff --git a/apps/sim/instrumentation-client.ts b/apps/sim/instrumentation-client.ts
@@ -5,34 +5,7 @@
  * It respects the user's telemetry preferences stored in localStorage.
  *
  */
-import posthog from 'posthog-js'
-import { env, getEnv, isTruthy } from './lib/env'
-
-// Initialize PostHog only if explicitly enabled
-if (isTruthy(getEnv('NEXT_PUBLIC_POSTHOG_ENABLED')) && getEnv('NEXT_PUBLIC_POSTHOG_KEY')) {
-  posthog.init(getEnv('NEXT_PUBLIC_POSTHOG_KEY')!, {
-    api_host: '/ingest',
-    ui_host: 'https://us.posthog.com',
-    person_profiles: 'identified_only',
-    capture_pageview: true,
-    capture_pageleave: true,
-    capture_performance: true,
-    session_recording: {
-      maskAllInputs: false,
-      maskInputOptions: {
-        password: true,
-        email: false,
-      },
-      recordCrossOriginIframes: false,
-      recordHeaders: true,
-      recordBody: true,
-    },
-    autocapture: true,
-    capture_dead_clicks: true,
-    persistence: 'localStorage+cookie',
-    enable_heatmaps: true,
-  })
-}
+import { env } from './lib/env'
 
 if (typeof window !== 'undefined') {
   const TELEMETRY_STATUS_KEY = 'simstudio-telemetry-status'
diff --git a/apps/sim/lib/posthog/provider.tsx b/apps/sim/lib/posthog/provider.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { useEffect } from 'react'
+import posthog from 'posthog-js'
+import { PostHogProvider as PHProvider } from 'posthog-js/react'
+import { getEnv, isTruthy } from '../env'
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    const posthogEnabled = getEnv('NEXT_PUBLIC_POSTHOG_ENABLED')
+    const posthogKey = getEnv('NEXT_PUBLIC_POSTHOG_KEY')
+
+    if (isTruthy(posthogEnabled) && posthogKey && !posthog.__loaded) {
+      posthog.init(posthogKey, {
+        api_host: '/ingest',
+        ui_host: 'https://us.posthog.com',
+        defaults: '2025-05-24',
+        person_profiles: 'identified_only',
+        capture_pageview: true,
+        capture_pageleave: true,
+        capture_performance: true,
+        session_recording: {
+          maskAllInputs: false,
+          maskInputOptions: {
+            password: true,
+            email: false,
+          },
+          recordCrossOriginIframes: false,
+          recordHeaders: true,
+          recordBody: true,
+        },
+        autocapture: true,
+        capture_dead_clicks: true,
+        persistence: 'localStorage+cookie',
+        enable_heatmaps: true,
+      })
+    }
+  }, [])
+
+  return <PHProvider client={posthog}>{children}</PHProvider>
+}
