feat(webapp): make the PostHog host configurable for self-hosters

Add POSTHOG_HOST (default https://eu.posthog.com), used for the browser toolbar ui_host (threaded through the root loader) and the posthog-node server client. Self-hosters on a US project can now point analytics at us.posthog.com; the EU default keeps existing behaviour unchanged.

Author: D-K-P

apps/webapp/app/env.server.ts

@@ -201,6 +201,10 @@ const EnvironmentSchema = z
     // fans out to the ingest vs assets host by path.
     POSTHOG_INGEST_HOST: z.string().default("eu.i.posthog.com"),
     POSTHOG_ASSETS_HOST: z.string().default("eu-assets.i.posthog.com"),
+    // PostHog app host, used for the browser toolbar (ui_host) and the server
+    // client. Set to https://us.posthog.com for a US project (also switch the
+    // ingest/assets hosts to their us.i / us-assets equivalents).
+    POSTHOG_HOST: z.string().default("https://eu.posthog.com"),
     TRIGGER_TELEMETRY_DISABLED: z.string().optional(),
     AUTH_GITHUB_CLIENT_ID: z.string().optional(),
     AUTH_GITHUB_CLIENT_SECRET: z.string().optional(),

apps/webapp/app/hooks/usePostHog.ts

@@ -5,7 +5,12 @@ import { useOrganizationChanged } from "./useOrganizations";
 import { useOptionalUser, useUserChanged } from "./useUser";
 import { useProjectChanged } from "./useProject";
 
-export const usePostHog = (apiKey?: string, logging = false, debug = false): void => {
+export const usePostHog = (
+  apiKey?: string,
+  uiHost?: string,
+  logging = false,
+  debug = false
+): void => {
   const postHogInitialized = useRef(false);
   const location = useLocation();
   const user = useOptionalUser();
@@ -20,7 +25,7 @@ export const usePostHog = (apiKey?: string, logging = false, debug = false): voi
       // PostHog Cloud EU server-side.
       api_host: "/ph",
       // Point the toolbar at the real PostHog UI; without it, it falls back to /ph.
-      ui_host: "https://eu.posthog.com",
+      ui_host: uiHost,
       cross_subdomain_cookie: true,
       opt_in_site_apps: true,
       debug,
@@ -33,7 +38,7 @@ export const usePostHog = (apiKey?: string, logging = false, debug = false): voi
       },
     });
     postHogInitialized.current = true;
-  }, [apiKey, logging, user]);
+  }, [apiKey, uiHost, logging, user]);
 
   useUserChanged((user) => {
     if (postHogInitialized.current === false) return;

apps/webapp/app/root.tsx

@@ -51,6 +51,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const session = await getSession(request.headers.get("cookie"));
   const toastMessage = session.get("toastMessage") as ToastMessage;
   const posthogProjectKey = env.POSTHOG_PROJECT_KEY;
+  const posthogUiHost = env.POSTHOG_HOST;
   const features = featuresForRequest(request);
   const timezone = await getTimezonePreference(request);
 
@@ -68,6 +69,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       user,
       toastMessage,
       posthogProjectKey,
+      posthogUiHost,
       features,
       appEnv: env.APP_ENV,
       appOrigin: env.APP_ORIGIN,
@@ -116,8 +118,8 @@ export function ErrorBoundary() {
 }
 
 export default function App() {
-  const { posthogProjectKey, kapa: _kapa } = useTypedLoaderData<typeof loader>();
-  usePostHog(posthogProjectKey);
+  const { posthogProjectKey, posthogUiHost, kapa: _kapa } = useTypedLoaderData<typeof loader>();
+  usePostHog(posthogProjectKey, posthogUiHost);
 
   return (
     <>

apps/webapp/app/services/telemetry.server.ts

@@ -22,7 +22,7 @@ class Telemetry {
     }
 
     if (postHogApiKey) {
-      this.#posthogClient = new PostHog(postHogApiKey, { host: "https://eu.posthog.com" });
+      this.#posthogClient = new PostHog(postHogApiKey, { host: env.POSTHOG_HOST });
     } else {
       console.log("No PostHog API key, so analytics won't track");
     }