feat: client log with request ids, joined to the server's

The browser now keeps its half of the one event shape logs.py defines: lib/log.ts is a levelled, redacted, bounded (2000 events) in-memory ring with the server's level names and severity numbers. Nothing leaves the browser yet; sending is the consented diagnostics level (S5). - lib/http.ts `send` is the one fetch: every request carries an X-Request-Id and becomes one http.request event. The server echoes the matched route template in X-Route (only for a matched route, so a raw path with a value in it is never sent back); without one the client templates the path itself. req, beacon, the upload XHR, the public watch page and the legal pages all go through it. - Hooks: app start snapshot, uncaught errors and rejections, History push/replace/popstate (a scroll-only replace is not an event; parameter values only at DEBUG, typed search only at TRACE), notifications, the error dialog, the crash boundary, failed queries and mutations (key head only), and the messages socket (lifecycle, frame types at DEBUG). - Redaction is one contract: backend/tests/fixtures/log_redaction_cases.json runs against both redact() implementations. - Lint: fetch, XMLHttpRequest and WebSocket each belong to one logging module, console to none; a contract test proves the rules fire. Fixes a socket takeover: the close of a socket released by the last subscriber cleared the newer socket a quick re-subscribe had opened and scheduled a third, leaving two live sockets that delivered every message twice (measured in Chromium: 3 created / 2 live before, 2 / 1 after).
2026-09-17 01:44:29 +02:00
parent 0517de1f59
commit a210992bfc
24 changed files with 1207 additions and 34 deletions
@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+
+import { clear, events, setLevel } from "./log";
+import { installClientLog } from "./logHooks";
+
+// History is wrapped ONCE per window (installClientLog is idempotent), so this file installs once
+// and every test reads only what it caused.
+beforeAll(() => {
+  installClientLog();
+  installClientLog(); // a hot reload's second call must not wrap History twice
+  expect(events().map((e) => e.event)).toEqual(["app.start", "nav.view"]);
+  clear();
+});
+afterEach(() => {
+  setLevel("INFO");
+  window.history.replaceState(null, "", "/");
+  clear();
+});
+
+const views = () => events().filter((e) => e.event === "nav.view");
+
+describe("client log hooks", () => {
+  it("records a page change once, and not a replaceState that only saves a scroll position", () => {
+    window.history.pushState({ sfPage: "feed" }, "", "/?show=all");
+    window.history.replaceState({ sfPage: "feed", sfScroll: 120 }, "");
+    window.history.replaceState({ sfPage: "feed", sfScroll: 480 }, "");
+    expect(views()).toHaveLength(1);
+    expect(views()[0]!.attrs).toMatchObject({
+      via: "push",
+      page: "feed",
+      path: "/",
+      params: ["show"],
+      overlay: false,
+    });
+  });
+
+  it("keeps parameter NAMES at the base level, values at DEBUG, typed search only at TRACE", () => {
+    window.history.pushState({ sfPage: "feed" }, "", "/?tags=music&q=lofi");
+    expect(views()[0]!.attrs).not.toHaveProperty("values");
+    expect(JSON.stringify(views())).not.toContain("lofi");
+
+    setLevel("DEBUG");
+    window.history.pushState({ sfPage: "plex" }, "", "/?tags=music&q=lofi");
+    expect(views()[1]!.attrs!.values).toEqual({ tags: "music" });
+
+    setLevel("TRACE");
+    window.history.pushState({ sfPage: "feed", _yt: "lofi" }, "", "/?tags=music&q=lofi");
+    expect(views()[2]!.attrs).toMatchObject({
+      values: { tags: "music", q: "lofi" },
+      query: "lofi",
+    });
+  });
+
+  it("records an overlay opening as a view of its own, and Back as a pop", () => {
+    window.history.pushState({ sfPage: "feed", _ov: 1 }, "");
+    // What Back does: the browser restores the previous entry's state (the unwrapped prototype
+    // method, as the browser itself would not go through the app's wrapper), then fires popstate.
+    History.prototype.replaceState.call(window.history, { sfPage: "feed" }, "");
+    window.dispatchEvent(new PopStateEvent("popstate"));
+    expect(views().map((e) => [e.attrs!.via, e.attrs!.overlay])).toEqual([
+      ["push", true],
+      ["pop", false],
+    ]);
+  });
+
+  it("never records a token that rides in the address", () => {
+    window.history.replaceState(
+      { sfPage: "welcome" },
+      "",
+      "/watch/Ab3xYz9Tok/unlock?token=zzz#reset=yyy",
+    );
+    setLevel("TRACE");
+    window.history.pushState(
+      { sfPage: "welcome2" },
+      "",
+      "/watch/Ab3xYz9Tok/unlock?token=zzz#reset=yyy",
+    );
+    const text = JSON.stringify(views());
+    expect(text).not.toContain("Ab3xYz9Tok");
+    expect(text).not.toContain("zzz");
+    expect(text).not.toContain("yyy");
+  });
+
+  it("records uncaught errors and unhandled rejections", () => {
+    window.dispatchEvent(
+      new ErrorEvent("error", {
+        error: new TypeError("x is undefined"),
+        message: "x is undefined",
+        filename: "http://localhost/assets/index-B1x9.js",
+        lineno: 3,
+        colno: 7,
+      }),
+    );
+    const rejection = new Event("unhandledrejection") as Event & { reason: unknown };
+    rejection.reason = new Error("nope");
+    window.dispatchEvent(rejection);
+    window.dispatchEvent(new Event("error")); // a failed <img> load: not a script fault
+
+    expect(events().map((e) => [e.event, e.level])).toEqual([
+      ["app.uncaught", "ERROR"],
+      ["app.unhandled_rejection", "ERROR"],
+    ]);
+    expect(events()[0]!.attrs).toMatchObject({
+      error: "TypeError",
+      where: "/assets/index-B1x9.js:3:7",
+    });
+  });
+});