feat: Track performance and web vitals (#360)

.changeset/short-lamps-clean.md

@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Track web vitals and performance analytics with PostHog

biome.json

@@ -11,6 +11,9 @@
       "a11y": {
         "noSvgWithoutTitle": "off"
       },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
       "style": {
         "noNonNullAssertion": "off"
       },

package.json

@@ -68,6 +68,7 @@
     "next-themes": "^0.4.4",
     "oslo": "^1.2.1",
     "postcss": "^8.5.1",
+    "posthog-js": "^1.215.0",
     "pretty-bytes": "^6.1.1",
     "react": "^19.0.0",
     "react-aria": "^3.37.0",

src/main.tsx

@@ -14,6 +14,8 @@ import {
 import { ArrowLeft, TriangleAlert } from "lucide-react";
 import { LazyMotion, domAnimation } from "motion/react";
 import { ThemeProvider } from "next-themes";
+import type { PostHogConfig } from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
 import { StrictMode, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { HelmetProvider } from "react-helmet-async";
@@ -93,18 +95,33 @@ const InnerApp = () => {
   );
 };
 
+const postHogOptions: Partial<PostHogConfig> = {
+  api_host: import.meta.env.VITE_REACT_APP_PUBLIC_POSTHOG_HOST,
+  // Since we're using TanStack Router, we need to track pageviews manually
+  capture_pageview: false,
+  // Enable web vitals
+  capture_performance: {
+    web_vitals: true,
+  },
+};
+
 const rootElement = document.getElementById("root")!;
 if (!rootElement.innerHTML) {
   const root = createRoot(rootElement);
   root.render(
     <StrictMode>
       <HelmetProvider>
         <ConvexAuthProvider client={convex}>
-          <ThemeProvider attribute="class" disableTransitionOnChange>
-            <LazyMotion strict features={domAnimation}>
-              <InnerApp />
-            </LazyMotion>
-          </ThemeProvider>
+          <PostHogProvider
+            apiKey={import.meta.env.VITE_REACT_APP_PUBLIC_POSTHOG_KEY}
+            options={postHogOptions}
+          >
+            <ThemeProvider attribute="class" disableTransitionOnChange>
+              <LazyMotion strict features={domAnimation}>
+                <InnerApp />
+              </LazyMotion>
+            </ThemeProvider>
+          </PostHogProvider>
         </ConvexAuthProvider>
       </HelmetProvider>
     </StrictMode>,

src/routes/__root.tsx

@@ -4,6 +4,7 @@ import {
   Outlet,
   type ToOptions,
   createRootRouteWithContext,
+  useLocation,
   useRouter,
 } from "@tanstack/react-router";
 import type { ConvexAuthState } from "convex/react";
@@ -15,6 +16,8 @@ import {
   OctagonAlert,
 } from "lucide-react";
 import { useTheme } from "next-themes";
+import posthog from "posthog-js";
+import { useEffect } from "react";
 import { RouterProvider } from "react-aria-components";
 import { Toaster } from "sonner";
 
@@ -25,6 +28,21 @@ declare module "react-aria-components" {
   }
 }
 
+function PostHogPageView() {
+  const location = useLocation();
+
+  // Track pageviews
+  useEffect(() => {
+    if (posthog) {
+      posthog.capture("$pageview", {
+        $current_url: location.pathname,
+      });
+    }
+  }, [location]);
+
+  return null;
+}
+
 interface RouterContext {
   title: string;
   auth: Promise<ConvexAuthState>;
@@ -55,6 +73,7 @@ function RootRoute() {
       }
     >
       <Outlet />
+      <PostHogPageView />
       <Toaster
         theme={theme as "light" | "dark" | "system"}
         offset={16}