feat: setup posthog (#39)

* feat: setup posthog * feat: use web analytics instead of product analytics * fix: type error * ci: add build secrets * fix: typo --------- Co-authored-by: Ryan Martin <[email protected]>
Argus-Labs · Sep 27, 2024 · 8b4957c · 8b4957c
1 parent ceafc5b
commit 8b4957c
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 7 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+VITE_SENTRY_DSN=
+VITE_POSTHOG_KEY=
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -36,6 +36,9 @@ jobs:
         run: pnpm install
       - name: Build
         run: pnpm build
+        env:
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
       - name: Archive Release
         uses: thedoctor0/[email protected]
         with:

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.334.0",
+    "posthog-js": "^1.161.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,6 +1,8 @@
 import * as Sentry from '@sentry/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { PostHogConfig } from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 
@@ -52,18 +54,28 @@ Sentry.init({
   profilesSampleRate: 1.0,
 })
 
+const postHogConfig = {
+  apiKey: import.meta.env.VITE_POSTHOG_KEY as string,
+  options: {
+    person_profiles: 'identified_only',
+    capture_pageview: false,
+  } as PostHogConfig,
+}
+
 const rootElement = document.getElementById('root')!
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement)
   root.render(
     <StrictMode>
-      <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
-        <QueryClientProvider client={queryClient}>
-          <CardinalProvider>
-            <RouterProvider router={router} />
-          </CardinalProvider>
-        </QueryClientProvider>
-      </ThemeProvider>
+      <PostHogProvider apiKey={postHogConfig.apiKey} options={postHogConfig.options}>
+        <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
+          <QueryClientProvider client={queryClient}>
+            <CardinalProvider>
+              <RouterProvider router={router} />
+            </CardinalProvider>
+          </QueryClientProvider>
+        </ThemeProvider>
+      </PostHogProvider>
     </StrictMode>,
   )
 }
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/react'
 import { useQueryClient } from '@tanstack/react-query'
 import { createRootRoute, Outlet } from '@tanstack/react-router'
+import posthog from 'posthog-js'
 import { useEffect } from 'react'
 
 import { BottomBar } from '@/components/bottom-bar'
@@ -22,6 +23,9 @@ import { cn, errorToast } from '@/lib/utils'
 
 export const Route = createRootRoute({
   component: Root,
+  beforeLoad: (route) => {
+    posthog.capture('$pageview', { path: route.location.pathname })
+  },
 })
 
 interface CardinalEvent {