demo · v140

Breadcrumb Trail

The chromestatus motivation says: "store breadcrumbs of their app state, which get appended to crash reports." Walk through a fake checkout flow — each step records a key. Trigger a renderer fault and watch the breadcrumb trail show up in the Reporting API payload that would be POSTed to your endpoint.

Behind a flag — Chrome 140+

The real navigator.crashReport object lives behind chrome://flags/#enable-experimental-web-platform-features and requires a Reporting-Endpoints header. This page simulates the API surface locally; the keys you set are appended to a mock crash report so you can see the wire shape.

fake checkout app

Click each button to "walk" the user through a checkout. Each click stamps a key into the report buffer.

breadcrumbs (live)

— no steps yet —

accumulated keys

keyvalue
none

crash report payload (what the browser would POST to Reporting-Endpoints):

— no crash simulated yet —
// inside the real app — instrument each route + action
navigator.crashReport.set("checkout.step", "address");
navigator.crashReport.set("checkout.cart_total", "84.50");
navigator.crashReport.set("checkout.cart_currency", "GBP");
navigator.crashReport.set("checkout.ab_bucket", "exp_42");

// any subsequent renderer crash carries these keys in its payload:
// POST /reporting-endpoint
// [{
//   "type": "crash",
//   "body": { "reason": "oom", "checkout.step": "address", ... }
// }]

see also