@bigbertha/sdk 0.4.1 → 0.5.1

package/README.md

@@ -1,12 +1,15 @@
 # @bigbertha/sdk
 
-Error reporting for bertha. Browser, Node, edge and Next.js, with no dependencies and
-source maps matched by debug id rather than by file path.
+Error reporting for bertha. Browser, React, Node, edge and Next.js, with no dependencies
+and source maps matched by debug id rather than by file path.
 
-- About 4.4 kB gzipped in the browser (`npm run size` enforces the budget).
+- About 5.8 kB gzipped in the browser (`npm run size` enforces the budget).
 - Batches events, backs off when bertha says so, and sends what's queued as the page or
   process goes away.
 - Scrubs emails, bearer tokens and secret-looking query values by default.
+- Each event says how it surfaced (an uncaught error, a rejection, a boundary, a call),
+  where (the page or request) and in what state, and links the page's requests to the
+  server errors they caused by W3C `traceparent`.
 - The build plugins give each bundle a debug id, upload its map and delete the `.map`
   files, so maps never ship to browsers.
 
@@ -55,11 +58,13 @@ import { withBertha } from "@bigbertha/sdk/next/config"
 export default withBertha({ /* your config */ })
 ```
 
-`withBertha` options: `release`, `keepMaps`, `disableUpload`. It removes the maps under
+`withBertha` options: `release`, `keepMaps`, `disableUpload`, `recordDeploy`. It removes the maps under
 `.next/static` (the ones browsers can fetch) and keeps the server's, which aren't served
 and which Vercel's build output can need. `keepMaps` takes `true`, `false` or a function
 of the path inside `.next`. It also stamps the environment, so a Vercel preview reports
-as staging.
+as staging. On Vercel it records the deploy after the upload, with Vercel's commit sha,
+message and author, so the release page knows what went out (`recordDeploy: false`
+turns that off).
 
 For your own options (`beforeSend`, `tags`, `sampleRate`), call `init` from
 `@bigbertha/sdk/browser` in `instrumentation-client.ts` instead of importing
@@ -82,10 +87,52 @@ import { bertha } from "@bigbertha/sdk/vite"
 export default defineConfig({ plugins: [bertha()] })
 ```
 
+### What a browser event carries
+
+- **The page:** its URL as the event's request, scrubbed like any URL.
+- **How it surfaced:** `onerror` or `onunhandledrejection`, neither caught by the app.
+- **Page state:** viewport and pixel ratio, online, tab visible, how the page was opened
+  (navigate, reload, back/forward, prerender), how long it had been open, whether the
+  browser is automated (`navigator.webdriver`), the referrer, language, timezone and
+  connection type, and the Next.js version when there is one.
+- **The visitor's IP**, which bertha reads from the request and stores in full.
+  `sendIp: false` turns it off; an IP given to `setUser` is used instead.
+- **Breadcrumbs:** the page load with its navigation type, restores from the
+  back-forward cache, the tab hiding and showing, route changes, clicks, fetch and XHR
+  with status and duration, and `console.log`, `info`, `warn` and `error`. Turn any off
+  with `breadcrumbs: { console: false }` and so on.
+- **A trace id**, one per page load. Same-origin fetch and XHR requests carry a
+  `traceparent` header with it, so a server error a request caused lists the page's
+  error beside it. For an API on another origin, list it in `tracePropagationTargets`
+  (URL prefixes or patterns) and allow the `traceparent` header in its CORS:
+
+  ```ts
+  init({ key, url, tracePropagationTargets: ["https://api.example.com"] })
+  ```
+
+Frames in browser extensions and in scripts Safari hides (`webkit-masked-url://`) are
+sent as not the app's code, so bertha can say when an error probably isn't yours.
+
 The plugin turns on hidden source maps if the build has none. It only uploads when
 `BERTHA_UPLOAD_KEY` is set, so local builds stay offline and keep their maps.
 Options: `release`, `url`, `uploadKey`, `keepMaps`.
 
+## React
+
+```tsx
+import { ErrorBoundary } from "@bigbertha/sdk/react"
+
+<ErrorBoundary fallback={({ reset }) => <button onClick={reset}>Try again</button>}>
+  <App />
+</ErrorBoundary>
+```
+
+`ErrorBoundary` reports what it catches with React's component stack, then renders
+`fallback`: a node, or a function of `{ error, eventId, reset }`. It also takes
+`onError(error, componentStack, eventId)` and `tags`. Importing the entry adds React's
+version to every event. React is an optional peer dependency; nothing else in the SDK
+needs it.
+
 ## Node
 
 ```ts
@@ -105,7 +152,31 @@ frame in your own files from disk and sends them with the event (`contextLines:
 turns that off). It also raises V8's default stack limit from 10 frames to 50, so a
 deep framework call doesn't hide your code. A limit you set yourself is left alone.
 
-`wrapHandler(fn)` reports what a request handler throws and rethrows it.
+`wrapHandler(fn)` reports what a request handler throws and rethrows it, with the
+request: its URL, its headers (never `authorization`, `proxy-authorization`, `cookie`,
+`set-cookie` or `x-api-key`), the client IP from the first `x-forwarded-for` hop or the
+socket, and the trace from an incoming `traceparent`. Next.js's `onRequestError` sends
+the same.
+
+An app with its own error middleware passes the framework's request as `req` and gets
+the same request, IP and trace:
+
+```ts
+// Koa
+app.on("error", (err, ctx) =>
+  captureException(err, { req: ctx, status: err.status ?? 500, mechanism: { handler: "koa", handled: false } }),
+)
+// Express, after the routes
+app.use((err, req, res, next) => {
+  captureException(err, { req, status: 500, mechanism: { handler: "express", handled: false } })
+  next(err)
+})
+```
+
+`req` takes Node's `IncomingMessage`, Express's `req`, Koa's `ctx` or a Fetch `Request`
+(the edge entry too). `mechanism` says the error escaped the app's own code, so bertha
+doesn't read it as one the app caught. Server events also name the host (Heroku's `DYNO`, else the hostname) and the
+Node and Next.js versions.
 
 For bundled Node code, give the output debug ids and upload its maps after the build:
 
