Merge pull request #361 from joshsny/implement-posthog

feat: add posthog integration for analytics

Author: ixartz

.env

@@ -12,6 +12,10 @@ NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 # Disable Sentry warning with TurboPack
 SENTRY_SUPPRESS_TURBOPACK_WARNING=1
 
+# PostHog
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+
 ######## [BEGIN] SENSITIVE DATA ######## For security reason, don't update the following variables (secret key) directly in this file.
 ######## Please create a new file named `.env.local`, all environment files ending with `.local` won't be tracked by Git.
 ######## After creating the file, you can add the following variables.

.env.production

@@ -10,6 +10,10 @@
 # Sentry DSN
 NEXT_PUBLIC_SENTRY_DSN=
 
+# PostHog
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+
 ######## [BEGIN] SENSITIVE DATA ######## For security reason, don't update the following variables (secret key) directly in this file.
 ######## Please create a new file named `.env.production.local`, all environment files ending with `.local` won't be tracked by Git.
 ######## After creating the file, you can add the following variables.

package-lock.json

@@ -45,6 +45,7 @@
     "pg": "^8.13.3",
     "pino": "^9.6.0",
     "pino-pretty": "^13.0.0",
+    "posthog-js": "^1.223.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-hook-form": "^7.54.2",

package.json

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { DemoBadge } from '@/components/DemoBadge';
+import { PostHogProvider } from '@/components/providers/PostHogProvider';
 import arcjet, { detectBot, request } from '@/libs/Arcjet';
 import { Env } from '@/libs/Env';
 import { routing } from '@/libs/i18nNavigation';
@@ -92,8 +93,9 @@ export default async function RootLayout(props: {
           locale={locale}
           messages={messages}
         >
-          {props.children}
-
+          <PostHogProvider>
+            {props.children}
+          </PostHogProvider>
           <DemoBadge />
         </NextIntlClientProvider>
       </body>

src/app/[locale]/layout.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { Env } from '@/libs/Env';
+import { usePathname, useSearchParams } from 'next/navigation';
+import posthog from 'posthog-js';
+import { PostHogProvider as PHProvider, usePostHog } from 'posthog-js/react';
+import { Suspense, useEffect } from 'react';
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    if (Env.NEXT_PUBLIC_POSTHOG_KEY) {
+      posthog.init(Env.NEXT_PUBLIC_POSTHOG_KEY, {
+        api_host: Env.NEXT_PUBLIC_POSTHOG_HOST,
+        capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+      });
+    } else {
+      console.warn('PostHog not initialized, set a NEXT_PUBLIC_POSTHOG_KEY in your .env.local file to enable it');
+    }
+  }, []);
+
+  if (!Env.NEXT_PUBLIC_POSTHOG_KEY) {
+    return children;
+  }
+
+  return (
+    <PHProvider client={posthog}>
+      <SuspendedPostHogPageView />
+      {children}
+    </PHProvider>
+  );
+}
+
+function PostHogPageView(): null {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const posthog = usePostHog();
+
+  // Track pageviews
+  useEffect(() => {
+    if (pathname && posthog) {
+      let url = window.origin + pathname;
+      if (searchParams.toString()) {
+        url = `${url}?${searchParams.toString()}`;
+      }
+
+      posthog.capture('$pageview', { $current_url: url });
+    }
+  }, [pathname, searchParams, posthog]);
+
+  return null;
+}
+
+// Wrap this in Suspense to avoid the `useSearchParams` usage above
+// from de-opting the whole app into client-side rendering
+// See: https://nextjs.org/docs/messages/deopted-into-client-rendering
+function SuspendedPostHogPageView() {
+  return (
+    <Suspense fallback={null}>
+      <PostHogPageView />
+    </Suspense>
+  );
+}

src/components/providers/PostHogProvider.tsx

@@ -12,6 +12,8 @@ export const Env = createEnv({
     NEXT_PUBLIC_APP_URL: z.string().optional(),
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
     NEXT_PUBLIC_CLERK_SIGN_IN_URL: z.string().min(1),
+    NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
+    NEXT_PUBLIC_POSTHOG_HOST: z.string().optional(),
   },
   shared: {
     NODE_ENV: z.enum(['test', 'development', 'production']).optional(),
@@ -27,5 +29,7 @@ export const Env = createEnv({
       process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
     NEXT_PUBLIC_CLERK_SIGN_IN_URL: process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
     NODE_ENV: process.env.NODE_ENV,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+    NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
   },
 });