v1.4·Cloud sharing is here

Bug reports your dev can actually open

One click 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 — free
  • Stays on your machine
  • No account needed
  • Works offline
  • MIT open source
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

Drops into any front-end — 2 lines, zero runtime dependencies

ReactNext.jsVueNuxtAngularSvelteSvelteKitRemixAstroViteSolidPlain HTMLReactNext.jsVueNuxtAngularSvelteSvelteKitRemixAstroViteSolidPlain HTML
Interactive demo

See it in action

Watch TraceBug capture a bug, find the root cause, and create a GitHub issue — in seconds.

Loading interactive demo…
11-second interactive walkthrough
Plays automatically · no install needed
The solution

Everything your dev needs, in one file

Logs, network calls, screenshots, user actions — bundled into a single offline .html file. No accounts. No lock-in.

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

Clicks

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

Network

Method, URL, status, duration — failures flagged

Console

Errors, stack traces, source file, line

Screenshots

html2canvas · annotate · draw markup

Navigation

Every route, timestamp, time on page

Environment

Browser, OS, viewport, device, connection

The differentiator

Know the cause instantly

No digging through logs. No guessing. TraceBug's root-cause engine reads the signals and tells you what likely went wrong — every time you capture a bug.

🐛Checkout: “Place Order” Fails — 500 Server Error
🔍 Possible causehigh confidence

API POST /orders failed with 500 after clicking ‘Place Order’

Endpoint
POST /api/orders
User clicked
‘Place Order’ button
Page
/checkout

Every bug report opens with this line. Developers know exactly where to look — no DevTools, no back-and-forth.

High confidence

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

Network failure + click context

Medium confidence

TypeError suggests undefined/null data — the response or upstream value was likely missing

Runtime error, no network failure

Low confidence

Click on 'Submit' did not trigger any observable effect

Only a click, no downstream signal

No digging through logs. No guessing. Just clarity.

Features

Built to make debugging effortless

Everything between “I found a bug” and “here's a fully-filled GitHub issue” — automated.

Core

Instant capture

Report a bug in 2 clicks with Ctrl+Shift+B. No menus, no forms — the modal opens pre-filled with title, summary, and a root-cause hint.

Recording

Sentry Mode — rolling video buffer

Hit Record once, file as many tickets as you want from one screen-share. Timestamped comments, auto-capture on error.

QA

Auto-Scanner

Six in-browser detectors: a11y (axe-core), broken images, mixed content, JS errors, failed APIs, slow APIs — each with Locate + File ticket.

Visual

Screenshots & annotation

Full-page or drag-region capture via html2canvas. Annotate with rectangles, arrows, and text. Clickable numbered badges.

Voice

Voice bug descriptions

Describe the bug out loud — Web Speech API transcribes it, no typing, no API keys. Auto-saved to the report.

Export

One-click GitHub & Jira

Export a fully-formatted GitHub Issue or Jira ticket — steps, console errors, network log, environment, and screenshots. Screenshots and the .webm auto-download as you paste.

Workflow

User ID & bug flagging

Attribute bugs with setUser(), flag sessions with markAsBug(), get a Slack-ready 2-sentence summary with getCompactReport().

Extensible

Plugins & hooks

Extend without forking — filter events, enrich reports, fire webhooks. Subscribe to session:start, error:captured, screenshot:taken.

Privacy

Local-first & private

Sensitive fields auto-redacted. Data stays in localStorage by default — zero backend, no tracking. Cloud sharing is opt-in.

See the full API reference
Live preview

What a real TraceBug report looks like

An actual report generated from the demo “Vendor Update” bug — complete, structured, and ready for a developer.

Vendor Update Fails — TypeError

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

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
How it works

Three steps. No setup.

01

Install

npm install tracebug-sdk

…or add the Chrome extension — no code at all.

02

Capture

Ctrl + Shift + B

…or click the toolbar. The modal opens pre-filled.

03

Share

.html file or share-link URL

Your dev opens it offline — everything's inside.

Comparison

Why not just use existing tools?

Built for speed, not dashboards. See how TraceBug compares to the heavyweight monitoring platforms — and to filing bugs by hand.

TraceBug
Sentry
LogRocket
Instant 2-click bug capture
Automatic root-cause hint
Works with no setup
Free, no account
Data stays in the browser
One-click GitHub / Jira export
Manual bug reporting
With TraceBug
Time to create a report
30–60 min of back-and-forth
Time to create a report
Under 60 seconds
Reproduction steps
Written by hand, often wrong
Reproduction steps
Auto-generated with selectors
Console + network
Usually missing
Console + network
Captured in full, automatically
Dev time to reproduce
3+ days average
Dev time to reproduce
Minutes — it's all in the report
Cost
$80–200/hr of wasted time
Cost
Free, open source

Built for speed. Not dashboards.

Start using TraceBug — free

No account needed · No API keys · Works in 2 minutes

Installation

Get started in under 2 minutes

SDK for developers, Chrome extension for everyone else. Pick what fits your workflow.

1Install
npm install tracebug-sdk
2Initialize
import TraceBug from "tracebug-sdk";

// Add this to your app entry point
TraceBug.init({
  projectId: "my-app",
  enabled: "auto",    // dev + staging only
});

That's it. A floating 🐛 button appears in the corner of your app — click it to open the dashboard, view sessions, and generate bug reports.

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