@@ -126,6 +197,7 @@ Every entry exports the same functions:
 
 ```ts
 captureException(err, { level: "warning", tags: { job: "nightly" }, fingerprint: ["nightly-import"] })
+// An error's own fields (code, status…) are sent with it, each as JSON.
 captureMessage("Payment provider slow", { level: "warning" })
 addBreadcrumb({ category: "cart", message: "Added 2 items" })
 setUser({ id: "u_42" })   // hashed on the server, never shown in full
@@ -142,8 +214,12 @@ await flush()
 | `environment` | `BERTHA_ENVIRONMENT`, `VERCEL_ENV` or `NODE_ENV` (Node, edge; `withBertha` stamps it for the browser), else production | Free text is mapped to production, staging or development. |
 | `sampleRate` | `1` | Share of events to send. |
 | `beforeSend` | | Change an event, or return `null` to drop it. |
-| `scrub` | `true` | Redact emails, bearer tokens and secret query values. |
+| `scrub` | `true` | Redact emails, bearer tokens and secret query values, and drop the error's own fields with credential names (`password`, `token`, `apiKey`…). |
 | `tags` | | Tags on every event. |
+| `versions` | | More versions on every event, as `{ name: version }`. |
+| `sendIp` | `true` | Browser: store the visitor's IP. |
+| `tracePropagationTargets` | same origin only | Browser: other origins whose requests get a `traceparent`. |
+| `breadcrumbs` | all on | Browser: `fetch`, `xhr`, `navigation`, `click`, `console`. |
 | `debug` | `false` | Log what the SDK does. |
 
 ## Deploys
@@ -156,7 +232,8 @@ npx bertha deploy --env production
 
 It sends the release and the last commit's sha, message and author. The release page
 then shows what the deploy brought in and what went quiet after it. A first event from an
-unknown release also creates the release, without the commit details.
+unknown release also creates the release, and bertha marks it as only seen, not deployed.
+When the release is a full commit sha, bertha takes it as the commit.
 
 ## Development
 

package/dist/browser/index.d.ts

@@ -1,9 +1,19 @@
 import { Client } from "../core/client.ts";
-import type { Options } from "../core/types.ts";
+import type { IngestEvent, Options } from "../core/types.ts";
 export { addBreadcrumb, captureException, captureMessage, flush, getClient, setTag, setUser } from "../core/hub.ts";
 export type { CaptureContext, IngestEvent, Options } from "../core/types.ts";
 export interface BrowserOptions extends Options {
     /** Which breadcrumbs to record automatically. All on by default. */
     breadcrumbs?: Partial<Record<"fetch" | "xhr" | "navigation" | "click" | "console", boolean>>;
+    /** Store the visitor's IP address with each event (bertha reads it from the request). On by default. */
+    sendIp?: boolean;
+    /**
+     * Other origins whose requests get a `traceparent` header, so their errors link to this
+     * page's: URL prefixes or patterns. Same-origin requests always get one. The server
+     * must allow the header in CORS.
+     */
+    tracePropagationTargets?: (string | RegExp)[];
 }
 export declare function init(options: BrowserOptions): Client | undefined;
+/** What the page looked like when it failed. Called for every event. */
+export declare function enrich(event: IngestEvent, sendIp: boolean): void;

package/dist/browser/index.js

@@ -1,13 +1,16 @@
-// @bigbertha/sdk/browser: uncaught errors and rejections, with breadcrumbs from
-// fetch, XHR, navigation, clicks and the console.
+// @bigbertha/sdk/browser: uncaught errors and rejections, with the page they happened
+// on and its state, and breadcrumbs from fetch, XHR, navigation, clicks and the console.
 import { Client } from "../core/client.js";
 import { setClient } from "../core/hub.js";
 import { scrubUrl } from "../core/scrub.js";
+import { randomHex, traceparent } from "../core/trace.js";
 import { fetchTransport, streamGzip } from "../core/transport.js";
 import { VERSION } from "../core/version.js";
 import { userAgent } from "./user-agent.js";
 export { addBreadcrumb, captureException, captureMessage, flush, getClient, setTag, setUser } from "../core/hub.js";
 let installed = false;
+/** One trace per page load: every error and request from it shares this id. */
+const traceId = randomHex(32);
 export function init(options) {
     if (typeof window === "undefined")
         return undefined;
@@ -23,7 +26,7 @@ export function init(options) {
         gzip: streamGzip,
         fetch: nativeFetch,
         beacon: (url, body) => !!navigator.sendBeacon?.(url, new Blob([body], { type: "text/plain" })),
-    }), { name: "bertha.browser", version: VERSION }, { ...userAgent(navigator.userAgent), userAgent: navigator.userAgent });
+    }), { name: "bertha.browser", version: VERSION }, { ...userAgent(navigator.userAgent), userAgent: navigator.userAgent }, undefined, (event) => enrich(event, options.sendIp !== false));
     setClient(client);
     if (installed)
         return client;
@@ -32,21 +35,28 @@ export function init(options) {
         // Resource load errors (img, script) bubble here too, without an error object.
         if (!e.error && !e.message)
             return;
-        client.captureException(e.error ?? new ErrorFromEvent(e), { level: "error" });
+        client.captureException(e.error ?? new ErrorFromEvent(e), {
+            level: "error",
+            mechanism: { handler: "onerror", handled: false },
+        });
     });
-    window.addEventListener("unhandledrejection", (e) => client.captureException(e.reason));
+    window.addEventListener("unhandledrejection", (e) => client.captureException(e.reason, { mechanism: { handler: "onunhandledrejection", handled: false } }));
     addEventListener("pagehide", () => void client.flush(true));
+    const on = { fetch: true, xhr: true, navigation: true, click: true, console: true, ...options.breadcrumbs };
+    const base = options.url.replace(/\/+$/, "");
+    const crumb = (category, message, level, timestamp) => client.addBreadcrumb({ category, message, ...(level ? { level } : {}), ...(timestamp ? { timestamp } : {}) });
     document.addEventListener("visibilitychange", () => {
-        if (document.visibilityState === "hidden")
+        const hidden = document.visibilityState === "hidden";
+        if (on.navigation)
+            crumb("navigation", hidden ? "Page hidden" : "Page visible");
+        if (hidden)
             void client.flush(true);
     });
-    const on = { fetch: true, xhr: true, navigation: true, click: true, console: true, ...options.breadcrumbs };
-    const base = options.url.replace(/\/+$/, "");
-    const crumb = (category, message, level) => client.addBreadcrumb(level ? { category, message, level } : { category, message });
+    const propagate = propagateTo(options.tracePropagationTargets ?? []);
     if (on.fetch)
-        instrumentFetch(base, crumb);
+        instrumentFetch(base, crumb, propagate);
     if (on.xhr)
-        instrumentXhr(base, crumb);
+        instrumentXhr(base, crumb, propagate);
     if (on.navigation)
         instrumentHistory(crumb);
     if (on.click)
@@ -55,6 +65,51 @@ export function init(options) {
         instrumentConsole(crumb);
     return client;
 }
+/** What the page looked like when it failed. Called for every event. */
+export function enrich(event, sendIp) {
+    event.request ??= { method: "GET", url: scrubUrl(location.href) };
+    if (sendIp && !event.user?.ip)
+        event.user = { ...event.user, ip: "auto" };
+    event.trace ??= { traceId };
+    const nav = performance.getEntriesByType?.("navigation")[0];
+    const connection = navigator.connection;
+    let timezone;
+    try {
+        timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    catch {
+        // Old engines without Intl.
+    }
+    const next = window.next?.version;
+    event.context = {
+        ...event.context,
+        viewport: `${innerWidth}×${innerHeight} @${Math.round(devicePixelRatio * 100) / 100}x`,
+        online: navigator.onLine,
+        visible: document.visibilityState === "visible",
+        navigation: nav?.type,
+        automated: !!navigator.webdriver,
+        pageAgeMs: Math.round(performance.now()),
+        referrer: document.referrer || undefined,
+        language: navigator.language,
+        timezone,
+        connection: connection?.effectiveType && `${connection.effectiveType}${connection.saveData ? ", save data" : ""}`,
+        versions: { ...(next ? { next } : {}), ...event.context?.versions },
+    };
+}
+/** Same-origin URLs, and those the app listed, get a new span. */
+function propagateTo(targets) {
+    return (url) => {
+        let abs;
+        try {
+            abs = new URL(url, location.href);
+        }
+        catch {
+            return undefined;
+        }
+        const listed = targets.some((t) => (typeof t === "string" ? abs.href.startsWith(t) : t.test(abs.href)));
+        return abs.origin === location.origin || listed ? randomHex(16) : undefined;
+    };
+}
 class ErrorFromEvent extends Error {
     constructor(e) {
         super(e.message);
@@ -62,28 +117,38 @@ class ErrorFromEvent extends Error {
         this.stack = `${e.message}\n    at ${e.filename}:${e.lineno}:${e.colno}`;
     }
 }
-function requestLine(method, url, status) {
-    return `${method.toUpperCase()} ${scrubUrl(url)} ${status}`;
+/** `GET /x 200 in 34ms, span 00f067aa0ba902b7` */
+function requestLine(method, url, status, start, span) {
+    const ms = Math.round(performance.now() - start);
+    return `${method.toUpperCase()} ${scrubUrl(url)} ${status} in ${ms}ms${span ? `, span ${span}` : ""}`;
 }
-function instrumentFetch(base, crumb) {
+function instrumentFetch(base, crumb, propagate) {
     const original = window.fetch;
     window.fetch = async function (input, init) {
         const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
         const method = init?.method ?? (input instanceof Request ? input.method : "GET");
         if (url.startsWith(base))
             return original.call(window, input, init);
+        const span = propagate(url);
+        if (span) {
+            const headers = new Headers(init?.headers ?? (input instanceof Request ? input.headers : undefined));
+            if (!headers.has("traceparent"))
+                headers.set("traceparent", traceparent(traceId, span));
+            init = { ...init, headers };
+        }
+        const start = performance.now();
         try {
             const res = await original.call(window, input, init);
-            crumb("fetch", requestLine(method, url, res.status), res.status >= 400 ? "error" : undefined);
+            crumb("fetch", requestLine(method, url, res.status, start, span), res.status >= 400 ? "error" : undefined);
             return res;
         }
         catch (e) {
-            crumb("fetch", requestLine(method, url, "failed"), "error");
+            crumb("fetch", requestLine(method, url, "failed", start, span), "error");
             throw e;
         }
     };
 }
-function instrumentXhr(base, crumb) {
+function instrumentXhr(base, crumb, propagate) {
     const proto = XMLHttpRequest.prototype;
     const open = proto.open;
     const send = proto.send;
@@ -95,12 +160,30 @@ function instrumentXhr(base, crumb) {
     proto.send = function (body) {
         const m = meta.get(this);
         if (m && !m[1].startsWith(base)) {
-            this.addEventListener("loadend", () => crumb("fetch", requestLine(m[0], m[1], this.status || "failed"), !this.status || this.status >= 400 ? "error" : undefined));
+            const span = propagate(m[1]);
+            // Throws once the request was sent, or when the app set the header itself.
+            if (span) {
+                try {
+                    this.setRequestHeader("traceparent", traceparent(traceId, span));
+                }
+                catch {
+                    // Leave the request as the app made it.
+                }
+            }
+            const start = performance.now();
+            this.addEventListener("loadend", () => crumb("fetch", requestLine(m[0], m[1], this.status || "failed", start, span), !this.status || this.status >= 400 ? "error" : undefined));
         }
         return send.call(this, body);
     };
 }
 function instrumentHistory(crumb) {
+    const nav = performance.getEntriesByType?.("navigation")[0];
+    const loaded = new Date(performance.timeOrigin || Date.now()).toISOString();
+    crumb("navigation", `Loaded ${scrubUrl(path(location.href))}${nav ? ` (${nav.type})` : ""}`, undefined, loaded);
+    addEventListener("pageshow", (e) => {
+        if (e.persisted)
+            crumb("navigation", `Restored ${scrubUrl(path(location.href))} from the back-forward cache`);
+    });
     let last = location.href;
     const record = () => {
         const to = location.href;
@@ -143,13 +226,14 @@ function describeElement(el) {
     const id = el.id ? `#${el.id}` : "";
     return label ? `Clicked ${tag}${id} "${label}"` : `Clicked ${tag}${id}`;
 }
