Run pages link every API call to its distributed trace

The browser surface harvests the W3C traceparent the web app already
sends on each API request into the run's traces.json (id + offset +
url). The runs viewer renders them as a Distributed traces table — one
row per call, linking into the local motel's per-trace waterfall — so
'why was that page slow in this recording' goes from the recording to
the exact click→server→DB trace in two clicks. Spans exist in motel
when the run exported there (E2E_MOTEL=1); ids harvest regardless.

Author: RhysSullivan

e2e/src/surfaces/browser.ts

@@ -4,7 +4,7 @@
 // everywhere), per-step screenshots, and a failure screenshot. The scenario
 // drives `page` directly; assertions are vitest's job.
 import { execFile } from "node:child_process";
-import { copyFileSync, mkdirSync, rmSync } from "node:fs";
+import { copyFileSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 import { promisify } from "node:util";
 
@@ -70,7 +70,20 @@ export const makeBrowserSurface = (dir: string, target: Target): BrowserSurface
         // The session video's clock starts with the page; anchor it for the
         // run's focus timeline (scripts/film.ts cuts on these).
         markRecordingStart(dir, "browser");
-        return { browser, context, page, videoTmp, shots: { count: 0 } };
+        // Harvest distributed-trace ids: every app API request carries a W3C
+        // traceparent (Effect's HttpClient), and each id names one
+        // click→server→DB trace in whatever OTLP store the run exported to
+        // (motel locally). Written to traces.json so the runs viewer can
+        // link a recording to its traces.
+        const traceIds: { id: string; at: number; url: string }[] = [];
+        page.on("request", (request) => {
+          const traceparent = request.headers()["traceparent"];
+          const match = traceparent ? /^[0-9a-f]{2}-([0-9a-f]{32})-/.exec(traceparent) : null;
+          if (match?.[1]) {
+            traceIds.push({ id: match[1], at: Date.now(), url: request.url() });
+          }
+        });
+        return { browser, context, page, videoTmp, shots: { count: 0 }, traceIds };
       }),
       ({ page, context, shots }) =>
         Effect.promise(async () => {
@@ -95,8 +108,11 @@ export const makeBrowserSurface = (dir: string, target: Target): BrowserSurface
             throw error;
           }
         }),
-      ({ browser, context, page, videoTmp }) =>
+      ({ browser, context, page, videoTmp, traceIds }) =>
         Effect.promise(async () => {
+          if (traceIds.length > 0) {
+            writeFileSync(join(dir, "traces.json"), JSON.stringify(traceIds, null, 1));
+          }
           await context.tracing.stop({ path: join(dir, "trace.zip") }).catch(() => {});
           const video = page.video();
           await context.close(); // flushes the recording

e2e/viewer/src/App.tsx

@@ -137,17 +137,33 @@ const Matrix = () => {
 // viewer (trace.playwright.dev fetches the zip from this server, client-side).
 // ---------------------------------------------------------------------------
 
+// Where this machine's motel (local OTLP store) serves its viewer. Runs
+// export distributed traces there when E2E_MOTEL=1; the run page links its
+// harvested trace ids straight into motel's per-trace waterfall.
+const MOTEL_VIEWER = "http://127.0.0.1:27686";
+
+interface RunTraceRef {
+  id: string;
+  at: number;
+  url: string;
+}
+
 const RunView = ({ target, slug }: { target: string; slug: string }) => {
   const base = `${target}/${slug}`;
   const [result, setResult] = useState<RunResult | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [tab, setTab] = useState<"media" | "source">("media");
+  const [traces, setTraces] = useState<RunTraceRef[]>([]);
 
   useEffect(() => {
     fetch(`${base}/result.json`)
       .then((r) => r.json())
       .then(setResult)
       .catch((e) => setError(String(e)));
+    fetch(`${base}/traces.json`)
+      .then((r) => (r.ok ? r.json() : []))
+      .then(setTraces)
+      .catch(() => setTraces([]));
   }, [base]);
 
   if (error) return <div className="page error-text">failed to load run: {error}</div>;
@@ -258,6 +274,47 @@ const RunView = ({ target, slug }: { target: string; slug: string }) => {
           No visual artifacts — this surface's source of truth is the test code and its assertions.
         </p>
       )}
+      {traces.length > 0 && (
+        <>
+          <h2 className="section">Distributed traces</h2>
+          <p className="hint">
+            Every API call the recording made, as a click→server→DB waterfall. Served by your local
+            motel (`bun run motel`); runs recorded without E2E_MOTEL=1 still list ids, but motel
+            won't have the spans.
+          </p>
+          <table>
+            <thead>
+              <tr>
+                <th>when</th>
+                <th>request</th>
+                <th>trace</th>
+              </tr>
+            </thead>
+            <tbody>
+              {traces.map((trace, index) => (
+                <tr key={`${trace.id}-${index}`}>
+                  <td className="dim">
+                    {result.startedAt
+                      ? `${((trace.at - result.startedAt) / 1000).toFixed(1)}s`
+                      : new Date(trace.at).toLocaleTimeString()}
+                  </td>
+                  <td className="dim">{trace.url.replace(/^https?:\/\/[^/]+/, "")}</td>
+                  <td>
+                    <a
+                      className="tool-link"
+                      href={`${MOTEL_VIEWER}/trace/${trace.id}`}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {trace.id.slice(0, 8)}…
+                    </a>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </>
+      )}
     </div>
   );
 };