posthog

Author: jordienr

apps/web/lib/posthog.ts

@@ -0,0 +1,30 @@
+import posthog from "posthog-js";
+import { IS_DEV } from "./is-dev";
+
+type EventId = "feedback";
+
+export function posthogCapture(
+  eventId: EventId,
+  payload: Record<string, any> = {}
+) {
+  posthog.capture(eventId, {
+    ...payload,
+    is_dev: IS_DEV,
+  });
+}
+
+export function posthogCaptureException(
+  error: Error,
+  payload: Record<string, any> = {}
+) {
+  posthog.captureException(error, {
+    ...payload,
+    is_dev: IS_DEV,
+  });
+}
+
+export function posthogIdentify({ email }: { email: string }) {
+  posthog.identify(email, {
+    is_dev: IS_DEV,
+  });
+}

apps/web/package.json

@@ -100,6 +100,7 @@
     "next-plausible": "^3.12.4",
     "nuqs": "^2.4.3",
     "openai": "^4.12.4",
+    "posthog-js": "^1.284.0",
     "raw-body": "^2.5.2",
     "react": "18.2.0",
     "react-confetti": "^6.1.0",

apps/web/src/components/Feedback.tsx

@@ -10,6 +10,8 @@ import { Button } from "./ui/button";
 import { toast } from "sonner";
 import { createSupabaseBrowserClient } from "@/lib/supabase";
 import { FeedbackForm } from "./Feedback/feedback-form";
+import posthog from "posthog-js";
+import { posthogCapture } from "lib/posthog";
 
 type Props = {};
 
@@ -37,6 +39,12 @@ const Feedback = (props: Props) => {
               throw user.error;
             }
 
+            posthogCapture("feedback", {
+              feedback,
+              type,
+              user_email: user.data.user.email,
+            });
+
             const { data, error } = await sb
               .from("feedback")
               .insert({ feedback, type, user_email: user.data.user.email });

apps/web/src/layouts/AppLayout.tsx

@@ -23,6 +23,7 @@ import { useSubscriptionQuery } from "@/queries/subscription";
 import { ZenblogToolbar } from "@/components/dev/zenblog-toolbar";
 import { IS_DEV } from "@/lib/constants";
 import { OnboardingDropdown } from "@/components/onboarding";
+import { posthogIdentify } from "lib/posthog";
 
 type Props = {
   children?: React.ReactNode;
@@ -53,9 +54,14 @@ export default function AppLayout({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user, loading]);
 
-  const selectedBlog = blogs?.find((blog) => blog.id === router.query.blogId);
+  useEffect(() => {
+    if (user && user.email) {
+      console.log("Identifying user", user.email);
+      posthogIdentify({ email: user.email });
+    }
+  }, [user]);
 
-  const isDev = IS_DEV;
+  const selectedBlog = blogs?.find((blog) => blog.id === router.query.blogId);
 
   const BlogNavItems = [
     {
@@ -211,7 +217,7 @@ export default function AppLayout({
           </nav>
           {selectedBlog && (
             <div className="border-b bg-white shadow-sm">
-              <div className="mx-auto flex max-w-5xl items-center justify-between overflow-x-auto">
+              <div className="mx-auto flex max-w-5xl items-center justify-between">
                 <div className="flex max-w-5xl items-center px-2">
                   {BlogNavItems.map((item) => (
                     <NavItem

apps/web/src/pages/_app.tsx

@@ -9,8 +9,10 @@ import {
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { Toaster } from "sonner";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { UserProvider } from "@/utils/supabase/browser";
+import { PostHogProvider } from "posthog-js/react";
+import posthog from "posthog-js";
 
 // Fonts
 const inter = Inter({
@@ -33,29 +35,44 @@ function MyApp({ Component, pageProps }: AppProps) {
       })
   );
 
+  useEffect(() => {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY as string, {
+      api_host: "https://eu.i.posthog.com",
+      person_profiles: "always",
+      defaults: "2025-05-24",
+      // Enable debug mode in development
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === "development") posthog.debug();
+      },
+    });
+    console.log("PostHog initialized", posthog);
+  }, []);
+
   return (
     <div className={`${inter.variable}`}>
-      <UserProvider>
-        <PlausibleProvider domain="zenblog.com">
-          <QueryClientProvider client={queryClient}>
-            <HydrationBoundary state={pageProps.dehydratedState}>
-              <Component key={pathname} {...pageProps} />
-              <Toaster
-                position="bottom-center"
-                toastOptions={{
-                  style: {
-                    borderRadius: "12px",
-                    backgroundColor: "#333333",
-                    color: "white",
-                    padding: "10px 12px",
-                    border: "none",
-                  },
-                }}
-              />
-            </HydrationBoundary>
-          </QueryClientProvider>
-        </PlausibleProvider>
-      </UserProvider>
+      <PostHogProvider client={posthog}>
+        <UserProvider>
+          <PlausibleProvider domain="zenblog.com">
+            <QueryClientProvider client={queryClient}>
+              <HydrationBoundary state={pageProps.dehydratedState}>
+                <Component key={pathname} {...pageProps} />
+                <Toaster
+                  position="bottom-center"
+                  toastOptions={{
+                    style: {
+                      borderRadius: "12px",
+                      backgroundColor: "#333333",
+                      color: "white",
+                      padding: "10px 12px",
+                      border: "none",
+                    },
+                  }}
+                />
+              </HydrationBoundary>
+            </QueryClientProvider>
+          </PlausibleProvider>
+        </UserProvider>
+      </PostHogProvider>
     </div>
   );
 }