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).
This commit is contained in:
@@ -0,0 +1,106 @@
|
||||
// The client log's app-wide hooks (E22 S4), installed once from main.tsx before anything renders:
|
||||
// the start snapshot, uncaught errors and rejections, and navigation.
|
||||
//
|
||||
// Navigation has no single choke point in this router-free app — `setPage`, the channel and search
|
||||
// overlays, sub-views, the overlay stack and the URL mirrors each call `history.pushState` /
|
||||
// `replaceState` themselves (lib/history.ts, NavigationProvider, ChannelsProvider, …). Instrumenting
|
||||
// each would be one more thing a new call site can forget, so the History methods themselves are
|
||||
// wrapped here, and `popstate` covers Back/Forward. A replaceState that only saves a scroll position
|
||||
// changes nothing this logs, so it is not an event.
|
||||
import { FRONTEND_SHA, FRONTEND_VERSION } from "./version";
|
||||
import { enabled, errorAttrs, log } from "./log";
|
||||
import { pathTemplate } from "./http";
|
||||
|
||||
// URL parameters that carry what the user TYPED — search text. Logged only at TRACE ("Teljes").
|
||||
// Every other parameter is filter/sort/view state: its NAME is kept at INFO, its value at DEBUG.
|
||||
const TYPED_PARAMS = new Set(["q", "keywords", "search"]);
|
||||
|
||||
type Via = "start" | "push" | "replace" | "pop";
|
||||
|
||||
/** What a navigation event records of where the tab is now. Built from `history.state`'s own view
|
||||
* keys and the query, never the full URL (a `#reset=` fragment, a `?token=` link). */
|
||||
function viewAttrs(): Record<string, unknown> {
|
||||
const st = (window.history.state ?? {}) as Record<string, unknown>;
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const view: Record<string, unknown> = {
|
||||
path: pathTemplate(window.location.pathname),
|
||||
page: typeof st.sfPage === "string" ? st.sfPage : null,
|
||||
params: [...new Set(params.keys())].sort(),
|
||||
overlay: st._ov != null,
|
||||
channel: st._chan != null,
|
||||
search: st._yt != null,
|
||||
};
|
||||
if (enabled("DEBUG")) {
|
||||
const values: Record<string, string> = {};
|
||||
for (const [k, v] of params) {
|
||||
if (!TYPED_PARAMS.has(k) || enabled("TRACE")) values[k] = v;
|
||||
}
|
||||
view.values = values;
|
||||
if (typeof st._sub === "string") view.sub = st._sub;
|
||||
}
|
||||
if (enabled("TRACE") && typeof st._yt === "string") view.query = st._yt;
|
||||
return view;
|
||||
}
|
||||
|
||||
/** A script's path (`/assets/index-B1x9.js`): the bundle name is what finds the fault, and a script
|
||||
* URL carries no user data — but a malformed one is dropped rather than logged raw. */
|
||||
function scriptPath(filename: string): string {
|
||||
try {
|
||||
return new URL(filename, window.location.href).pathname;
|
||||
} catch {
|
||||
return "?";
|
||||
}
|
||||
}
|
||||
|
||||
let lastView = "";
|
||||
function recordView(via: Via): void {
|
||||
const view = viewAttrs();
|
||||
const signature = JSON.stringify(view);
|
||||
if (via !== "start" && signature === lastView) return;
|
||||
lastView = signature;
|
||||
log.info("nav.view", `${via} ${String(view.page ?? view.path)}`, { via, ...view });
|
||||
}
|
||||
|
||||
let installed = false;
|
||||
|
||||
/** Install the hooks. Idempotent: a second call (a hot reload) must not wrap History twice. */
|
||||
export function installClientLog(): void {
|
||||
if (installed) return;
|
||||
installed = true;
|
||||
|
||||
log.info("app.start", "app loaded", {
|
||||
version: FRONTEND_VERSION,
|
||||
sha: FRONTEND_SHA,
|
||||
user_agent: navigator.userAgent,
|
||||
language: navigator.language,
|
||||
viewport: `${window.innerWidth}x${window.innerHeight}`,
|
||||
dpr: window.devicePixelRatio,
|
||||
});
|
||||
|
||||
window.addEventListener("error", (e) => {
|
||||
// A failed <img>/<script> load also dispatches `error` on window (capture only); those carry no
|
||||
// `error` object and are not script faults.
|
||||
if (!(e instanceof ErrorEvent)) return;
|
||||
log.error("app.uncaught", e.message || "uncaught error", {
|
||||
...errorAttrs(e.error ?? e.message),
|
||||
where: e.filename ? `${scriptPath(e.filename)}:${e.lineno}:${e.colno}` : null,
|
||||
});
|
||||
});
|
||||
window.addEventListener("unhandledrejection", (e) => {
|
||||
log.error("app.unhandled_rejection", "unhandled promise rejection", errorAttrs(e.reason));
|
||||
});
|
||||
|
||||
const history = window.history;
|
||||
for (const [method, via] of [
|
||||
["pushState", "push"],
|
||||
["replaceState", "replace"],
|
||||
] as const) {
|
||||
const original = history[method];
|
||||
history[method] = function (this: History, ...args: Parameters<History["pushState"]>) {
|
||||
original.apply(this, args);
|
||||
recordView(via);
|
||||
};
|
||||
}
|
||||
window.addEventListener("popstate", () => recordView("pop"));
|
||||
recordView("start");
|
||||
}
|
||||
Reference in New Issue
Block a user