feat(posthog): added posthog provider instead of using nextjs instrumentation#1555
feat(posthog): added posthog provider instead of using nextjs instrumentation#1555waleedlatif1 merged 2 commits intostagingfrom
Conversation
There was a problem hiding this comment.
Greptile Overview
Summary
This PR migrates PostHog analytics initialization from Next.js instrumentation to a React provider pattern. The change addresses build-time environment variable issues by moving PostHog initialization from `instrumentation-client.ts` to a new `PostHogProvider` component that wraps the entire application in `layout.tsx`.The implementation introduces a comprehensive analytics setup with session recording, performance monitoring, autocapture, and heatmaps. The new provider follows React best practices with proper TypeScript typing, environment variable validation, and prevents double initialization using PostHog's __loaded flag. The custom telemetry system remains intact in the instrumentation file, maintaining the existing /api/telemetry endpoint for internal metrics while PostHog handles standard analytics.
The change also removes the dependency on Vercel Analytics and the isHosted conditional logic, suggesting analytics will now work consistently across all environments. This architectural shift moves from build-time to runtime environment variable access using the next-runtime-env package, which should resolve the environment variable reliability issues mentioned in the PR description.
Important Files Changed
Changed Files
| Filename | Score | Overview |
|---|---|---|
| apps/sim/app/layout.tsx | 4/5 | Replaced Vercel Analytics with PostHogProvider wrapper and removed isHosted conditional |
| apps/sim/instrumentation-client.ts | 4/5 | Removed PostHog initialization while preserving custom telemetry tracking functionality |
| apps/sim/lib/posthog/provider.tsx | 3/5 | Added new PostHog provider with comprehensive analytics configuration and session recording |
Confidence score: 3/5
- This PR introduces significant changes to analytics infrastructure that could impact tracking reliability
- Score reflects concerns about hard-coded configuration values and comprehensive session recording settings that need verification
- Pay close attention to apps/sim/lib/posthog/provider.tsx for the hard-coded date value and session recording configuration
Sequence Diagram
sequenceDiagram
participant User
participant Browser
participant Layout as "RootLayout"
participant PostHog as "PostHogProvider"
participant Session as "SessionProvider"
participant Theme as "ThemeProvider"
participant PH as "posthog"
User->>Browser: "Load application"
Browser->>Layout: "Initialize RootLayout"
Layout->>Layout: "Generate structured data"
Layout->>Layout: "Generate theme CSS"
Layout->>PostHog: "Render PostHogProvider"
PostHog->>PostHog: "useEffect hook triggered"
PostHog->>PostHog: "Check NEXT_PUBLIC_POSTHOG_ENABLED"
PostHog->>PostHog: "Check NEXT_PUBLIC_POSTHOG_KEY"
alt PostHog enabled and key exists
PostHog->>PH: "posthog.init() with configuration"
PH-->>PostHog: "PostHog initialized"
else PostHog disabled or no key
PostHog->>PostHog: "Skip initialization"
end
PostHog->>Theme: "Render ThemeProvider as child"
Theme->>Session: "Render SessionProvider as child"
Session->>Layout: "Render BrandedLayout with children"
3 files reviewed, no comments
Summary
added posthog provider instead of using nextjs instrumentation which was finnicky because of build-time environment variables
Type of Change
Testing
Tested manually.
Checklist