posthog migration

Author: jnsdls

apps/dashboard/.env.example

@@ -108,4 +108,8 @@ STRIPE_SECRET_KEY=""
 
 # required for server wallet management
 NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
-NEXT_PUBLIC_ENGINE_CLOUD_URL=""
+NEXT_PUBLIC_ENGINE_CLOUD_URL=""
+
+# posthog setup
+NEXT_PUBLIC_POSTHOG_KEY=""
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

apps/dashboard/knip.json

@@ -13,6 +13,7 @@
     "@thirdweb-dev/service-utils",
     "@thirdweb-dev/vault-sdk",
     "@types/color",
-    "fast-xml-parser"
+    "fast-xml-parser",
+    "posthog-node"
   ]
 }

apps/dashboard/next.config.ts

@@ -146,6 +146,18 @@ const baseNextConfig: NextConfig = {
   },
   async rewrites() {
     return [
+      {
+        source: "/_ph/static/:path*",
+        destination: "https://us-assets.i.posthog.com/static/:path*",
+      },
+      {
+        source: "/_ph/:path*",
+        destination: "https://us.i.posthog.com/:path*",
+      },
+      {
+        source: "/_ph/decide",
+        destination: "https://us.i.posthog.com/decide",
+      },
       {
         source: "/thirdweb.eth",
         destination: "/deployer.thirdweb.eth",
@@ -173,6 +185,8 @@ const baseNextConfig: NextConfig = {
       ]),
     ];
   },
+  // This is required to support PostHog trailing slash API requests
+  skipTrailingSlashRedirect: true,
   images: {
     dangerouslyAllowSVG: true,
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",

apps/dashboard/package.json

@@ -63,7 +63,6 @@
     "date-fns": "4.1.0",
     "fast-xml-parser": "^5.2.5",
     "fetch-event-stream": "0.1.5",
-    "flat": "^6.0.1",
     "framer-motion": "12.17.0",
     "fuse.js": "7.1.0",
     "input-otp": "^1.4.1",
@@ -78,7 +77,8 @@
     "p-limit": "^6.2.0",
     "papaparse": "^5.5.3",
     "pluralize": "^8.0.0",
-    "posthog-js": "1.67.1",
+    "posthog-js": "1.252.0",
+    "posthog-node": "5.1.0",
     "prettier": "3.5.3",
     "qrcode": "^1.5.3",
     "react": "19.1.0",

apps/dashboard/src/@/analytics/dasboard.client.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { PostHog } from "posthog-js";
+import { useEffect } from "react";
+import { DEFAULT_POSTHOG_SETTINGS } from "./shared";
+
+const posthog = new PostHog();
+let initialized = false;
+
+function init() {
+  const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+  if (!posthogKey) {
+    console.warn(
+      "[DASHBOARD_ANALYTICS] NEXT_PUBLIC_POSTHOG_KEY is not set, cannt initialize analytics",
+    );
+    return;
+  }
+
+  if (!initialized) {
+    posthog.init(posthogKey, DEFAULT_POSTHOG_SETTINGS, "dashboard");
+    initialized = true;
+  }
+}
+
+function identifyUser(userId: string) {
+  if (!initialized) {
+    console.warn(
+      "[DASHBOARD_ANALYTICS] is not initialized, cannot identify user",
+    );
+    return;
+  }
+  posthog.identify(userId);
+}
+
+function identifyTeam(teamId: string) {
+  if (!initialized) {
+    console.warn(
+      "[DASHBOARD_ANALYTICS] is not initialized, cannot identify team",
+    );
+    return;
+  }
+  posthog.group("team", teamId);
+}
+
+export function reset() {
+  if (!initialized) {
+    console.warn("[DASHBOARD_ANALYTICS] is not initialized, cannot reset");
+    return;
+  }
+  posthog.reset();
+}
+
+export function DashboardAnalyticsInitializer(props: { accountId?: string }) {
+  // this ONE time we need to use a useEffect to initialize the posthog instance
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    init();
+  }, []);
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (props.accountId) {
+      identifyUser(props.accountId);
+    }
+  }, [props.accountId]);
+  return null;
+}
+
+export function TeamIdentifier(props: { teamId: string }) {
+  // this ONE time we need to use a useEffect to initialize the posthog instance
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    identifyTeam(props.teamId);
+  }, [props.teamId]);
+  return null;
+}

