Switch from apiKey+options pattern to explicit posthog.init() before render, then pass client instance to PostHogProvider. This is more reliable and matches the PostHog SDK docs' recommended client pattern. Enables autocapture and pageview tracking per PostHog defaults. Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
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'
|
|
import { HelmetProvider } from 'react-helmet-async'
|
|
import { PostHogProvider } from '@posthog/react'
|
|
import { Toaster } from 'sonner'
|
|
import './index.css'
|
|
import App from './App'
|
|
|
|
// Initialize PostHog client before rendering
|
|
const posthogKey = import.meta.env.VITE_PUBLIC_POSTHOG_KEY as string | undefined
|
|
if (posthogKey) {
|
|
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(),
|
|
onCaughtError: reactErrorHandler(),
|
|
onRecoverableError: reactErrorHandler(),
|
|
}).render(
|
|
<StrictMode>
|
|
<PostHogProvider client={posthog}>
|
|
<HelmetProvider>
|
|
{/* Toast notification system - theme syncs automatically via CSS custom properties */}
|
|
<Toaster
|
|
position="top-right"
|
|
expand={false}
|
|
closeButton
|
|
visibleToasts={3}
|
|
gap={8}
|
|
theme="dark"
|
|
toastOptions={{
|
|
className: 'sonner-toast-custom',
|
|
}}
|
|
/>
|
|
<App />
|
|
</HelmetProvider>
|
|
</PostHogProvider>
|
|
</StrictMode>,
|
|
)
|