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

* fix(posthog): make instrumentation client not use next-runtime-env

* feat(posthog): added posthog provider
This commit is contained in:
Waleed
2025-10-06 10:59:46 -07:00
committed by GitHub
parent 223ecda80e
commit 07fd9c3a4a
3 changed files with 53 additions and 44 deletions

View File

@@ -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>
)

View File

@@ -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'

View File

@@ -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>
}