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/instrumentation-client.ts

@@ -0,0 +1,17 @@
+import posthog from "posthog-js";
+
+const NEXT_PUBLIC_POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+
+if (NEXT_PUBLIC_POSTHOG_KEY) {
+  posthog.init(NEXT_PUBLIC_POSTHOG_KEY, {
+    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",
+  });
+}

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,56 @@
+"use client";
+
+import posthog from "posthog-js";
+import { useEffect } from "react";
+import type { Account } from "../../@3rdweb-sdk/react/hooks/useApi";
+
+const warnedMessages = new Set<string>();
+function warnOnce(message: string) {
+  if (warnedMessages.has(message)) {
+    return;
+  }
+  warnedMessages.add(message);
+  console.warn(message);
+}
+
+export function AccountIdentifier(props: {
+  account: Pick<Account, "id" | "email">;
+}) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!posthog.__loaded) {
+      warnOnce(
+        "[DASHBOARD_ANALYTICS] is not initialized, cannot identify user",
+      );
+      return;
+    }
+    posthog.identify(props.account.id, {
+      ...(props.account.email ? { email: props.account.email } : {}),
+    });
+  }, [props.account.id, props.account.email]);
+  return null;
+}
+
+export function TeamIdentifier(props: {
+  teamId: string;
+}) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!posthog.__loaded) {
+      warnOnce(
+        "[DASHBOARD_ANALYTICS] is not initialized, cannot identify team",
+      );
+      return;
+    }
+    posthog.group("team", props.teamId);
+  }, [props.teamId]);
+  return null;
+}
+
+export function reset() {
+  if (!posthog.__loaded) {
+    warnOnce("[DASHBOARD_ANALYTICS] is not initialized, cannot reset");
+    return;
+  }
+  posthog.reset();
+}

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,8 @@
 "use client";
 
 import { createTeam } from "@/actions/createTeam";
+import * as analytics from "@/analytics/dashboard.client";
+import { AccountIdentifier } from "@/analytics/dashboard.client";
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
@@ -35,6 +37,7 @@ export function AccountHeader(props: {
   const logout = useCallback(async () => {
     try {
       await doLogout();
+      analytics.reset();
       if (wallet) {
         disconnect(wallet);
       }
@@ -77,6 +80,7 @@ export function AccountHeader(props: {
 
   return (
     <div>
+      <AccountIdentifier account={props.account} />
       <AccountHeaderDesktopUI {...headerProps} className="max-lg:hidden" />
       <AccountHeaderMobileUI {...headerProps} className="lg:hidden" />
 

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,9 +1,6 @@
 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 type { Metadata } from "next";
 import PlausibleProvider from "next-plausible";
 import { Inter } from "next/font/google";
@@ -61,26 +58,19 @@ 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 />
+        <NextTopLoader
+          color="hsl(var(--foreground))"
+          height={3}
+          shadow={false}
+          showSpinner={false}
+        />
+      </body>
     </html>
   );
 }