thirdweb-dev · graphite-app · Mar 31, 2025 · Mar 31, 2025
@@ -8,8 +8,10 @@ import NextTopLoader from "nextjs-toploader";
 import { Suspense } from "react";
 import { OpCreditsGrantedModalWrapperServer } from "../components/onboarding/OpCreditsGrantedModalWrapperServer";
 import { PosthogIdentifierServer } from "../components/wallets/PosthogIdentifierServer";
+import { PHProvider } from "../lib/posthog/Posthog";
+import { PosthogHeadSetup } from "../lib/posthog/PosthogHeadSetup";
+import { PostHogPageView } from "../lib/posthog/PosthogPageView";
 import { EnsureValidConnectedWalletLoginServer } from "./components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
-import { PostHogProvider } from "./components/root-providers";
 import { AppRouterProviders } from "./providers";
 
 const fontSans = Inter({
@@ -63,8 +65,10 @@ export default function RootLayout({
           customDomain="https://pl.thirdweb.com"
           selfHosted
         />
+        <PosthogHeadSetup />
       </head>
-      <PostHogProvider>
+      <PHProvider>
+        <PostHogPageView />
         <body
           className={cn(
             "bg-background font-sans antialiased",
@@ -91,7 +95,7 @@ export default function RootLayout({
             showSpinner={false}
           />
         </body>
-      </PostHogProvider>
+      </PHProvider>
     </html>
   );
 }
@@ -1,7 +1,7 @@
 "use client";
 
 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import { useEffect } from "react";
 import {
   useActiveAccount,
@@ -32,48 +32,49 @@ export const PosthogIdentifierClient: React.FC<{
     client,
   });
   const wallet = useActiveWallet();
+  const posthog = usePostHog();
 
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (wallet) {
+    if (wallet && posthog && posthog.__loaded) {
       const connector = walletIdToPHName[wallet.id] || wallet.id;
       posthog.register({ connector });
       posthog.capture("wallet_connected", { connector });
     }
-  }, [wallet]);
+  }, [wallet, posthog]);
 
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (accountAddress) {
+    if (accountAddress && posthog && posthog.__loaded) {
       posthog.identify(accountAddress);
     }
-  }, [accountAddress]);
+  }, [accountAddress, posthog]);
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (accountId) {
+    if (accountId && posthog && posthog.__loaded) {
       posthog.identify(accountId);
     }
-  }, [accountId]);
+  }, [accountId, posthog]);
 
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (chain?.id) {
+    if (chain?.id && posthog && posthog.__loaded) {
       posthog.unregister("network");
       posthog.register({ chain_id: chain?.id, ecosystem: "evm" });
     }
-  }, [chain?.id]);
+  }, [chain?.id, posthog]);
 
   // legitimate use-case
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (balance?.data?.displayValue) {
+    if (balance?.data?.displayValue && posthog && posthog.__loaded) {
       posthog.register({ balance: balance.data.displayValue });
     }
-  }, [balance]);
+  }, [balance, posthog]);
 
   return null;
 };
