v1.7·Root-cause hints in every report

Bug reports your dev can actually open

One shortcut captures the bug — replay, console errors, network calls, and screenshots — into a single .html file. Your dev opens it offline and sees exactly what broke.

Add to Chrome — freeSee it debug with AI
bugs/checkout-500.html
offline
Possible causehigh confidence

API POST /api/orders failed with 500 after clicking 'Place Order'

TL;DR

TypeError on /checkout — Cannot read 'status' of undefined.

Session timeline
  • 00:02click "Cart"
  • 00:04nav → /checkout
  • 00:09click "Place Order"
  • 00:09POST /api/orders → 500
How it works

From bug to fix in three steps

No forms, no back-and-forth, no “cannot reproduce.” Just the bug, captured and handed off.

Step 1

Capture

Hit the shortcut when a bug happens. The full session — replay, console, network, screenshot — is recorded automatically.

Step 2

Share

You get one self-contained report. Send it anywhere — no account, no upload, nothing to set up on the other end.

Step 3

Fix

Your developer opens it offline, sees the root cause first, and knows exactly where to look before scrolling.

Real capture, on film

See it in action

A crash happens, TraceBug catches it live, and one click builds the ticket — console error, failed request, and repro steps attached. Recorded on the live sandbox; nothing staged.

Loading demo…
15 seconds — bug to exported ticket
The real widget, recorded live — no mockups
Now you try — same sandbox, same bugs
One report, everything connected

The whole bug flows into one file — and out to any AI

Replay, console, network, and repro steps land in a single .html. From there, any MCP-connected agent reads it and starts fixing — no uploads, no accounts.

Session replay
Pixel-accurate DOM recording
Console errors
Stack traces included
Network calls
Failing request + payload
Repro steps
Every click, typed & timed
TraceBug report
checkout-500.html
Self-containedOffline
Claude Code
via MCP
Ready
Cursor
via MCP
Ready
Windsurf
via MCP
Ready
Any MCP client
or paste the .html
Ready
Before / after

From “it's broken” to a fixable ticket

Vague reports cost days of back-and-forth. TraceBug records what actually happened — down to the button that was clicked and the request that failed.

Before — a typical bug report
  • “The page is broken”
  • “I don't remember what I clicked”
  • “There was a red error message”

→ 3+ days of back-and-forth

After — a TraceBug report
  • › Click Edit → Select Inactive → Click Update
  • ✕ TypeError: Cannot read 'status' · line 42
  • ⟳ POST /api/vendor → 500 · Chrome 121 · Win 11

→ Fixed in minutes

Captured automatically, every session

Clicks

Tag, id, aria-label, role, data-testid

Network

Method, URL, status, duration — failures flagged

Console

Errors, stack traces, source file, line

Screenshots

Full-page or region · annotate · draw markup

Navigation

Every route, timestamp, time on page

Environment

Browser, OS, viewport, device, connection

The report

What your developer actually receives

A real report, generated from a real bug. It opens with TraceBug's root-cause hint, so the developer knows where to look before scrolling a single line.

Vendor Update Fails — TypeError

Reported: 2026-03-12 14:23:01Session: tb_20260312_142301Duration: 18s
Possible causehigh confidence

API POST /api/vendor/update failed with 500 after clicking 'Update' — the thrown TypeError suggests the response body was missing.

Environment

BrowserChrome 121.0.6167.85
OSWindows 11 Pro
Viewport1920 × 1080
DeviceDesktop
Connection4G — fast
Page/vendor
Events6 captured
Errors1 critical

Steps to reproduce

  1. 1Navigate to /vendor
  2. 2Click “Edit” button (role=button, id=vendor-edit-btn)
  3. 3Select “Inactive” from Status dropdown (was: “Active”)
  4. 4Click “Update” button (type=submit)
  5. 5Observe TypeError thrown in browser console

Console errors

TypeError — Critical
Cannot read properties of undefined (reading 'status')
at updateVendor (vendor/page.tsx:42:18)
at handleSubmit (vendor/page.tsx:67:5)
at onClick (vendor/page.tsx:112:24)

Network log

GET/api/vendor/123200124ms
POST/api/vendor/update50089ms

Session timeline

+0.0s→navigate: / → /vendor
+1.2s●click: button "Edit" [id=vendor-edit-btn]
+2.1s◆select: Status: "Active" → "Inactive"
+3.4s●click: button "Update" [type=submit]
+3.5s⟳api: POST /api/vendor/update → 500
+3.5s✕error: TypeError: Cannot read 'status'
Copy GitHub IssueCopy Jira Ticket Download PDF Download JSON
Model Context Protocol

Hand the bug straight to your AI coding agent

TraceBug exports are agent-ready. Point Claude Code, Cursor, or any MCP client at the report — it reads the console, network, repro steps, and screenshots, then fixes the bug in your codebase. Fully local; nothing is uploaded.

$ claude mcp add tracebug -- npx -y tracebug mcp

One-time setup. No --dir needed — the server auto-finds reports in your Downloads/Desktop.

Step 1

Export

Capture the bug and click Export .html — one self-contained report lands in your Downloads.

Step 2

Connect

Register the local MCP server once (command below). It auto-discovers reports — no path setup.

Step 3

Fix

Your agent reads the console, network, repro steps, and screenshots — then fixes it in your code.

Works withClaude CodeCursorWindsurfVS Code& any MCP client
Runs on your machine over stdio — zero network calls, nothing uploaded.
Read the MCP docs
Comparison

Monitoring platforms watch production. TraceBug files the bug.

Sentry and LogRocket are built for observability — TraceBug complements them for the moment someone hits a bug and needs to hand it to a developer. In that hand-off it does what dedicated bug-reporting tools do, with no account and nothing to upload.

TraceBug
Sentry
LogRocket
Session replay & console capture
Network log with failed requests
2-click capture by anyone on the team
Root-cause hint in every report
Works with zero backend or account
Report is a single offline .html file
One-click GitHub / Jira export
Free and open source (MIT)

Already running Sentry or LogRocket? Keep them — TraceBug lives in the browser and doesn't touch your monitoring stack. It just makes the hand-off to a developer effortless.

Get started

One click to capture. One command to debug with AI.

Install the Chrome extension and capture a bug on any site — no code. Hand the exported report to your AI coding agent through the local MCP server to fix it. Embedding in your own app instead? The SDK is two lines.

Chrome extension

For QA, designers, PMs — anyone who reports bugs. Capture on any site, nothing to add to the codebase.

AI coding agents

Hand the report to Claude Code, Cursor, or any MCP client — it debugs from the real console, network, and repro data.

Install from Chrome Web Store
Google ChromeInstall from Chrome Web Store
Microsoft EdgeChrome extensions work natively
BraveChrome extensions work natively
OperaAdd “Install Chrome Extensions” first
—FirefoxNot supported yet — use the npm SDK
—SafariNot supported — use the npm SDK
Free · No account

Ship better bug reports today

Install in 30 seconds. Works in any front-end framework. Your data stays yours.

Add to Chrome — free npm install tracebug-sdk