feat: ✨ Posthog Analytics

subhamBharadwaz · May 9, 2024 · c14c94b · c14c94b
1 parent 0cc7fef
commit c14c94b
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 14 deletions.
diff --git a/.env.example b/.env.example
@@ -4,6 +4,13 @@
 NEXT_PUBLIC_APP_URL=http://localhost:3000
 NODE_ENV=development
 
+# -----------------------------------------------------------------------------
+# Analytics (PostHog)
+# -----------------------------------------------------------------------------
+
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=
+
 
 # -----------------------------------------------------------------------------
 # Database (MySQL - PlanetScale)

diff --git a/next.config.mjs b/next.config.mjs
@@ -12,6 +12,20 @@ const nextConfig = {
   images: {
     domains: ["res.cloudinary.com", "images.unsplash.com", "uploadthing.com"],
   },
+  async rewrites() {
+    return [
+      {
+        source: "/ingest/static/:path*",
+        destination: "https://us-assets.i.posthog.com/static/:path*",
+      },
+      {
+        source: "/ingest/:path*",
+        destination: "https://us.i.posthog.com/:path*",
+      },
+    ]
+  },
+  // This is required to support PostHog trailing slash API requests
+  skipTrailingSlashRedirect: true,
 }
 
 export default withContentlayer(nextConfig)
diff --git a/package.json b/package.json
@@ -98,6 +98,7 @@
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
     "postcss": "8.4.24",
+    "posthog-js": "^1.131.3",
     "react": "18.2.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,6 +8,7 @@ import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { Toaster } from "@/components/ui/toaster"
 import { Analytics } from "@/components/analytics"
+import { CSPostHogProvider } from "@/components/analytics-provider"
 import { Providers } from "@/components/providers"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
 
@@ -80,20 +81,22 @@ export default function RootLayout({
   return (
     <ClerkProvider>
       <html lang="en">
-        <body
-          className={cn(
-            "min-h-screen bg-background font-sans antialiased",
-            fontSans.variable,
-            fontHeading.variable
-          )}
-        >
-          <Providers>
-            {children}
-            <Analytics />
-            <Toaster />
-            <TailwindIndicator />
-          </Providers>
-        </body>
+        <CSPostHogProvider>
+          <body
+            className={cn(
+              "min-h-screen bg-background font-sans antialiased",
+              fontSans.variable,
+              fontHeading.variable
+            )}
+          >
+            <Providers>
+              {children}
+              <Analytics />
+              <Toaster />
+              <TailwindIndicator />
+            </Providers>
+          </body>
+        </CSPostHogProvider>
       </html>
     </ClerkProvider>
   )

diff --git a/src/components/analytics-provider.tsx b/src/components/analytics-provider.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { useEffect } from "react"
+import { useAuth, useUser } from "@clerk/nextjs"
+import posthog from "posthog-js"
+import { PostHogProvider } from "posthog-js/react"
+
+import { env } from "@/env.mjs"
+
+if (typeof window !== "undefined") {
+  posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: "/ingest",
+    ui_host: "https://us.i.posthog.com",
+  })
+}
+export function CSPostHogProvider({ children }) {
+  return (
+    <PostHogProvider client={posthog}>
+      <PostHogAuthWrapper>{children}</PostHogAuthWrapper>
+    </PostHogProvider>
+  )
+}
+
+function PostHogAuthWrapper({ children }: { children: React.ReactNode }) {
+  const auth = useAuth()
+  const userInfo = useUser()
+
+  useEffect(() => {
+    if (userInfo.user) {
+      posthog.identify(userInfo.user.id, {
+        email: userInfo.user.emailAddresses[0].emailAddress,
+        name: userInfo.user.fullName,
+      })
+    } else if (!auth.isSignedIn) {
+      posthog.reset()
+    }
+  }, [auth, userInfo])
+  return children
+}
diff --git a/src/env.mjs b/src/env.mjs
@@ -24,6 +24,8 @@ export const env = createEnv({
   client: {
     NEXT_PUBLIC_APP_URL: z.string().min(1),
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string(),
+    NEXT_PUBLIC_POSTHOG_KEY: z.string(),
+    NEXT_PUBLIC_POSTHOG_HOST: z.string(),
   },
 
   /**
@@ -42,6 +44,8 @@ export const env = createEnv({
     UPLOADTHING_APP_ID: process.env.UPLOADTHING_APP_ID,
     RESEND_API_KEY: process.env.RESEND_API_KEY,
     EMAIL_FROM_ADDRESS: process.env.EMAIL_FROM_ADDRESS,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+    NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
     STRIPE_API_KEY: process.env.STRIPE_API_KEY,
     STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
     STRIPE_PRO_MONTHLY_PLAN_ID: process.env.STRIPE_PRO_MONTHLY_PLAN_ID,