add posthog to cloud app (#447)

* add posthog to cloud app

posthog-js initialised in routes/__root.tsx alongside the existing Sentry
init, wrapped in PostHogProvider, and identified against the WorkOS user +
org in web/auth.tsx. Events route through a /ingest/* reverse proxy on the
same worker so adblockers don't drop them; project key (phc_…) ships as a
public var in wrangler.jsonc.

* fix exhaustive-deps in posthog identify effect

Author: RhysSullivan

apps/cloud/package.json

@@ -63,6 +63,7 @@
     "drizzle-orm": "catalog:",
     "effect": "catalog:",
     "jose": "^5.6.3",
+    "posthog-js": "^1.372.5",
     "postgres": "^3.4.9",
     "react": "catalog:",
     "react-dom": "catalog:",

apps/cloud/src/env-augment.d.ts

@@ -12,6 +12,8 @@ declare global {
       AXIOM_TRACES_SAMPLE_RATIO?: string;
       SENTRY_DSN?: string;
       VITE_PUBLIC_SENTRY_DSN?: string;
+      VITE_PUBLIC_POSTHOG_KEY?: string;
+      VITE_PUBLIC_POSTHOG_HOST?: string;
 
       // Datastore. Prod uses HYPERDRIVE when the binding exists; direct
       // DATABASE_URL is only selected when explicitly requested for local/test.

apps/cloud/src/routes/__root.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import * as Sentry from "@sentry/react";
 import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
 import { AutumnProvider } from "autumn-js/react";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
 import { ExecutorProvider } from "@executor/react/api/provider";
 import { Skeleton } from "@executor/react/components/skeleton";
 import { Toaster } from "@executor/react/components/sonner";
@@ -21,6 +23,15 @@ if (typeof window !== "undefined" && import.meta.env.VITE_PUBLIC_SENTRY_DSN) {
   });
 }
 
+if (typeof window !== "undefined" && import.meta.env.VITE_PUBLIC_POSTHOG_KEY) {
+  posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, {
+    api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST ?? `${window.location.origin}/ingest`,
+    ui_host: "https://us.posthog.com",
+    defaults: "2025-05-24",
+    person_profiles: "identified_only",
+  });
+}
+
 export const Route = createRootRoute({
   head: () => ({
     meta: [
@@ -63,9 +74,11 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 
 function RootComponent() {
   return (
-    <AuthProvider>
-      <AuthGate />
-    </AuthProvider>
+    <PostHogProvider client={posthog}>
+      <AuthProvider>
+        <AuthGate />
+      </AuthProvider>
+    </PostHogProvider>
   );
 }
 

apps/cloud/src/start.ts

@@ -105,6 +105,36 @@ const sentryTunnelMiddleware = createMiddleware({ type: "request" }).server(
   },
 );
 
+// ---------------------------------------------------------------------------
+// PostHog reverse proxy — the browser SDK targets `/ingest/*` (configured in
+// routes/__root.tsx) and we forward to PostHog's ingest + asset hosts. Keeps
+// events flowing past adblockers that match *.posthog.com. See
+// https://posthog.com/docs/advanced/proxy/cloudflare
+// ---------------------------------------------------------------------------
+
+const POSTHOG_INGEST_HOST = "us.i.posthog.com";
+const POSTHOG_ASSETS_HOST = "us-assets.i.posthog.com";
+
+const posthogProxyMiddleware = createMiddleware({ type: "request" }).server(
+  ({ pathname, request, next }) => {
+    if (pathname !== "/ingest" && !pathname.startsWith("/ingest/")) {
+      return next();
+    }
+
+    const url = new URL(request.url);
+    url.hostname = pathname.startsWith("/ingest/static/")
+      ? POSTHOG_ASSETS_HOST
+      : POSTHOG_INGEST_HOST;
+    url.protocol = "https:";
+    url.port = "";
+    url.pathname = pathname.replace(/^\/ingest/, "") || "/";
+
+    const upstream = new Request(url, request);
+    upstream.headers.delete("cookie");
+    return fetch(upstream);
+  },
+);
+
 // ---------------------------------------------------------------------------
 // API middleware — routes /api/* to the Effect HTTP layer
 // ---------------------------------------------------------------------------
@@ -125,6 +155,7 @@ export const startInstance = createStart(() => ({
     marketingMiddleware,
     mcpRequestMiddleware,
     sentryTunnelMiddleware,
+    posthogProxyMiddleware,
     apiRequestMiddleware,
   ],
 }));

apps/cloud/src/web/auth.tsx

@@ -1,6 +1,7 @@
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useEffect } from "react";
 import { Atom } from "@effect-atom/atom";
 import { useAtomValue, Result } from "@effect-atom/atom-react";
+import { usePostHog } from "posthog-js/react";
 import { ReactivityKey } from "@executor/react/api/reactivity-keys";
 
 import { CloudApiClient } from "./client";
@@ -55,6 +56,7 @@ export const useAuth = () => useContext(AuthContext);
 
 const AuthProviderClient = ({ children }: { children: React.ReactNode }) => {
   const result = useAtomValue(authAtom);
+  const posthog = usePostHog();
 
   const state: AuthState = Result.match(result, {
     onInitial: () => ({ status: "loading" as const }),
@@ -66,6 +68,25 @@ const AuthProviderClient = ({ children }: { children: React.ReactNode }) => {
     onFailure: () => ({ status: "unauthenticated" as const }),
   });
 
+  const userId = state.status === "authenticated" ? state.user.id : null;
+  const email = state.status === "authenticated" ? state.user.email : null;
+  const name = state.status === "authenticated" ? state.user.name : null;
+  const orgId = state.status === "authenticated" ? state.organization?.id ?? null : null;
+  const orgName = state.status === "authenticated" ? state.organization?.name ?? null : null;
+  const isUnauthenticated = state.status === "unauthenticated";
+
+  useEffect(() => {
+    if (!posthog) return;
+    if (userId) {
+      posthog.identify(userId, { email, name });
+      if (orgId) {
+        posthog.group("organization", orgId, { name: orgName });
+      }
+    } else if (isUnauthenticated) {
+      posthog.reset();
+    }
+  }, [posthog, userId, email, name, orgId, orgName, isUnauthenticated]);
+
   return <AuthContext.Provider value={state}>{children}</AuthContext.Provider>;
 };
 

apps/cloud/wrangler.jsonc

@@ -53,5 +53,6 @@
   ],
   "vars": {
     "VITE_PUBLIC_SITE_URL": "https://executor.sh",
+    "VITE_PUBLIC_POSTHOG_KEY": "phc_nNLrNMALpRsfrEkZovUkfMxYbcJvHnsJHeoSPavprgLL",
   },
 }