Live demo report

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

Below are two real tracelane reports — the same artifact your suite writes to ./tracelane-reports/ when a test fails. Each contains the rrweb event stream, the inlined player, the console panel, and the network panel. Fully offline. No server. No backend call.

Playwright report

Produced by @tracelane/playwright. This run drives a two-page checkout flow — a products page, then a checkout page — so you can watch the rrweb replay continue across the navigation (the alpha.2 nav fix; each navigation drops a tracelane.nav boundary in the timeline). Along the way: three 404s on /api/recommendations/<sku>, the console output, and a 500 from /api/checkout that fails the test. Double-click the file — it opens in any browser fully offline, no server, no unzip.

WebdriverIO report

The link below opens an actual tracelane report from a WebdriverIO suite — the same artifact @tracelane/wdio writes on a failing test.

Security-hygiene report

The same tracelane report, with the advisory Security hygiene panel populated. Open it and click the “Security hygiene (advisory)” tab to see the four signals — missing security headers, an insecure cookie, mixed content, and a reverse-tabnabbing link — derived from the captured session. It's advisory, not a security audit or a scanner.

What you're looking at (the WebdriverIO report)

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 the WebdriverIO report 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 WebdriverIO reporter 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.

Each demo report is ~350 KB. They load instantly because all assets are inlined — same constraint your shipped reports operate under (25 MB cap, FullSnapshot preserved on overflow).