posthog migration: part 1 (#7363)

# Migrate to PostHog US Instance

This PR updates our PostHog integration across all apps to use the US-based PostHog instance instead of the previous self-hosted solution. Key changes include:

- Upgraded PostHog JS SDK from 1.67.1 to 1.252.0
- Added API proxying via Next.js rewrites to route PostHog requests through `/_ph` endpoints
- Implemented a new initialization approach using `instrumentation-client.ts` files
- Removed custom PostHog components and providers in favor of the official SDK's auto-capture functionality
- Configured PostHog to capture page views on history changes automatically
- Disabled session recording and exception capturing for privacy and performance
- Removed the `flat` dependency which is no longer needed

These changes will provide more reliable analytics while improving performance by using PostHog's official CDN and modern SDK features.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added support for proxying analytics-related requests to external services across multiple apps, enabling seamless integration with analytics providers.

- **Chores**
  - Upgraded the analytics library dependency to the latest version in several apps.
  - Updated environment variable examples to support new analytics configuration.

- **Refactor**
  - Replaced in-app analytics instrumentation with new centralized clients for improved control and consistency.

- **Bug Fixes**
  - Minor CSS z-index syntax adjustments for improved styling consistency.

- **Removed**
  - Eliminated legacy analytics components and tracking from layouts, providers, hooks, and feedback forms, simplifying application structure and reducing external tracking.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on the removal of several `Posthog` components and their related files across multiple applications, as well as updating the `posthog-js` library version to `1.252.0`. It also introduces new `rewrites` in various configuration files to accommodate the updated tracking.

### Detailed summary
- Deleted files related to `Posthog` from:
  - `apps/portal/src/lib/env.ts`
  - `apps/portal/src/lib/posthog/Posthog.tsx`
  - `apps/dashboard/src/lib/posthog/Posthog.tsx`
  - `apps/playground-web/src/lib/posthog/Posthog.tsx`
  - `apps/dashboard/src/components/wallets/PosthogIdentifier.tsx`
- Updated `posthog-js` version to `1.252.0` in:
  - `apps/nebula/package.json`
  - `apps/playground-web/package.json`
  - `apps/portal/package.json`
  - `apps/dashboard/package.json`
- Added `NEXT_PUBLIC_POSTHOG_KEY` and `NEXT_PUBLIC_POSTHOG_HOST` to `apps/nebula/.env.example`.
- Introduced new `rewrites` in `next.config.mjs` for `apps/playground-web`, `apps/dashboard`, `apps/nebula`, and `apps/portal` to direct traffic for `Posthog`.
- Removed `Posthog` components from various layouts and providers, simplifying the structure in `apps/dashboard/src/app/pay/components/client/Providers.client.tsx` and `apps/dashboard/src/app/bridge/components/client/Providers.client.tsx`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: jnsdls

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",

apps/dashboard/package.json

@@ -62,7 +62,6 @@
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
     "fast-xml-parser": "^5.2.5",
-    "flat": "^6.0.1",
     "framer-motion": "12.17.0",
     "fuse.js": "7.1.0",
     "input-otp": "^1.4.1",
@@ -77,7 +76,7 @@
     "p-limit": "^6.2.0",
     "papaparse": "^5.5.3",
     "pluralize": "^8.0.0",
-    "posthog-js": "1.67.1",
+    "posthog-js": "1.252.0",
     "prettier": "3.5.3",
     "qrcode": "^1.5.3",
     "react": "19.1.0",

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,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 />
+        <NextTopLoader
+          color="hsl(var(--foreground))"
+          height={3}
+          shadow={false}
+          showSpinner={false}
+        />
+      </body>
     </html>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx

@@ -1,5 +1,4 @@
 import { getTeamBySlug, hasToCompleteTeamOnboarding } from "@/api/team";
-import { PosthogIdentifierServer } from "components/wallets/PosthogIdentifierServer";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import { getAuthToken } from "../../api/lib/getAuthToken";
@@ -60,9 +59,6 @@ export default async function RootTeamLayout(props: {
       <Suspense fallback={null}>
         <EnsureValidConnectedWalletLoginServer />
       </Suspense>
-      <Suspense fallback={null}>
-        <PosthogIdentifierServer />
-      </Suspense>
     </div>
   );
 }

apps/dashboard/src/app/bridge/components/client/Providers.client.tsx

@@ -2,8 +2,6 @@
 import { ThemeProvider } from "next-themes";
 import { Toaster } from "sonner";
 import { ThirdwebProvider } from "thirdweb/react";
-import { PHProvider } from "../../../../lib/posthog/Posthog";
-import { PostHogPageView } from "../../../../lib/posthog/PosthogPageView";
 
 export function BridgeProviders({ children }: { children: React.ReactNode }) {
   return (
@@ -14,11 +12,8 @@ export function BridgeProviders({ children }: { children: React.ReactNode }) {
         enableSystem={false}
         defaultTheme="dark"
       >
-        <PHProvider disable_session_recording={true}>
-          <PostHogPageView />
-          {children}
-          <Toaster richColors theme="dark" />
-        </PHProvider>
+        {children}
+        <Toaster richColors theme="dark" />
       </ThemeProvider>
     </ThirdwebProvider>
   );

apps/dashboard/src/app/pay/components/client/Providers.client.tsx

@@ -1,17 +1,12 @@
 "use client";
 import { Toaster } from "sonner";
 import { ThirdwebProvider } from "thirdweb/react";
-import { PHProvider } from "../../../../lib/posthog/Posthog";
-import { PostHogPageView } from "../../../../lib/posthog/PosthogPageView";
 
 export function PayProviders({ children }: { children: React.ReactNode }) {
   return (
     <ThirdwebProvider>
-      <PHProvider disable_session_recording={true}>
-        <PostHogPageView />
-        {children}
-        <Toaster richColors theme="dark" />
-      </PHProvider>
+      {children}
+      <Toaster richColors theme="dark" />
     </ThirdwebProvider>
   );
 }

apps/dashboard/src/components/wallets/PosthogIdentifier.tsx

@@ -1,5 +1,3 @@
-import { flatten } from "flat";
-import { usePostHog } from "posthog-js/react";
 import { useCallback } from "react";
 
 export type TrackingParams = {
@@ -9,37 +7,15 @@ export type TrackingParams = {
   // biome-ignore lint/suspicious/noExplicitAny: FIXME
   [key: string]: any;
 };
-
+// TODO: remove this hook entirely
 export function useTrack() {
-  const posthog = usePostHog();
-  return useCallback(
-    (trackingData: TrackingParams) => {
-      const { category, action, label, ...restData } = trackingData;
-      const catActLab = label
-        ? `${category}.${action}.${label}`
-        : `${category}.${action}`;
-      if (process.env.NODE_ENV !== "production") {
-        console.debug(`[PH.capture]:${catActLab}`, restData);
-      }
-
-      const restDataSafe = Object.fromEntries(
-        Object.entries(restData).map(([key, value]) => {
-          if (value instanceof Error) {
-            return [
-              key,
-              { message: value.message, stack: value.stack?.toString() },
-            ];
-          }
-          return [key, value];
-        }),
-      );
-
-      try {
-        posthog?.capture(catActLab, flatten(restDataSafe));
-      } catch {
-        // ignore - we just don't want to trigger an error in the app if posthog fails
-      }
-    },
-    [posthog],
-  );
+  return useCallback((trackingData: TrackingParams) => {
+    const { category, action, label, ...restData } = trackingData;
+    const catActLab = label
+      ? `${category}.${action}.${label}`
+      : `${category}.${action}`;
+    if (process.env.NODE_ENV !== "production") {
+      console.debug(`[PH.capture]:${catActLab}`, restData);
+    }
+  }, []);
 }

apps/dashboard/src/components/wallets/PosthogIdentifierServer.tsx

@@ -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",
+  });
+}