[CI] (b19c6c1) react-router/rrv7-starter

apps/react-router/rrv7-starter/.env.example

@@ -1 +1,3 @@
 VITE_SITE_URL=http://localhost:3000
+VITE_POSTHOG_KEY=your_posthog_api_key
+VITE_POSTHOG_HOST=https://us.i.posthog.com

apps/react-router/rrv7-starter/app/lib/posthog/index.ts

@@ -0,0 +1 @@
+export { PostHogProvider, posthog } from './provider'

apps/react-router/rrv7-starter/app/lib/posthog/provider.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router'
+import posthog from 'posthog-js'
+
+interface PostHogProviderProps {
+  children: React.ReactNode
+  apiKey: string
+  host: string
+}
+
+export function PostHogProvider({ children, apiKey, host }: PostHogProviderProps) {
+  const location = useLocation()
+
+  // Initialize PostHog on mount (client-side only)
+  useEffect(() => {
+    if (typeof window !== 'undefined' && apiKey) {
+      posthog.init(apiKey, {
+        api_host: host,
+        person_profiles: 'identified_only',
+        capture_pageview: false, // We'll manually capture pageviews to handle SPA navigation
+        capture_pageleave: true,
+      })
+    }
+  }, [apiKey, host])
+
+  // Track pageviews on route changes
+  useEffect(() => {
+    if (typeof window !== 'undefined' && posthog.__loaded) {
+      posthog.capture('$pageview')
+    }
+  }, [location.pathname])
+
+  return <>{children}</>
+}
+
+export { posthog }

apps/react-router/rrv7-starter/app/root.tsx

@@ -20,6 +20,7 @@ import Footer from '@/components/footer'
 import { SITE_URL, WATERMARK } from '@/lib/constants'
 import { generateMeta } from '@/lib/utils/meta'
 import { generateLinks } from '@/lib/utils/links'
+import { PostHogProvider } from '@/lib/posthog'
 
 export const links: Route.LinksFunction = () =>
   generateLinks({
@@ -88,8 +89,12 @@ export default function App() {
 
   const location = useLocation()
 
+  const posthogKey = import.meta.env.VITE_POSTHOG_KEY || ''
+  const posthogHost = import.meta.env.VITE_POSTHOG_HOST || 'https://us.i.posthog.com'
+
   return (
-    <RouteTransitionManager
+    <PostHogProvider apiKey={posthogKey} host={posthogHost}>
+      <RouteTransitionManager
       appear
       routes={routes}
       pathname={location.pathname}
@@ -128,6 +133,7 @@ export default function App() {
         </main>
       )}
     </RouteTransitionManager>
+    </PostHogProvider>
   )
 }
 

apps/react-router/rrv7-starter/env.d.ts

@@ -7,6 +7,8 @@ declare const __vercel: {
 
 interface ImportMetaEnv {
   readonly VITE_SITE_URL: string | undefined
+  readonly VITE_POSTHOG_KEY: string | undefined
+  readonly VITE_POSTHOG_HOST: string | undefined
 }
 
 interface ImportMeta {

apps/react-router/rrv7-starter/package.json

@@ -19,6 +19,7 @@
     "clsx": "^2.1.1",
     "gsap": "^3.12.7",
     "isbot": "^5.1.17",
+    "posthog-js": "^1.321.1",
     "react": "^19.0.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^19.0.0",