@@ -0,0 +1,28 @@
+"use client";
+
+import { isProd } from "@/constants/env";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { useEffect } from "react";
+
+const NEXT_PUBLIC_POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
+
+export function PHProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (NEXT_PUBLIC_POSTHOG_API_KEY && isProd) {
+      posthog.init(NEXT_PUBLIC_POSTHOG_API_KEY, {
+        api_host: "https://a.thirdweb.com",
+        capture_pageview: false,
+        debug: false,
+        disable_session_recording: true,
+      });
+    }
+  }, []);
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
@@ -0,0 +1,10 @@
+const posthogHost = "https://a.thirdweb.com";
+
+export function PosthogHeadSetup() {
+  return (
+    <>
+      <link rel="preconnect" href={posthogHost} />
+      <link rel="dns-prefetch" href={posthogHost} />
+    </>
+  );
+}
@@ -0,0 +1,34 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { usePostHog } from "posthog-js/react";
+import { Suspense, useEffect } from "react";
+
+function PostHogPageViewInner() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const posthog = usePostHog();
+
+  // eslint-disable-next-line no-restricted-syntax
+  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;
+}
+
+export function PostHogPageView() {
+  return (
+    <Suspense fallback={null}>
+      <PostHogPageViewInner />
+    </Suspense>
+  );
+}
@@ -6,7 +6,7 @@ const ContentSecurityPolicy = `
   style-src 'self' 'unsafe-inline';
   font-src 'self';
   frame-src * data:;
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com;
   connect-src * data: blob:;
   worker-src 'self' blob:;
   block-all-mixed-content;

@@ -41,6 +41,7 @@
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
     "openapi-types": "^12.1.3",
+    "posthog-js": "1.67.1",
     "prettier": "3.5.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",

@@ -7,6 +7,9 @@ import { AppSidebar } from "./AppSidebar";
 import { Providers } from "./providers";
 import "./globals.css";
 import NextTopLoader from "nextjs-toploader";
+import { PHProvider } from "../lib/posthog/Posthog";
+import { PosthogHeadSetup } from "../lib/posthog/PosthogHeadSetup";
+import { PostHogPageView } from "../lib/posthog/PosthogPageView";
 import { MobileHeader } from "./MobileHeader";
 import { getSidebarLinks } from "./navLinks";
 
@@ -43,31 +46,35 @@ export default async function RootLayout({
           data-domain="playground.thirdweb.com"
           data-api="https://pl.thirdweb.com/api/event"
         />
+        <PosthogHeadSetup />
       </head>
 
-      <body
-        className={cn(
-          "bg-background font-sans antialiased ",
-          sansFont.variable,
-          monoFont.variable,
-        )}
-      >
-        <NextTopLoader
-          color="hsl(var(--foreground))"
-          height={2}
-          shadow={false}
-          showSpinner={false}
-        />
-        <MobileHeader links={sidebarLinks} />
-        <div className="flex flex-col lg:h-dvh lg:flex-row">
-          <AppSidebar links={sidebarLinks} />
-          <div className="flex grow flex-col lg:overflow-auto">
-            <div className="container relative grow px-4 md:px-6">
-              <Providers>{children}</Providers>
+      <PHProvider>
+        <PostHogPageView />
+        <body
+          className={cn(
+            "bg-background font-sans antialiased ",
+            sansFont.variable,
+            monoFont.variable,
+          )}
+        >
+          <NextTopLoader
+            color="hsl(var(--foreground))"
+            height={2}
+            shadow={false}
+            showSpinner={false}
+          />
+          <MobileHeader links={sidebarLinks} />
+          <div className="flex flex-col lg:h-dvh lg:flex-row">
+            <AppSidebar links={sidebarLinks} />
+            <div className="flex grow flex-col lg:overflow-auto">
+              <div className="container relative grow px-4 md:px-6">
+                <Providers>{children}</Providers>
+              </div>
             </div>
           </div>
-        </div>
-      </body>
+        </body>
+      </PHProvider>
     </html>
   );
 }
@@ -0,0 +1,27 @@
+"use client";
+
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { useEffect } from "react";
+import { isProd } from "../env";
+
+const NEXT_PUBLIC_POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
+
+export function PHProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  useEffect(() => {
+    if (NEXT_PUBLIC_POSTHOG_API_KEY && isProd) {
+      posthog.init(NEXT_PUBLIC_POSTHOG_API_KEY, {
+        api_host: "https://a.thirdweb.com",
+        capture_pageview: false,
+        debug: false,
+        disable_session_recording: true,
+      });
+    }
+  }, []);
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
@@ -0,0 +1,10 @@
+const posthogHost = "https://a.thirdweb.com";
+
+export function PosthogHeadSetup() {
+  return (
+    <>
+      <link rel="preconnect" href={posthogHost} />
+      <link rel="dns-prefetch" href={posthogHost} />
+    </>
+  );
+}
@@ -0,0 +1,33 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { usePostHog } from "posthog-js/react";
+import { Suspense, useEffect } from "react";
+
+function PostHogPageViewInner() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const posthog = usePostHog();
+
+  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;
+}
+
+export function PostHogPageView() {
+  return (
+    <Suspense fallback={null}>
+      <PostHogPageViewInner />
+    </Suspense>
+  );
+}