feat: add posthog analytics

aamirazad · Aug 7, 2024 · c7401ca · c7401ca
1 parent 9483af3
commit c7401ca
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 20 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "next": "^14.2.4",
     "next-themes": "^0.3.0",
     "postgres": "^3.4.4",
+    "posthog-js": "^1.154.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.5",

diff --git a/src/app/_analytics/provider.tsx b/src/app/_analytics/provider.tsx
@@ -0,0 +1,38 @@
+"use client";
+import { useAuth, useUser } from "@clerk/nextjs";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { useEffect } from "react";
+
+if (typeof window !== "undefined") {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+    api_host: "/ingest",
+    ui_host: "https://app.posthog.com",
+  });
+}
+
+export function CSPostHogProvider({ children }: { children: React.ReactNode }) {
+  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/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 import { ThemeProvider } from "@/components/theme-provider";
 import { cn } from "@/lib/utils";
 import { dark } from "@clerk/themes";
+import { CSPostHogProvider } from "@/app/_analytics/provider";
 
 export const metadata = {
   title: "Homelab Connector",
@@ -26,27 +27,29 @@ export default function RootLayout({
         baseTheme: dark,
       }}
     >
-      <html
-        suppressHydrationWarning
-        lang="en"
-        className={cn(
-          "min-h-screen bg-background font-sans antialiased",
-          GeistSans.variable,
-        )}
-      >
-        <body className="h-screen">
-          <ThemeProvider attribute="class" defaultTheme="dark">
-            <div className="flex h-full flex-col gap-12 md:gap-0">
-              <TopNav />
-              <div className="flex h-full flex-col items-center p-4 px-6">
-                {children}
+      <CSPostHogProvider>
+        <html
+          suppressHydrationWarning
+          lang="en"
+          className={cn(
+            "min-h-screen bg-background font-sans antialiased",
+            GeistSans.variable,
+          )}
+        >
+          <body className="h-screen">
+            <ThemeProvider attribute="class" defaultTheme="dark">
+              <div className="flex h-full flex-col gap-12 md:gap-0">
+                <TopNav />
+                <div className="flex h-full flex-col items-center p-4 px-6">
+                  {children}
+                </div>
               </div>
-            </div>
-            {modal}
-            <div id="modal-root" />
-          </ThemeProvider>
-        </body>
-      </html>
+              {modal}
+              <div id="modal-root" />
+            </ThemeProvider>
+          </body>
+        </html>
+      </CSPostHogProvider>
     </ClerkProvider>
   );
 }