Live demo report

A real tracelane .html, exactly as it lands on a CI runner's filesystem when a test fails.

The link below opens an actual tracelane report — the same artifact your suite writes to ./tracelane-reports/ when a test fails. It contains the rrweb event stream, the inlined player, the console panel, and the network panel. Fully offline. No server. No backend call.

What you're looking at

This report comes from a WebdriverIO test driving a small same-origin fixture "Acme Tools" — a fake shop that emulates a real end-to-end flow: sign in → browse products → add three items to the cart → click checkout. Three deliberate API failures fire along the way:

• GET /api/notifications → 503 (notification-service-degraded)
• GET /api/recommendations/<sku> → 404 (three times, one per product)
• POST /api/checkout → 500 — the headline failure (payment-gateway-timeout)

The test's assertion expects the success message that never appears, so it fails and tracelane writes this report. Eleven captured network requests, five console events (warns + the full 500 error body), the complete DOM history. Real rrweb capture, real failure stack, real-time playback.

Try the player

• Scrub the timeline at the bottom — drag the playhead to any point in the test run. The DOM rewinds with you.
• Click the speed control (lower-left of the player). Speed up for long-running setups; slow down to spot the exact frame a regression appeared.
• Open the Console panel on the right. Every console.* call from the page is in there, including the full 500 response body the SPA received from /api/checkout.
• Open the Network panel. All five failed responses are surfaced with method, URL, status, and timing — the same metadata you'd attach to a bug ticket.
• Hit the “Copy as Markdown for AI” button in the metadata header. It serialises the report's essential context into a clipboard-ready block you can paste into Claude Code / Cursor / Cline for AI-assisted debugging.

How this was captured

Same setup any user runs — npx @tracelane/cli init wires @tracelane/wdio into the project; the new framework-agnostic network plugin in @cubenest/rrweb-core captures fetch + XHR + PerformanceObserver entries directly in-page (no CDP dependency). One HTML file written on the assertion miss. Local fixture path (http://127.0.0.1:<port>) sed-redacted to acme-shop.demo before commit so the public demo doesn't leak the test author's machine.

Get the real thing into your CI

Inside a WebdriverIO project, one command wires the Service + creates the reports directory + ignores it in git:

cd your-wdio-project
npx @tracelane/cli init

Or wire it by hand — see Getting started.

The demo report file is ~167 KB. It loads instantly because all assets are inlined — same constraint your shipped reports operate under (25 MB cap, FullSnapshot preserved on overflow).