Fix PostHog proxy: use Node.js stream piping instead of fetch

Previous fetch-based approach had body re-encoding issues causing 405.
Stream piping forwards request bytes verbatim — preserving PostHog's
gzip/base64 compression and all headers without transformation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/api/ph/[...path].js

@@ -1,56 +1,42 @@
 /**
  * Vercel Serverless Function — PostHog reverse proxy.
  *
- * Why: ad blockers match on "us.i.posthog.com" and block analytics with
- * ERR_BLOCKED_BY_CLIENT. Routing through our own domain (/api/ph/*) makes
- * requests look first-party, bypassing the block.
+ * Ad blockers match on "us.i.posthog.com" and drop requests. Routing through
+ * our own Vercel domain (/api/ph/*) makes them look first-party.
  *
- * Using Node.js runtime (not Edge) because Edge runtime requires Next.js
- * for Vercel's file-based routing to work correctly. Node.js runtime
- * supports all HTTP methods and body types natively.
+ * Uses Node.js stream piping (req.pipe → proxyRes.pipe → res) so the body
+ * is forwarded byte-for-byte with no parsing — preserving PostHog's gzip/base64
+ * compression without any re-encoding issues.
  */
-const POSTHOG_HOST = 'https://us.i.posthog.com';
+import https from 'https';
 
-export default async function handler(req, res) {
-  // Reconstruct the PostHog path from the wildcard [...path] segment
-  const segments = req.query.path || [];
-  const pathStr  = Array.isArray(segments) ? segments.join('/') : segments;
-  const query    = req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : '';
-  const targetUrl = `${POSTHOG_HOST}/${pathStr}${query}`;
+export default function handler(req, res) {
+  const segments = Array.isArray(req.query.path)
+    ? req.query.path.join('/')
+    : (req.query.path || '');
 
-  // Read the incoming body as a raw buffer (preserves gzip/base64 compression
-  // that PostHog JS applies — do NOT parse or re-encode it)
-  const bodyChunks = [];
-  for await (const chunk of req) {
-    bodyChunks.push(chunk);
-  }
-  const rawBody = bodyChunks.length > 0 ? Buffer.concat(bodyChunks) : undefined;
+  const query = req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : '';
+  const path  = `/${segments}${query}`;
 
-  // Forward only the headers PostHog needs; strip Vercel-specific ones
-  const forwardedHeaders = {
-    host:             'us.i.posthog.com',
-    'content-type':   req.headers['content-type']   || 'text/plain',
-    'user-agent':     req.headers['user-agent']      || 'posthog-proxy',
+  const options = {
+    hostname: 'us.i.posthog.com',
+    path,
+    method:  req.method,
+    headers: {
+      ...req.headers,
+      host: 'us.i.posthog.com',
+    },
   };
-  if (req.headers['content-encoding']) {
-    forwardedHeaders['content-encoding'] = req.headers['content-encoding'];
-  }
 
-  const proxyResp = await fetch(targetUrl, {
-    method:  req.method,
-    headers: forwardedHeaders,
-    body:    ['GET', 'HEAD'].includes(req.method) ? undefined : rawBody,
+  const proxyReq = https.request(options, (proxyRes) => {
+    res.writeHead(proxyRes.statusCode, proxyRes.headers);
+    proxyRes.pipe(res);
   });
 
-  // Forward response status + headers back to the browser
-  res.status(proxyResp.status);
-  proxyResp.headers.forEach((value, key) => {
-    // Skip headers that Node's http module manages itself
-    if (!['transfer-encoding', 'connection'].includes(key)) {
-      res.setHeader(key, value);
-    }
+  proxyReq.on('error', (err) => {
+    res.status(500).json({ error: err.message });
   });
 
-  const responseBody = await proxyResp.arrayBuffer();
-  res.send(Buffer.from(responseBody));
+  // Pipe the incoming body directly — no buffering, no re-encoding
+  req.pipe(proxyReq);
 }

ui/src/main.jsx

@@ -6,9 +6,8 @@ import './index.css'
 import App from './App.jsx'
 
 posthog.init('phc_B4VarKaWfNc3u7vMcsUPRDbNgSyVxaBqtYT3ZwP6FshM', {
-  // Route through Vercel proxy (/ph/*) so ad blockers don't block requests
-  // to us.i.posthog.com directly. The proxy is configured in vercel.json.
-  // Route through Vercel Edge Function (/api/ph/*) — bypasses ad blockers
+  // Route through /api/ph (Vercel serverless proxy) so ad blockers
+  // don't block requests going directly to us.i.posthog.com.
   api_host: '/api/ph',
   ui_host: 'https://us.posthog.com',
   capture_pageview: true,