From 6b24fed21f4ec0f97ce9f2a7b20888104d5857cf Mon Sep 17 00:00:00 2001 From: jnsdls Date: Thu, 19 Jun 2025 00:53:57 +0000 Subject: [PATCH] posthog migration: part 1 (#7363) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 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. ## 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. --- ## 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}` --- apps/dashboard/next.config.ts | 12 ++ apps/dashboard/package.json | 3 +- apps/dashboard/src/app/(app)/layout.tsx | 35 ++---- .../src/app/(app)/team/[team_slug]/layout.tsx | 4 - .../components/client/Providers.client.tsx | 9 +- .../components/client/Providers.client.tsx | 9 +- .../components/wallets/PosthogIdentifier.tsx | 81 ------------- .../wallets/PosthogIdentifierServer.tsx | 17 --- .../dashboard/src/hooks/analytics/useTrack.ts | 44 ++----- apps/dashboard/src/instrumentation-client.ts | 17 +++ apps/dashboard/src/lib/posthog/Posthog.tsx | 27 ----- .../src/lib/posthog/PosthogHeadSetup.tsx | 10 -- .../src/lib/posthog/PosthogPageView.tsx | 34 ------ apps/dashboard/src/utils/errorParser.tsx | 2 - apps/nebula/.env.example | 2 + apps/nebula/next.config.ts | 16 +++ apps/nebula/package.json | 1 + apps/nebula/src/instrumentation-client.ts | 17 +++ apps/playground-web/next.config.mjs | 16 +++ apps/playground-web/package.json | 2 +- apps/playground-web/src/app/layout.tsx | 49 ++++---- .../src/instrumentation-client.ts | 17 +++ .../src/lib/posthog/Posthog.tsx | 27 ----- .../src/lib/posthog/PosthogHeadSetup.tsx | 10 -- .../src/lib/posthog/PosthogPageView.tsx | 33 ----- apps/portal/next.config.mjs | 16 +++ apps/portal/package.json | 2 +- apps/portal/src/app/Header.tsx | 2 +- apps/portal/src/app/layout.tsx | 67 +++++----- .../portal/src/components/code/RenderCode.tsx | 2 +- .../portal/src/components/others/Feedback.tsx | 18 +-- apps/portal/src/instrumentation-client.ts | 17 +++ apps/portal/src/lib/env.ts | 3 - apps/portal/src/lib/posthog/Posthog.tsx | 27 ----- .../src/lib/posthog/PosthogHeadSetup.tsx | 10 -- .../src/lib/posthog/PosthogPageView.tsx | 33 ----- apps/wallet-ui/next.config.mjs | 16 +++ pnpm-lock.yaml | 114 +++++++++--------- 38 files changed, 287 insertions(+), 534 deletions(-) delete mode 100644 apps/dashboard/src/components/wallets/PosthogIdentifier.tsx delete mode 100644 apps/dashboard/src/components/wallets/PosthogIdentifierServer.tsx create mode 100644 apps/dashboard/src/instrumentation-client.ts delete mode 100644 apps/dashboard/src/lib/posthog/Posthog.tsx delete mode 100644 apps/dashboard/src/lib/posthog/PosthogHeadSetup.tsx delete mode 100644 apps/dashboard/src/lib/posthog/PosthogPageView.tsx create mode 100644 apps/nebula/src/instrumentation-client.ts create mode 100644 apps/playground-web/src/instrumentation-client.ts delete mode 100644 apps/playground-web/src/lib/posthog/Posthog.tsx delete mode 100644 apps/playground-web/src/lib/posthog/PosthogHeadSetup.tsx delete mode 100644 apps/playground-web/src/lib/posthog/PosthogPageView.tsx create mode 100644 apps/portal/src/instrumentation-client.ts delete mode 100644 apps/portal/src/lib/env.ts delete mode 100644 apps/portal/src/lib/posthog/Posthog.tsx delete mode 100644 apps/portal/src/lib/posthog/PosthogHeadSetup.tsx delete mode 100644 apps/portal/src/lib/posthog/PosthogPageView.tsx diff --git a/apps/dashboard/next.config.ts b/apps/dashboard/next.config.ts index cb495b753be..cdf880e3d9f 100644 --- a/apps/dashboard/next.config.ts +++ b/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", diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json index 6cbd148d935..d653afc294c 100644 --- a/apps/dashboard/package.json +++ b/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", diff --git a/apps/dashboard/src/app/(app)/layout.tsx b/apps/dashboard/src/app/(app)/layout.tsx index 179030a7dbe..5382bf4fc9d 100644 --- a/apps/dashboard/src/app/(app)/layout.tsx +++ b/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 /> - - - - - {children} - - - - + + + {children} + + + ); } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx index 03597e31b1f..1f7e29ca9b0 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx +++ b/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: { - - - ); } diff --git a/apps/dashboard/src/app/bridge/components/client/Providers.client.tsx b/apps/dashboard/src/app/bridge/components/client/Providers.client.tsx index 51a71506333..8afb600ba23 100644 --- a/apps/dashboard/src/app/bridge/components/client/Providers.client.tsx +++ b/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" > - - - {children} - - + {children} + ); diff --git a/apps/dashboard/src/app/pay/components/client/Providers.client.tsx b/apps/dashboard/src/app/pay/components/client/Providers.client.tsx index 91fe381f354..a09aad583f4 100644 --- a/apps/dashboard/src/app/pay/components/client/Providers.client.tsx +++ b/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 ( - - - {children} - - + {children} + ); } diff --git a/apps/dashboard/src/components/wallets/PosthogIdentifier.tsx b/apps/dashboard/src/components/wallets/PosthogIdentifier.tsx deleted file mode 100644 index ce52396e107..00000000000 --- a/apps/dashboard/src/components/wallets/PosthogIdentifier.tsx +++ /dev/null @@ -1,81 +0,0 @@ -"use client"; - -import { getClientThirdwebClient } from "@/constants/thirdweb-client.client"; -import { usePostHog } from "posthog-js/react"; -import { useEffect } from "react"; -import { - useActiveAccount, - useActiveWallet, - useActiveWalletChain, - useWalletBalance, -} from "thirdweb/react"; - -const walletIdToPHName: Record = { - metamask: "metamask", - walletConnectV1: "WalletConnect", - walletConnectV2: "WalletConnect", - "paper-wallet": "Paper Wallet", - coinbaseWallet: "Coinbase Wallet", - injected: "Injected", -}; - -const client = getClientThirdwebClient(); - -export const PosthogIdentifierClient: React.FC<{ - accountId: string | undefined; - accountAddress: string | undefined; -}> = ({ accountId, accountAddress }) => { - const account = useActiveAccount(); - const chain = useActiveWalletChain(); - const balance = useWalletBalance({ - address: account?.address, - chain, - client, - }); - const wallet = useActiveWallet(); - const posthog = usePostHog(); - - // legitimate use-case - // eslint-disable-next-line no-restricted-syntax - useEffect(() => { - if (wallet && posthog && posthog.__loaded) { - const connector = walletIdToPHName[wallet.id] || wallet.id; - posthog.register({ connector }); - posthog.capture("wallet_connected", { connector }); - } - }, [wallet, posthog]); - - // legitimate use-case - // eslint-disable-next-line no-restricted-syntax - useEffect(() => { - if (accountAddress && posthog && posthog.__loaded) { - posthog.identify(accountAddress); - } - }, [accountAddress, posthog]); - - // eslint-disable-next-line no-restricted-syntax - useEffect(() => { - if (accountId && posthog && posthog.__loaded) { - posthog.identify(accountId); - } - }, [accountId, posthog]); - - // legitimate use-case - // eslint-disable-next-line no-restricted-syntax - useEffect(() => { - if (chain?.id && posthog && posthog.__loaded) { - posthog.unregister("network"); - posthog.register({ chain_id: chain?.id, ecosystem: "evm" }); - } - }, [chain?.id, posthog]); - - // legitimate use-case - // eslint-disable-next-line no-restricted-syntax - useEffect(() => { - if (balance?.data?.displayValue && posthog && posthog.__loaded) { - posthog.register({ balance: balance.data.displayValue }); - } - }, [balance, posthog]); - - return null; -}; diff --git a/apps/dashboard/src/components/wallets/PosthogIdentifierServer.tsx b/apps/dashboard/src/components/wallets/PosthogIdentifierServer.tsx deleted file mode 100644 index 13ce341dd0d..00000000000 --- a/apps/dashboard/src/components/wallets/PosthogIdentifierServer.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { getRawAccount } from "../../app/(app)/account/settings/getAccount"; -import { getAuthTokenWalletAddress } from "../../app/(app)/api/lib/getAuthToken"; -import { PosthogIdentifierClient } from "./PosthogIdentifier"; - -export async function PosthogIdentifierServer() { - const [account, accountAddress] = await Promise.all([ - getRawAccount(), - getAuthTokenWalletAddress(), - ]); - - return ( - - ); -} diff --git a/apps/dashboard/src/hooks/analytics/useTrack.ts b/apps/dashboard/src/hooks/analytics/useTrack.ts index a3fbef23638..df27259eb54 100644 --- a/apps/dashboard/src/hooks/analytics/useTrack.ts +++ b/apps/dashboard/src/hooks/analytics/useTrack.ts @@ -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); + } + }, []); } diff --git a/apps/dashboard/src/instrumentation-client.ts b/apps/dashboard/src/instrumentation-client.ts new file mode 100644 index 00000000000..fd21d85797c --- /dev/null +++ b/apps/dashboard/src/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", + }); +} diff --git a/apps/dashboard/src/lib/posthog/Posthog.tsx b/apps/dashboard/src/lib/posthog/Posthog.tsx deleted file mode 100644 index 3850de96679..00000000000 --- a/apps/dashboard/src/lib/posthog/Posthog.tsx +++ /dev/null @@ -1,27 +0,0 @@ -"use client"; - -import { isProd } from "@/constants/env-utils"; -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(props: { - children: React.ReactNode; - disable_session_recording: boolean; -}) { - // 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: props.disable_session_recording, - }); - } - }, [props.disable_session_recording]); - - return {props.children}; -} diff --git a/apps/dashboard/src/lib/posthog/PosthogHeadSetup.tsx b/apps/dashboard/src/lib/posthog/PosthogHeadSetup.tsx deleted file mode 100644 index 60b949c0f5b..00000000000 --- a/apps/dashboard/src/lib/posthog/PosthogHeadSetup.tsx +++ /dev/null @@ -1,10 +0,0 @@ -const posthogHost = "https://a.thirdweb.com"; - -export function PosthogHeadSetup() { - return ( - <> - - - - ); -} diff --git a/apps/dashboard/src/lib/posthog/PosthogPageView.tsx b/apps/dashboard/src/lib/posthog/PosthogPageView.tsx deleted file mode 100644 index d6f3d063b70..00000000000 --- a/apps/dashboard/src/lib/posthog/PosthogPageView.tsx +++ /dev/null @@ -1,34 +0,0 @@ -"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 ( - - - - ); -} diff --git a/apps/dashboard/src/utils/errorParser.tsx b/apps/dashboard/src/utils/errorParser.tsx index d737fba7e8f..8d62b283274 100644 --- a/apps/dashboard/src/utils/errorParser.tsx +++ b/apps/dashboard/src/utils/errorParser.tsx @@ -1,5 +1,4 @@ import Link from "next/link"; -import posthog from "posthog-js"; import type { JSX } from "react"; @@ -63,7 +62,6 @@ export function parseError(error: unknown): string | JSX.Element { // everything that falls through here should be logged and sent to posthog console.error("unknown error", error); - posthog.capture("unknown_error", { error }); // worst case scenario send a generic error message back return UNKNOWN_ERROR_MESSAGE; } diff --git a/apps/nebula/.env.example b/apps/nebula/.env.example index 09b24feff90..24d01ab32f9 100644 --- a/apps/nebula/.env.example +++ b/apps/nebula/.env.example @@ -1,2 +1,4 @@ NEXT_PUBLIC_IPFS_GATEWAY_URL="https://{clientId}.thirdwebstorage-dev.com/ipfs/{cid}/{path}" NEXT_PUBLIC_NEBULA_URL="https://nebula-api.thirdweb-dev.com" +NEXT_PUBLIC_POSTHOG_KEY="" # get this from the posthog dev project for local development +NEXT_PUBLIC_POSTHOG_HOST="https://us.i.posthog.com" diff --git a/apps/nebula/next.config.ts b/apps/nebula/next.config.ts index 320093bb080..9b584afef83 100644 --- a/apps/nebula/next.config.ts +++ b/apps/nebula/next.config.ts @@ -49,6 +49,22 @@ const baseNextConfig: NextConfig = { taint: true, }, serverExternalPackages: ["pino-pretty"], + 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", + }, + ]; + }, async headers() { return [ { diff --git a/apps/nebula/package.json b/apps/nebula/package.json index c0e18ab21f7..0ccc9cf202c 100644 --- a/apps/nebula/package.json +++ b/apps/nebula/package.json @@ -41,6 +41,7 @@ "next": "15.3.3", "next-themes": "^0.4.6", "nextjs-toploader": "^1.6.12", + "posthog-js": "1.252.0", "prettier": "3.5.3", "react": "19.1.0", "react-children-utilities": "^2.10.0", diff --git a/apps/nebula/src/instrumentation-client.ts b/apps/nebula/src/instrumentation-client.ts new file mode 100644 index 00000000000..fd21d85797c --- /dev/null +++ b/apps/nebula/src/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", + }); +} diff --git a/apps/playground-web/next.config.mjs b/apps/playground-web/next.config.mjs index d0f19b52837..47d631a330b 100644 --- a/apps/playground-web/next.config.mjs +++ b/apps/playground-web/next.config.mjs @@ -58,6 +58,22 @@ const nextConfig = { config.externals.push("pino-pretty", "lokijs", "encoding"); return config; }, + 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", + }, + ]; + }, async redirects() { return [ { diff --git a/apps/playground-web/package.json b/apps/playground-web/package.json index d79c5df2b54..dae8fa7e420 100644 --- a/apps/playground-web/package.json +++ b/apps/playground-web/package.json @@ -36,7 +36,7 @@ "next-themes": "^0.4.6", "nextjs-toploader": "^1.6.12", "openapi-types": "^12.1.3", - "posthog-js": "1.67.1", + "posthog-js": "1.252.0", "prettier": "3.5.3", "react": "19.1.0", "react-dom": "19.1.0", diff --git a/apps/playground-web/src/app/layout.tsx b/apps/playground-web/src/app/layout.tsx index 082e2bac1e5..86a7b34e3b1 100644 --- a/apps/playground-web/src/app/layout.tsx +++ b/apps/playground-web/src/app/layout.tsx @@ -7,9 +7,6 @@ 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"; @@ -46,35 +43,31 @@ export default async function RootLayout({ data-domain="playground.thirdweb.com" data-api="https://pl.thirdweb.com/api/event" /> - - - - - - -
- -
-
- {children} -
+ + + +
+ +
+
+ {children}
- - +
+ ); } diff --git a/apps/playground-web/src/instrumentation-client.ts b/apps/playground-web/src/instrumentation-client.ts new file mode 100644 index 00000000000..fd21d85797c --- /dev/null +++ b/apps/playground-web/src/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", + }); +} diff --git a/apps/playground-web/src/lib/posthog/Posthog.tsx b/apps/playground-web/src/lib/posthog/Posthog.tsx deleted file mode 100644 index 6841f0900ba..00000000000 --- a/apps/playground-web/src/lib/posthog/Posthog.tsx +++ /dev/null @@ -1,27 +0,0 @@ -"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 {children}; -} diff --git a/apps/playground-web/src/lib/posthog/PosthogHeadSetup.tsx b/apps/playground-web/src/lib/posthog/PosthogHeadSetup.tsx deleted file mode 100644 index 60b949c0f5b..00000000000 --- a/apps/playground-web/src/lib/posthog/PosthogHeadSetup.tsx +++ /dev/null @@ -1,10 +0,0 @@ -const posthogHost = "https://a.thirdweb.com"; - -export function PosthogHeadSetup() { - return ( - <> - - - - ); -} diff --git a/apps/playground-web/src/lib/posthog/PosthogPageView.tsx b/apps/playground-web/src/lib/posthog/PosthogPageView.tsx deleted file mode 100644 index 37eee83a388..00000000000 --- a/apps/playground-web/src/lib/posthog/PosthogPageView.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"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 ( - - - - ); -} diff --git a/apps/portal/next.config.mjs b/apps/portal/next.config.mjs index e603ee59a30..0c8dd08acb3 100644 --- a/apps/portal/next.config.mjs +++ b/apps/portal/next.config.mjs @@ -58,6 +58,22 @@ const nextConfig = { }, pageExtensions: ["mdx", "tsx", "ts"], redirects, + 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", + }, + ]; + }, webpack: (config) => { config.externals.push("pino-pretty", "lokijs", "encoding"); return config; diff --git a/apps/portal/package.json b/apps/portal/package.json index f58ddd0885e..34df7b8a1a2 100644 --- a/apps/portal/package.json +++ b/apps/portal/package.json @@ -43,7 +43,7 @@ "nextjs-toploader": "^1.6.12", "node-html-markdown": "^1.3.0", "node-html-parser": "^6.1.13", - "posthog-js": "1.67.1", + "posthog-js": "1.252.0", "prettier": "3.5.3", "react": "19.1.0", "react-children-utilities": "^2.10.0", diff --git a/apps/portal/src/app/Header.tsx b/apps/portal/src/app/Header.tsx index 59d75058c77..5f027f1b41e 100644 --- a/apps/portal/src/app/Header.tsx +++ b/apps/portal/src/app/Header.tsx @@ -333,7 +333,7 @@ export function Header() { {/* Mobile menu */} {showBurgerMenu && ( -
+

Products

diff --git a/apps/portal/src/app/layout.tsx b/apps/portal/src/app/layout.tsx index 15943c55928..fcac8e73768 100644 --- a/apps/portal/src/app/layout.tsx +++ b/apps/portal/src/app/layout.tsx @@ -1,6 +1,5 @@ import "./globals.css"; import { createMetadata } from "@/components/Document"; -import { PosthogHeadSetup } from "@/lib/posthog/PosthogHeadSetup"; import { ThemeProvider } from "next-themes"; import { Fira_Code, Inter } from "next/font/google"; import Script from "next/script"; @@ -8,8 +7,6 @@ import NextTopLoader from "nextjs-toploader"; import { StickyTopContainer } from "../components/Document/StickyTopContainer"; import { Banner } from "../components/others/Banner"; import { EnableSmoothScroll } from "../components/others/SmoothScroll"; -import { PHProvider } from "../lib/posthog/Posthog"; -import { PostHogPageView } from "../lib/posthog/PosthogPageView"; import { cn } from "../lib/utils"; import { Header } from "./Header"; @@ -38,7 +35,6 @@ export default function RootLayout({ return ( -