posthog migration

Author: jnsdls

apps/dashboard/.env.example

@@ -35,10 +35,6 @@ NEXT_PUBLIC_DASHBOARD_UPLOAD_SERVER="https://storage.thirdweb-dev.com"
 # - not required to build (unless testing contract search)
 NEXT_PUBLIC_TYPESENSE_CONTRACT_API_KEY=
 
-# posthog API key
-# - not required for prod/staging
-NEXT_PUBLIC_POSTHOG_API_KEY="ignored"
-
 # Stripe Customer portal
 NEXT_PUBLIC_STRIPE_KEY=
 
@@ -108,4 +104,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/dashboard.client.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable no-restricted-syntax */
+"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(accountId?: string) {
+  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,
+        loaded: (instance) => {
+          // identify the user if we have an account id
+          if (accountId) {
+            instance.identify(accountId);
+          }
+        },
+      },
+      "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 }) {
+  useEffect(() => {
+    init();
+  }, []);
+
+  useEffect(() => {
+    if (props.accountId) {
+      identifyUser(props.accountId);
+    }
+  }, [props.accountId]);
+  return null;
+}
+
+export function TeamIdentifier(props: { teamId: string }) {
+  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,12 +1,12 @@
 "use client";
 
+import * as analytics from "@/analytics/dashboard.client";
 import { Button } from "@/components/ui/button";
 import { useStore } from "@/lib/reactive";
 import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
 import { LazyConfigureNetworkModal } from "components/configure-networks/LazyConfigureNetworkModal";
 import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
-import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useTheme } from "next-themes";
 import Image from "next/image";
@@ -156,6 +156,7 @@ export const CustomConnectWallet = (props: {
         onDisconnect={async () => {
           try {
             await doLogout();
+            analytics.reset();
           } catch (err) {
             console.error("Failed to log out", err);
           }
@@ -259,18 +260,16 @@ function ConnectWalletWelcomeScreen(props: {
         </div>
       </div>
 
-      <TrackedAnchorLink
+      <Link
         className="text-center font-semibold opacity-70 hover:no-underline hover:opacity-100"
         target="_blank"
-        category="custom-connect-wallet"
-        label="new-to-wallets"
         href="https://blog.thirdweb.com/web3-wallet/"
         style={{
           color: fontColor,
         }}
       >
         New to Wallets?
-      </TrackedAnchorLink>
+      </Link>
     </div>
   );
 }
@@ -303,36 +302,3 @@ export function useCustomConnectModal() {
     [connect, theme],
   );
 }
-
-/**
- * A link component extends the `Link` component and adds tracking.
- */
-function TrackedAnchorLink(props: {
-  category: string;
-  label?: string;
-  trackingProps?: Record<string, string>;
-  href: string;
-  target?: string;
-  children: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-}) {
-  const trackEvent = useTrack();
-  const { category, label, trackingProps } = props;
-
-  const onClick = useCallback(() => {
-    trackEvent({ category, action: "click", label, ...trackingProps });
-  }, [trackEvent, category, label, trackingProps]);
-
-  return (
-    <Link
-      onClick={onClick}
-      target={props.target}
-      href={props.href}
-      className={props.className}
-      style={props.style}
-    >
-      {props.children}
-    </Link>
-  );
-}

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/dashboard.client";
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
@@ -35,6 +36,7 @@ export function AccountHeader(props: {
   const logout = useCallback(async () => {
     try {
       await doLogout();
+      analytics.reset();
       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/dashboard.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebClient } from "thirdweb";
@@ -46,6 +47,7 @@ export function AccountSettingsPage(props: {
           }}
           onAccountDeleted={async () => {
             await doLogout();
+            analytics.reset();
             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/dashboard.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>
   );
 }