apps/dashboard/src/@/analytics/shared.ts

@@ -0,0 +1,11 @@
+export const DEFAULT_POSTHOG_SETTINGS = {
+  api_host: "/_ph",
+  ui_host: "https://us.posthog.com",
+  capture_pageview: "history_change",
+  capture_pageleave: "if_capture_pageview",
+  // disable exception capture (for now)
+  capture_exceptions: false,
+  // specifically disable autocapture (does not affect pageview capture)
+  autocapture: false,
+  debug: process.env.NODE_ENV === "development",
+} as const;

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import * as analytics from "@/analytics/dasboard.client";
 import { Button } from "@/components/ui/button";
 import { useStore } from "@/lib/reactive";
 import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
@@ -155,6 +156,7 @@ export const CustomConnectWallet = (props: {
         }}
         onDisconnect={async () => {
           try {
+            analytics.reset();
             await doLogout();
           } catch (err) {
             console.error("Failed to log out", err);

apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { createTeam } from "@/actions/createTeam";
+import * as analytics from "@/analytics/dasboard.client";
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
@@ -34,6 +35,7 @@ export function AccountHeader(props: {
 
   const logout = useCallback(async () => {
     try {
+      analytics.reset();
       await doLogout();
       if (wallet) {
         disconnect(wallet);

apps/dashboard/src/app/(app)/account/settings/AccountSettingsPage.tsx

@@ -2,6 +2,7 @@
 import { confirmEmailWithOTP } from "@/actions/confirmEmail";
 import { apiServerProxy } from "@/actions/proxies";
 import { updateAccount } from "@/actions/updateAccount";
+import * as analytics from "@/analytics/dasboard.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebClient } from "thirdweb";
@@ -45,6 +46,7 @@ export function AccountSettingsPage(props: {
             }
           }}
           onAccountDeleted={async () => {
+            analytics.reset();
             await doLogout();
             if (activeWallet) {
               disconnect(activeWallet);

apps/dashboard/src/app/(app)/layout.tsx

@@ -1,13 +1,13 @@
 import "../../global.css";
 import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
-import { PHProvider } from "lib/posthog/Posthog";
-import { PosthogHeadSetup } from "lib/posthog/PosthogHeadSetup";
-import { PostHogPageView } from "lib/posthog/PosthogPageView";
+
+import { DashboardAnalyticsInitializer } from "@/analytics/dasboard.client";
 import type { Metadata } from "next";
 import PlausibleProvider from "next-plausible";
 import { Inter } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
+import { getRawAccount } from "./account/settings/getAccount";
 import { AppRouterProviders } from "./providers";
 
 const fontSans = Inter({
@@ -48,11 +48,12 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const account = await getRawAccount();
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
@@ -61,26 +62,20 @@ export default function RootLayout({
           customDomain="https://pl.thirdweb.com"
           selfHosted
         />
-        <PosthogHeadSetup />
       </head>
-      <PHProvider disable_session_recording={true}>
-        <PostHogPageView />
-        <body
-          className={cn(
-            "bg-background font-sans antialiased",
-            fontSans.variable,
-          )}
-        >
-          <AppRouterProviders>{children}</AppRouterProviders>
-          <DashboardRouterTopProgressBar />
-          <NextTopLoader
-            color="hsl(var(--foreground))"
-            height={3}
-            shadow={false}
-            showSpinner={false}
-          />
-        </body>
-      </PHProvider>
+      <body
+        className={cn("bg-background font-sans antialiased", fontSans.variable)}
+      >
+        <AppRouterProviders>{children}</AppRouterProviders>
+        <DashboardRouterTopProgressBar />
+        <DashboardAnalyticsInitializer accountId={account?.id} />
+        <NextTopLoader
+          color="hsl(var(--foreground))"
+          height={3}
+          shadow={false}
+          showSpinner={false}
+        />
+      </body>
     </html>
   );
 }