Add PostHog.

2024-07-14 06:00:03 -04:00
parent c5247a2aaa
commit 1c860bd4d9
4 changed files with 59 additions and 12 deletions
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/layout/themeProvider"
 import { ClerkProvider } from "@clerk/nextjs"
 import { Toaster } from "@/components/ui/sonner"
 import { Analytics } from "@vercel/analytics/react"
+import { PHProvider } from "./providers"

 export const metadata: Metadata = {
  title: "Sandbox",
@ -20,18 +21,20 @@ export default function RootLayout({
  return (
    <ClerkProvider>
      <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
-        <body>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="dark"
-            forcedTheme="dark"
-            disableTransitionOnChange
-          >
-            {children}
-            <Analytics />
-            <Toaster position="bottom-left" richColors />
-          </ThemeProvider>
-        </body>
+        <PHProvider>
+          <body>
+            <ThemeProvider
+              attribute="class"
+              defaultTheme="dark"
+              forcedTheme="dark"
+              disableTransitionOnChange
+            >
+              {children}
+              <Analytics />
+              <Toaster position="bottom-left" richColors />
+            </ThemeProvider>
+          </body>
+        </PHProvider>
      </html>
    </ClerkProvider>
  )
--- a/frontend/app/providers.js
+++ b/frontend/app/providers.js
@ -0,0 +1,13 @@
+"use client"
+import posthog from "posthog-js"
+import { PostHogProvider } from "posthog-js/react"
+
+if (typeof window !== "undefined") {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+  })
+}
+
+export function PHProvider({ children }) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+}