+const CONSOLE_LEVELS = { log: "info", info: "info", warn: "warning", error: "error" };
 function instrumentConsole(crumb) {
-    for (const level of ["warn", "error"]) {
+    for (const level of ["log", "info", "warn", "error"]) {
         const original = console[level];
         console[level] = (...args) => {
             const text = args.map((a) => (typeof a === "string" ? a : a instanceof Error ? a.message : safeJson(a))).join(" ");
             if (!text.startsWith("[bertha]"))
-                crumb("console", text.slice(0, 500), level === "warn" ? "warning" : "error");
+                crumb("console", text.slice(0, 500), CONSOLE_LEVELS[level]);
             original.apply(console, args);
         };
     }

package/dist/build/deploy.d.ts

@@ -0,0 +1,18 @@
+import { type Commit } from "./release.ts";
+export interface DeployOptions {
+    url: string;
+    uploadKey: string;
+    release: string;
+    environment: string;
+    commit?: Commit;
+}
+export type DeployResult = {
+    ok: true;
+    releaseId: string;
+} | {
+    ok: false;
+    message: string;
+};
+/** The commit being deployed: the checkout's, else what the host says (Vercel names it in full). */
+export declare function deployCommit(cwd?: string): Commit | undefined;
+export declare function recordDeploy(o: DeployOptions): Promise<DeployResult>;

package/dist/build/deploy.js

@@ -0,0 +1,32 @@
+// Records a deploy with bertha: `bertha deploy` in CI, and withBertha on Vercel.
+import { env, envCommit } from "../core/env.js";
+import { lastCommit } from "./release.js";
+import { reason } from "./index.js";
+/** The commit being deployed: the checkout's, else what the host says (Vercel names it in full). */
+export function deployCommit(cwd) {
+    const vercel = env("VERCEL_GIT_COMMIT_SHA");
+    if (vercel) {
+        return { sha: vercel, message: env("VERCEL_GIT_COMMIT_MESSAGE") ?? "", author: env("VERCEL_GIT_COMMIT_AUTHOR_NAME") ?? "" };
+    }
+    const sha = envCommit();
+    return lastCommit(cwd) ?? (sha ? { sha, message: "", author: "" } : undefined);
+}
+export async function recordDeploy(o) {
+    const body = { release: o.release, environment: o.environment };
+    if (o.commit)
+        body.commit = o.commit;
+    try {
+        const res = await fetch(`${o.url.replace(/\/+$/, "")}/ingest/v1/deploys`, {
+            method: "POST",
+            headers: { authorization: `Bearer ${o.uploadKey}`, "content-type": "application/json" },
+            body: JSON.stringify(body),
+            signal: AbortSignal.timeout(30_000),
+        });
+        if (!res.ok)
+            return { ok: false, message: `bertha didn't record the deploy: ${await reason(res)}` };
+        return { ok: true, releaseId: (await res.json()).releaseId };
+    }
+    catch (e) {
+        return { ok: false, message: `Couldn't reach bertha at ${o.url}: ${e.message}` };
+    }
+}

package/dist/build/index.d.ts

@@ -1,3 +1,4 @@
+export { type DeployOptions, type DeployResult, deployCommit, recordDeploy } from "./deploy.ts";
 export { detectRelease, lastCommit } from "./release.ts";
 export interface ProcessOptions {
     /** The build output. */

package/dist/build/index.js

@@ -11,6 +11,7 @@ import { existsSync } from "node:fs";
 import { readdir, readFile, rm, writeFile } from "node:fs/promises";
 import { dirname, join, relative, resolve, sep } from "node:path";
 import { gzipSync } from "node:zlib";
+export { deployCommit, recordDeploy } from "./deploy.js";
 export { detectRelease, lastCommit } from "./release.js";
 const JS = /\.(?:m|c)?js$/;
 const ORPHAN_MAP = /\.(?:(?:m|c)?js|css)\.map$/;

package/dist/cli.js

@@ -1,7 +1,6 @@
 // bertha deploy | bertha sourcemaps upload <dir>
 import { parseArgs } from "node:util";
-import { detectRelease, lastCommit, processDirectory, reason } from "./build/index.js";
-import { envCommit } from "./core/env.js";
+import { deployCommit, detectRelease, processDirectory, recordDeploy } from "./build/index.js";
 import { VERSION } from "./core/version.js";
 const HELP = `bertha ${VERSION}
 
@@ -50,28 +49,13 @@ export async function main(argv, out = console.log) {
             return out("Set BERTHA_URL and BERTHA_UPLOAD_KEY, or pass --url and --key."), 1;
         if (!release)
             return out("No release found. Pass --release or set BERTHA_RELEASE."), 1;
-        const body = { release, environment: v.env ?? "production" };
+        const environment = v.env ?? "production";
         // Without a checkout (a host's build step), the host still names the commit.
-        const sha = envCommit();
-        const commit = lastCommit() ?? (sha ? { sha, message: "", author: "" } : undefined);
-        if (commit)
-            body.commit = commit;
-        try {
-            const res = await fetch(`${url.replace(/\/+$/, "")}/ingest/v1/deploys`, {
-                method: "POST",
-                headers: { authorization: `Bearer ${key}`, "content-type": "application/json" },
-                body: JSON.stringify(body),
-                signal: AbortSignal.timeout(30_000),
-            });
-            if (!res.ok)
-                return out(`bertha didn't record the deploy: ${await reason(res)}`), 1;
-            const recorded = (await res.json());
-            out(`Recorded ${release} in ${body.environment} (${recorded.releaseId}).`);
-            return 0;
-        }
-        catch (e) {
-            return out(`Couldn't reach bertha at ${url}: ${e.message}`), 1;
-        }
+        const r = await recordDeploy({ url, uploadKey: key, release, environment, commit: deployCommit() });
+        if (!r.ok)
+            return out(r.message), 1;
+        out(`Recorded ${release} in ${environment} (${r.releaseId}).`);
+        return 0;
     }
     if (command === "sourcemaps" && rest[0] === "upload") {
         const dir = rest[1];

package/dist/core/client.d.ts

@@ -5,12 +5,18 @@ export declare const BATCH = 100;
 type Context = IngestEvent["context"];
 /** Adds source lines to frames, where the runtime can read the files. */
 export type AddContext = (frames: IngestFrame[]) => void;
+/** Adds what the runtime knows at capture time (the page, its state). Runs before scrubbing. */
+export type Enrich = (event: IngestEvent) => void;
+/** Reads a framework's request passed as `req`. Server entries only, to keep the browser small. */
+export type ReadRequest = (req: unknown) => CaptureContext;
 export declare class Client {
     readonly options: Options;
     private readonly transport;
     private readonly sdk;
     private readonly context;
     private readonly addContext;
+    private readonly enrich;
+    private readonly readRequest;
     private user;
     private tags;
     private crumbs;
@@ -21,7 +27,7 @@ export declare class Client {
     private window;
     private pausedUntil;
     private warned;
-    constructor(options: Options, transport: Transport, sdk: IngestSdk, context?: Context, addContext?: AddContext);
+    constructor(options: Options, transport: Transport, sdk: IngestSdk, context?: Context, addContext?: AddContext, enrich?: Enrich, readRequest?: ReadRequest);
     captureException(error: unknown, ctx?: CaptureContext): string | undefined;
     captureMessage(message: string, ctx?: CaptureContext): string | undefined;
     setUser(user: IngestUser | null): void;

package/dist/core/client.js

@@ -3,18 +3,25 @@
 import { builtRelease, debugIdsFor } from "./debug-ids.js";
 import { scrubText, scrubUrl } from "./scrub.js";
 import { parseStack } from "./stack.js";
+import { versions } from "./versions.js";
 export const MAX_BREADCRUMBS = 100;
 export const BATCH = 100;
 const DEBOUNCE_MS = 1000;
 const PER_MINUTE = 100;
 const MAX_CAUSES = 5;
 const RETRIES = 3;
+const DATA_FIELDS = 20;
+const DATA_CHARS = 500;
+/** Error fields dropped while scrubbing. */
+const SENSITIVE_KEY = /password|passwd|secret|token|authorization|cookie|api_?key|credential|session/i;
 export class Client {
     options;
     transport;
     sdk;
     context;
     addContext;
+    enrich;
+    readRequest;
     user;
     tags;
     crumbs = [];
@@ -25,12 +32,14 @@ export class Client {
     window = { start: 0, count: 0 };
     pausedUntil = 0;
     warned = false;
-    constructor(options, transport, sdk, context, addContext) {
+    constructor(options, transport, sdk, context, addContext, enrich, readRequest) {
         this.options = options;
         this.transport = transport;
         this.sdk = sdk;
         this.context = context;
         this.addContext = addContext;
+        this.enrich = enrich;
+        this.readRequest = readRequest;
         this.tags = { ...options.tags };
     }
     captureException(error, ctx = {}) {
@@ -41,6 +50,8 @@ export class Client {
             this.seen.add(error);
         }
         const exception = toException(error, 0);
+        if (ctx.componentStack)
+            exception.componentStack = ctx.componentStack;
         if (this.addContext) {
             try {
                 for (let x = exception; x; x = x.cause)
@@ -50,10 +61,12 @@ export class Client {
                 this.log("couldn't read source lines", e);
             }
         }
-        return this.capture({ exception, level: ctx.level ?? "error" }, ctx);
+        const mechanism = ctx.mechanism ?? { handler: "captureException", handled: true };
+        return this.capture({ exception, mechanism, level: ctx.level ?? "error" }, ctx);
     }
     captureMessage(message, ctx = {}) {
-        return this.capture({ message, level: ctx.level ?? "warning" }, ctx);
+        const mechanism = ctx.mechanism ?? { handler: "captureMessage", handled: true };
+        return this.capture({ message, mechanism, level: ctx.level ?? "warning" }, ctx);
     }
     setUser(user) {
         this.user = user ?? undefined;
@@ -90,6 +103,9 @@ export class Client {
         if (++this.window.count > PER_MINUTE)
             return undefined;
         const id = uuid();
+        const fromReq = (ctx.req !== undefined && this.readRequest?.(ctx.req)) || {};
+        const request = ctx.request ?? fromReq.request;
+        const user = fromReq.user || ctx.user ? { ...fromReq.user, ...ctx.user } : undefined;
         let event = {
             ...base,
             id,
@@ -97,12 +113,19 @@ export class Client {
             release: o.release ?? builtRelease(),
             environment: o.environment,
             breadcrumbs: this.crumbs.slice(),
-            user: this.user,
-            context: this.context,
+            user: user ? { ...this.user, ...user } : this.user,
+            context: { ...this.context, versions: { ...versions(), ...o.versions, ...this.context?.versions } },
             tags: { ...this.tags, ...ctx.tags },
             fingerprint: ctx.fingerprint,
-            request: ctx.request,
+            request: request && ctx.status !== undefined ? { ...request, status: ctx.status } : request,
+            trace: ctx.trace ?? fromReq.trace,
         };
+        try {
+            this.enrich?.(event);
+        }
+        catch (e) {
+            this.log("couldn't read the page's state", e);
+        }
         if (o.scrub !== false)
             scrubEvent(event);
         if (event.exception)
@@ -169,10 +192,34 @@ export function toException(error, depth) {
         message: String(e.message ?? ""),
         frames: parseStack(e.stack),
     };
+    const data = ownFields(e);
+    if (data)
+        out.data = data;
     if (e.cause !== undefined && depth < MAX_CAUSES)
         out.cause = toException(e.cause, depth + 1);
     return out;
 }
+/** The error's own fields (`code`, `status`, a response…), each as JSON. */
+function ownFields(e) {
+    let out;
+    let n = 0;
+    for (const key of Object.keys(e)) {
+        if (key === "name" || key === "message" || key === "stack" || key === "cause")
+            continue;
+        if (n++ >= DATA_FIELDS)
+            break;
+        let text;
+        try {
+            text = JSON.stringify(e[key]) ?? String(e[key]);
+        }
+        catch {
+            text = String(e[key]);
+        }
+        ;
+        (out ??= {})[key] = text.length > DATA_CHARS ? `${text.slice(0, DATA_CHARS - 1)}…` : text;
+    }
+    return out;
+}
 function isErrorLike(v) {
     return !!v && typeof v === "object" && "message" in v && "stack" in v;
 }
@@ -194,11 +241,19 @@ function* files(e) {
 function scrubEvent(e) {
     if (e.message)
         e.message = scrubText(e.message);
-    for (let x = e.exception; x; x = x.cause)
+    for (let x = e.exception; x; x = x.cause) {
         x.message = scrubText(x.message);
+        if (x.data) {
+            x.data = Object.fromEntries(Object.entries(x.data)
+                .filter(([k]) => !SENSITIVE_KEY.test(k))
+                .map(([k, v]) => [k, scrubText(v)]));
+        }
+    }
     e.breadcrumbs = e.breadcrumbs?.map((b) => ({ ...b, message: scrubText(b.message) }));
     if (e.request)
         e.request = { ...e.request, url: scrubUrl(e.request.url) };
+    if (e.context?.referrer)
+        e.context = { ...e.context, referrer: scrubUrl(e.context.referrer) };
 }
 export function uuid() {
     // randomUUID is missing on plain-http pages.

package/dist/core/request.d.ts

@@ -0,0 +1,12 @@
+import type { CaptureContext } from "./types.ts";
+/**
+ * The request an error happened in: its headers without credentials, the client's IP
+ * (the first proxy hop, else the socket) and the trace from an incoming `traceparent`.
+ */
+export declare function fromRequest(method: string, url: string, headers: Record<string, unknown>, remoteAddress?: string): CaptureContext;
+/**
+ * The same from a framework's own request: Node's `IncomingMessage`, Express's `req`,
+ * Koa's `ctx` or `ctx.req`, or a Fetch `Request` (edge, Hono's `c.req.raw`). Anything
+ * else gives nothing.
+ */
+export declare function fromAnyRequest(req: unknown): CaptureContext;

package/dist/core/request.js

@@ -0,0 +1,54 @@
+// The request a server-side error happened in, from its method, URL and headers.
+import { parseTraceparent } from "./trace.js";
+/** Never sent: they'd let anyone reading the event act as the user. */
+const CREDENTIAL_HEADERS = new Set(["authorization", "proxy-authorization", "cookie", "set-cookie", "x-api-key"]);
+const HEADERS = 30;
+const HEADER_CHARS = 512;
+/**
+ * The request an error happened in: its headers without credentials, the client's IP
+ * (the first proxy hop, else the socket) and the trace from an incoming `traceparent`.
+ */
+export function fromRequest(method, url, headers, remoteAddress) {
+    const kept = {};
+    let n = 0;
+    for (const [k, raw] of Object.entries(headers)) {
+        const key = k.toLowerCase();
+        const value = Array.isArray(raw) ? raw.join(", ") : typeof raw === "string" ? raw : undefined;
+        if (value === undefined || CREDENTIAL_HEADERS.has(key))
+            continue;
+        if (n++ >= HEADERS)
+            break;
+        kept[key] = value.length > HEADER_CHARS ? `${value.slice(0, HEADER_CHARS - 1)}…` : value;
+    }
+    const ip = kept["x-forwarded-for"]?.split(",")[0]?.trim() || remoteAddress;
+    const ctx = { request: { method, url, headers: kept } };
+    if (ip)
+        ctx.user = { ip };
+    const trace = parseTraceparent(kept.traceparent);
+    if (trace)
+        ctx.trace = trace;
+    return ctx;
+}
+/**
+ * The same from a framework's own request: Node's `IncomingMessage`, Express's `req`,
+ * Koa's `ctx` or `ctx.req`, or a Fetch `Request` (edge, Hono's `c.req.raw`). Anything
+ * else gives nothing.
+ */
+export function fromAnyRequest(req) {
+    const r = req;
+    if (!r || typeof r !== "object" || typeof r.method !== "string" || !r.headers || typeof r.headers !== "object")
+        return {};
+    let headers;
+    if (typeof r.headers.forEach === "function") {
+        headers = {};
+        r.headers.forEach((v, k) => (headers[k] = v));
+    }
+    else
+        headers = r.headers;
+    const path = typeof r.originalUrl === "string" ? r.originalUrl : typeof r.url === "string" ? r.url : "/";
+    const first = (v) => (typeof v === "string" ? v.split(",")[0]?.trim() : undefined);
+    const host = first(headers.host) ?? first(headers.Host);
+    const proto = first(headers["x-forwarded-proto"]) ?? "http";
+    const url = host && path.startsWith("/") ? `${proto}://${host}${path}` : path;
+    return fromRequest(r.method, url, headers, r.socket?.remoteAddress);
+}

package/dist/core/stack.js

@@ -40,7 +40,9 @@ function cleanFunction(fn) {
         return undefined;
     return name;
 }
+/** Safari masks extension and injected scripts as `webkit-masked-url://hidden/`. */
+const EXTENSION = /^(?:webkit-masked-url|safari-(?:web-)?extension|chrome-extension|moz-extension|ms-browser-extension):\/\//;
 /** Library code: the server decides the rest from the path. */
 export function isLibrary(file) {
-    return file.includes("/node_modules/") || file.startsWith("node:") || file.startsWith("internal/");
+    return file.includes("/node_modules/") || file.startsWith("node:") || file.startsWith("internal/") || EXTENSION.test(file);
 }

package/dist/core/trace.d.ts

@@ -0,0 +1,6 @@
+import type { IngestTrace } from "../generated/ingest.ts";
+/** `n` random lowercase hex characters, never all zeros (the spec's invalid id). */
+export declare function randomHex(n: number): string;
+export declare function traceparent(traceId: string, spanId: string): string;
+/** The incoming request's trace: its trace id, and the caller's span. */
+export declare function parseTraceparent(header: string | undefined): IngestTrace | undefined;

package/dist/core/trace.js

@@ -0,0 +1,25 @@
+// W3C trace context (`traceparent: 00-<trace id>-<span id>-<flags>`), so a page's
+// requests and the server errors they cause share a trace id.
+const TRACEPARENT = /^[\da-f]{2}-([\da-f]{32})-([\da-f]{16})-[\da-f]{2}$/;
+/** `n` random lowercase hex characters, never all zeros (the spec's invalid id). */
+export function randomHex(n) {
+    const bytes = new Uint8Array(n / 2);
+    const c = globalThis.crypto;
+    if (c?.getRandomValues)
+        c.getRandomValues(bytes);
+    else
+        for (let i = 0; i < bytes.length; i++)
+            bytes[i] = Math.floor(Math.random() * 256);
+    bytes[0] ||= 1;
+    return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+export function traceparent(traceId, spanId) {
+    return `00-${traceId}-${spanId}-01`;
+}
+/** The incoming request's trace: its trace id, and the caller's span. */
+export function parseTraceparent(header) {
+    const m = header && TRACEPARENT.exec(header.trim().toLowerCase());
+    if (!m || /^0+$/.test(m[1]) || /^0+$/.test(m[2]))
+        return undefined;
+    return { traceId: m[1], spanId: m[2] };
+}

package/dist/core/types.d.ts

@@ -1,5 +1,5 @@
-import type { IngestBreadcrumb, IngestEvent, IngestLevel, IngestUser } from "../generated/ingest.ts";
-export type { IngestBreadcrumb, IngestEvent, IngestLevel, IngestUser };
+import type { IngestBreadcrumb, IngestEvent, IngestLevel, IngestMechanism, IngestTrace, IngestUser } from "../generated/ingest.ts";
+export type { IngestBreadcrumb, IngestEvent, IngestLevel, IngestMechanism, IngestTrace, IngestUser };
 export interface Options {
     /** The project's ingest key. Public: safe to ship to browsers. */
     key: string;
@@ -19,12 +19,29 @@ export interface Options {
     tags?: Record<string, string>;
     /** Log what the SDK does to the console. */
     debug?: boolean;
+    /** Framework versions on every event, e.g. `{ vue: "3.5.0" }`. React and Next.js are found by themselves. */
+    versions?: Record<string, string>;
 }
 export interface CaptureContext {
     level?: IngestLevel;
     tags?: Record<string, string>;
     fingerprint?: string[];
     request?: IngestEvent["request"];
+    /**
+     * The framework's request: Node's `IncomingMessage`, Express's `req`, Koa's `ctx`, or a
+     * Fetch `Request`. Its method, URL, headers (never credentials), the client IP and an
+     * incoming `traceparent` are sent. `request`, `user` and `trace` win over what it gives.
+     */
+    req?: unknown;
+    /** The response status, sent with the request. */
+    status?: number;
+    /** Merged over the user from `setUser`. */
+    user?: IngestUser;
+    /** How the error reached the SDK. Defaults to `captureException`, handled. */
+    mechanism?: IngestMechanism;
+    trace?: IngestTrace;
+    /** React's component stack, from an error boundary. */
+    componentStack?: string;
 }
 /** What a send came back with; "offline" means it never reached bertha. */
 export type SendResult = {

package/dist/core/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.4.1";
+export declare const VERSION = "0.5.1";

package/dist/core/version.js

@@ -1 +1 @@
-export const VERSION = "0.4.1";
+export const VERSION = "0.5.1";

package/dist/core/versions.d.ts

@@ -0,0 +1,2 @@
+export declare function registerVersion(name: string, version: string | undefined): void;
+export declare function versions(): Record<string, string>;

package/dist/core/versions.js

@@ -0,0 +1,12 @@
+// Framework versions found at runtime (React from its entry, Next.js from the page),
+// shared through globalThis so a second copy of the SDK in the bundle sees them too.
+const KEY = "__berthaVersions";
+export function registerVersion(name, version) {
+    if (!version)
+        return;
+    const g = globalThis;
+    (g[KEY] ??= {})[name] = version;
+}
+export function versions() {
+    return { ...globalThis[KEY] };
+}

package/dist/edge/index.js

@@ -3,6 +3,7 @@
 import { Client } from "../core/client.js";
 import { firstEnv } from "../core/env.js";
 import { setClient } from "../core/hub.js";
+import { fromAnyRequest } from "../core/request.js";
 import { fetchTransport, streamGzip } from "../core/transport.js";
 import { VERSION } from "../core/version.js";
 export { addBreadcrumb, captureException, captureMessage, flush, getClient, setTag, setUser } from "../core/hub.js";
@@ -19,7 +20,7 @@ export function init(options = {}) {
         url,
         release: options.release ?? firstEnv("BERTHA_RELEASE"),
         environment: options.environment ?? firstEnv("BERTHA_ENVIRONMENT", "VERCEL_ENV", "NODE_ENV"),
-    }, fetchTransport({ url, key, gzip: streamGzip }), { name: "bertha.edge", version: VERSION }, { runtime: "Edge" });
+    }, fetchTransport({ url, key, gzip: streamGzip }), { name: "bertha.edge", version: VERSION }, { runtime: "Edge" }, undefined, undefined, fromAnyRequest);
     setClient(client);
     return client;
 }

package/dist/generated/ingest.d.ts

@@ -27,6 +27,41 @@ export type IngestContext = {
     os?: string;
     runtime?: string;
     userAgent?: string;
+    /**
+     * e.g. "1194×702 @2x".
+     */
+    viewport?: string;
+    online?: boolean;
+    /**
+     * Whether the page was visible.
+     */
+    visible?: boolean;
+    /**
+     * `PerformanceNavigationTiming.type`: navigate, reload, back_forward or prerender.
+     */
+    navigation?: string;
+    /**
+     * `navigator.webdriver`.
+     */
+    automated?: boolean;
+    /**
+     * How long the page had been open.
+     */
+    pageAgeMs?: number;
+    referrer?: string;
+    language?: string;
+    timezone?: string;
+    connection?: string;
+    /**
+     * The server host or dyno.
+     */
+    host?: string;
+    /**
+     * Framework and runtime versions, e.g. `{ "react": "18.3.1" }`.
+     */
+    versions?: {
+        [key in string]: string;
+    };
 };
 /**
  * `POST /ingest/v1/deploys`, from CI after a deploy.
@@ -89,6 +124,14 @@ export type IngestEvent = {
     debugIds?: {
         [key in string]: string;
     };
+    /**
+     * How the error reached the SDK.
+     */
+    mechanism?: IngestMechanism;
+    /**
+     * The W3C trace this happened in: the page load, or the incoming `traceparent`.
+     */
+    trace?: IngestTrace;
 };
 export type IngestException = {
     type: string;
@@ -98,6 +141,16 @@ export type IngestException = {
      */
     frames: Array<IngestFrame>;
     cause?: IngestException;
+    /**
+     * The error's own fields (`code`, `status`…), stringified.
+     */
+    data?: {
+        [key in string]: string;
+    };
+    /**
+     * React's component stack, from an error boundary.
+     */
+    componentStack?: string;
 };
 export type IngestFrame = {
     file: string;
@@ -135,10 +188,26 @@ export type IngestHeartbeat = {
     commit?: string;
 };
 export type IngestLevel = "fatal" | "error" | "warning";
+export type IngestMechanism = {
+    /**
+     * The hook: `onerror`, `onunhandledrejection`, `uncaughtException`, `ErrorBoundary`…
+     */
+    handler: string;
+    /**
+     * False when nothing in the app caught it.
+     */
+    handled: boolean;
+};
 export type IngestRequest = {
     method: string;
     url: string;
     status?: number;
+    /**
+     * The incoming request's headers. bertha drops credential headers itself too.
+     */
+    headers?: {
+        [key in string]: string;
+    };
 };
 export type IngestResponse = {
     accepted: number;
@@ -152,6 +221,16 @@ export type IngestSdk = {
     name: string;
     version: string;
 };
+export type IngestTrace = {
+    /**
+     * 32 lowercase hex characters.
+     */
+    traceId: string;
+    /**
+     * 16 lowercase hex characters: the request's span, when there was one.
+     */
+    spanId?: string;
+};
 export type IngestUser = {
     id?: string;
     email?: string;

package/dist/next/config.d.ts

@@ -8,6 +8,11 @@ export interface BerthaNextOptions {
     keepMaps?: boolean | ((file: string) => boolean);
     /** Skip the post-build step entirely (the release is still stamped). */
     disableUpload?: boolean;
+    /**
+     * On Vercel, record a deploy after the upload, in VERCEL_ENV's environment. On by
+     * default; turn it off when CI already runs `bertha deploy`.
+     */
+    recordDeploy?: boolean;
 }
 export declare const keepServerMaps: (file: string) => boolean;
 export declare function withBertha<C extends object>(config?: C, options?: BerthaNextOptions): C;

package/dist/next/config.js

@@ -2,10 +2,11 @@
 //   export default withBertha(nextConfig)
 // Turns on source maps for production builds, stamps the release and environment
 // (BERTHA_ENVIRONMENT, else Vercel's production or preview), and after each
-// build gives bundles debug ids, uploads the maps and removes them from `.next`.
+// build gives bundles debug ids, uploads the maps and removes them from `.next`. On
+// Vercel it then records the deploy, with the commit Vercel names.
 import { join } from "node:path";
-import { detectRelease, processDirectory } from "../build/index.js";
-import { firstEnv } from "../core/env.js";
+import { deployCommit, detectRelease, processDirectory, recordDeploy } from "../build/index.js";
+import { env, firstEnv } from "../core/env.js";
 export const keepServerMaps = (file) => !file.startsWith("static/");
 export function withBertha(config = {}, options = {}) {
     const c = config;
@@ -27,15 +28,25 @@ export function withBertha(config = {}, options = {}) {
                 await previous?.(meta);
                 if (options.disableUpload)
                     return;
+                const url = firstEnv("BERTHA_URL", "NEXT_PUBLIC_BERTHA_URL");
+                const uploadKey = firstEnv("BERTHA_UPLOAD_KEY");
                 await processDirectory({
                     dir: meta.distDir ?? join(meta.projectDir, ".next"),
                     release,
-                    url: firstEnv("BERTHA_URL", "NEXT_PUBLIC_BERTHA_URL"),
-                    uploadKey: firstEnv("BERTHA_UPLOAD_KEY"),
+                    url,
+                    uploadKey,
                     keepMaps: options.keepMaps ?? keepServerMaps,
                     skip: ["cache", "standalone", "types"],
                     log: (m) => console.log(`[bertha] ${m}`),
                 }).catch((e) => console.warn(`[bertha] Source maps weren't processed: ${String(e)}`));
+                if (env("VERCEL") !== "1" || options.recordDeploy === false || !url || !uploadKey || !release)
+                    return;
+                const deployedTo = environment ?? "production";
+                const r = await recordDeploy({ url, uploadKey, release, environment: deployedTo, commit: deployCommit(meta.projectDir) });
+                if (r.ok)
+                    console.log(`[bertha] Recorded ${release} in ${deployedTo} (${r.releaseId}).`);
+                else
+                    console.warn(`[bertha] ${r.message}`);
             },
         },
     };

package/dist/next/index.js

@@ -1,6 +1,7 @@
 // @bigbertha/sdk/next, for instrumentation.ts:
 //   export { register, onRequestError } from "@bigbertha/sdk/next"
 import { captureException, flush } from "../core/hub.js";
+import { fromRequest } from "../core/request.js";
 export async function register() {
     if (process.env.NEXT_RUNTIME === "nodejs")
         (await import("../node/index.js")).init();
@@ -11,9 +12,11 @@ export async function register() {
 export async function onRequestError(error, request, context) {
     const host = header(request.headers.host);
     const proto = header(request.headers["x-forwarded-proto"]) ?? "https";
+    const url = host ? `${proto}://${host}${request.path}` : request.path;
     captureException(error, {
-        request: { method: request.method, url: host ? `${proto}://${host}${request.path}` : request.path },
+        ...fromRequest(request.method, url, request.headers),
         tags: { route: context.routePath, routeType: context.routeType },
+        mechanism: { handler: "onRequestError", handled: false },
     });
     await flush();
 }

package/dist/node/index.js

@@ -1,11 +1,13 @@
 // @bigbertha/sdk/node: uncaught exceptions and unhandled rejections, source lines from
 // disk, a heartbeat so quiet hours read as "no errors" rather than "no data", and a
 // handler wrapper.
-import { arch, platform } from "node:os";
+import { createRequire } from "node:module";
+import { arch, hostname, platform } from "node:os";
 import { gzipSync } from "node:zlib";
 import { Client } from "../core/client.js";
 import { envCommit, firstEnv } from "../core/env.js";
 import { getClient, setClient } from "../core/hub.js";
+import { fromAnyRequest } from "../core/request.js";
 import { endpoint, fetchTransport } from "../core/transport.js";
 import { VERSION } from "../core/version.js";
 import { addContext } from "./context.js";
@@ -32,7 +34,12 @@ export function init(options = {}) {
         release: options.release ?? firstEnv("BERTHA_RELEASE"),
         environment: options.environment ?? firstEnv("BERTHA_ENVIRONMENT", "VERCEL_ENV", "NODE_ENV"),
     };
-    const client = new Client(opts, fetchTransport({ url, key, gzip: async (body) => new Uint8Array(gzipSync(body)) }), { name: "bertha.node", version: VERSION }, { runtime: `Node ${process.versions.node}`, os: `${platform()} ${arch()}` }, options.contextLines === false ? undefined : addContext);
+    const client = new Client(opts, fetchTransport({ url, key, gzip: async (body) => new Uint8Array(gzipSync(body)) }), { name: "bertha.node", version: VERSION }, {
+        runtime: `Node ${process.versions.node}`,
+        os: `${platform()} ${arch()}`,
+        host: process.env.DYNO ?? safe(hostname),
+        versions: installedVersions(),
+    }, options.contextLines === false ? undefined : addContext, undefined, fromAnyRequest);
     setClient(client);
     // Only V8's default: a limit the app set itself was a choice.
     if (Error.stackTraceLimit === V8_DEFAULT_FRAMES)
@@ -71,7 +78,7 @@ function appHandles(event) {
 /** Reports, flushes and then, if the app isn't handling it, exits as Node would have. */
 async function crash(event, error) {
     const client = getClient();
-    client?.captureException(error, { level: "fatal" });
+    client?.captureException(error, { level: "fatal", mechanism: { handler: event, handled: false } });
     await Promise.race([client?.flush(), new Promise((r) => setTimeout(r, EXIT_FLUSH_MS).unref())]);
     if (appHandles(event))
         return;
@@ -99,7 +106,7 @@ export async function sendHeartbeat(o) {
 export function wrapHandler(handler) {
     return function (...args) {
         const report = (error) => {
-            getClient()?.captureException(error, requestContext(args[0]));
+            getClient()?.captureException(error, { req: args[0], mechanism: { handler: "wrapHandler", handled: false } });
             throw error;
         };
         try {
@@ -111,12 +118,25 @@ export function wrapHandler(handler) {
         }
     };
 }
-function requestContext(req) {
-    const r = req;
-    if (!r || typeof r.method !== "string")
-        return {};
-    const path = r.originalUrl ?? r.url ?? "/";
-    const host = typeof r.headers?.host === "string" ? r.headers.host : undefined;
-    const proto = typeof r.headers?.["x-forwarded-proto"] === "string" ? r.headers["x-forwarded-proto"] : "http";
-    return { request: { method: r.method, url: host && path.startsWith("/") ? `${proto}://${host}${path}` : path } };
+/** Node's version, and Next.js's when the app has it installed. */
+function installedVersions() {
+    const out = { node: process.versions.node };
+    try {
+        const require = createRequire(`${process.cwd()}/`);
+        const next = require("next/package.json").version;
+        if (next)
+            out.next = next;
+    }
+    catch {
+        // Not a Next.js app, or bundled without its package.json.
+    }
+    return out;
+}
+function safe(f) {
+    try {
+        return f();
+    }
+    catch {
+        return undefined;
+    }
 }

package/dist/react/index.d.ts

@@ -0,0 +1,30 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+export interface FallbackProps {
+    error: unknown;
+    /** The reported event's id, or undefined when it wasn't sent. */
+    eventId: string | undefined;
+    /** Renders the children again. */
+    reset: () => void;
+}
+export interface ErrorBoundaryProps {
+    children?: ReactNode;
+    /** Shown in place of the children after an error. Nothing by default. */
+    fallback?: ReactNode | ((props: FallbackProps) => ReactNode);
+    /** Called after the error is reported. */
+    onError?: (error: unknown, componentStack: string | undefined, eventId: string | undefined) => void;
+    /** Tags on the reported event, e.g. which part of the page this boundary wraps. */
+    tags?: Record<string, string>;
+}
+interface State {
+    caught: boolean;
+    error: unknown;
+    eventId: string | undefined;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
+    state: State;
+    static getDerivedStateFromError(error: unknown): Partial<State>;
+    componentDidCatch(error: unknown, info: ErrorInfo): void;
+    reset: () => void;
+    render(): ReactNode;
+}
+export {};

package/dist/react/index.js

@@ -0,0 +1,33 @@
+// @bigbertha/sdk/react: an error boundary that reports what it catches with React's
+// component stack. Importing it also puts React's version on every event.
+//   <ErrorBoundary fallback={<p>Something went wrong.</p>}><App /></ErrorBoundary>
+import { Component, version } from "react";
+import { captureException } from "../core/hub.js";
+import { registerVersion } from "../core/versions.js";
+registerVersion("react", version);
+const CLEAR = { caught: false, error: undefined, eventId: undefined };
+export class ErrorBoundary extends Component {
+    state = CLEAR;
+    static getDerivedStateFromError(error) {
+        return { caught: true, error };
+    }
+    componentDidCatch(error, info) {
+        const componentStack = info.componentStack ?? undefined;
+        const eventId = captureException(error, {
+            mechanism: { handler: "ErrorBoundary", handled: true },
+            componentStack,
+            tags: this.props.tags,
+        });
+        this.setState({ eventId });
+        this.props.onError?.(error, componentStack, eventId);
+    }
+    reset = () => this.setState(CLEAR);
+    render() {
+        if (!this.state.caught)
+            return this.props.children;
+        const f = this.props.fallback;
+        if (typeof f === "function")
+            return f({ error: this.state.error, eventId: this.state.eventId, reset: this.reset });
+        return f ?? null;
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bigbertha/sdk",
-  "version": "0.4.1",
-  "description": "Error reporting for bertha: browser, Node, edge and Next.js, with source maps by debug id.",
+  "version": "0.5.1",
+  "description": "Error reporting for bertha: browser, React, Node, edge and Next.js, with source maps by debug id.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -12,6 +12,7 @@
   "keywords": [
     "error-tracking",
     "bertha",
+    "react",
     "nextjs",
     "vite",
     "source-maps"
@@ -21,7 +22,8 @@
   },
   "type": "module",
   "sideEffects": [
-    "./dist/next/client.js"
+    "./dist/next/client.js",
+    "./dist/react/index.js"
   ],
   "files": [
     "dist"
@@ -31,6 +33,7 @@
   },
   "exports": {
     "./browser": "./dist/browser/index.js",
+    "./react": "./dist/react/index.js",
     "./node": "./dist/node/index.js",
     "./edge": "./dist/edge/index.js",
     "./next": "./dist/next/index.js",
@@ -45,6 +48,9 @@
       "browser": [
         "dist/browser/index.d.ts"
       ],
+      "react": [
+        "dist/react/index.d.ts"
+      ],
       "node": [
         "dist/node/index.d.ts"
       ],
@@ -71,6 +77,14 @@
   "engines": {
     "node": ">=20"
   },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && chmod +x dist/bin.js",
     "check": "tsc -p tsconfig.json",
@@ -80,7 +94,9 @@
   },
   "devDependencies": {
     "@types/node": "^24.13.3",
+    "@types/react": "^19.3.0",
     "esbuild": "^0.27.0",
+    "react": "^19.3.1",
     "typescript": "~6.0.2",
     "vite": "^8.3.4",
     "vitest": "^4.0.0"