Zero Backend • Browser Only • Free

Debug Bugs in Seconds
Not Hours

TraceBug records user actions, console errors, network calls, and screenshots to generate developer-ready bug reports automatically. No backend needed.

Install Chrome ExtensionView on GitHub
Works with React, Vue, Angular, Next.js
Zero runtime dependencies
Privacy-first, data stays in browser
TraceBug — Session #tb_20260312_142301
Recording
── Session Timeline ──────────────────────
+0.0s→
navigate /vendor
+1.2s●
click "Edit" button [role=button]
+2.1s◆
select Status: "Active" → "Inactive"
+3.4s●
click "Update" button [type=submit]
+3.5s⟳
fetch POST /api/vendor/update — 500
+3.5s✕
error TypeError: Cannot read 'status'
── Auto-Generated Report ─────────────────
✓ 6 events captured
✓ 1 error detected — TypeError
✓ Reproduction steps ready
Bug Title (auto-generated):
🐛 Vendor Update Fails — TypeError
The Problem

Traditional Bug Reporting is Broken

Testers find bugs but developers can't reproduce them. The result? Days of back-and-forth that kills productivity.

#bugs-and-issuesSlack workspace
S
Sarah (QA)2:14 PM
Hey, the vendor page is broken again 😤
A
Alex (Dev)2:15 PM
What do you mean? Works for me. What exactly happened?
S
Sarah (QA)2:16 PM
I clicked something and it showed an error. It stopped working.
A
Alex (Dev)2:17 PM
What did you click? What browser are you using? Can you reproduce it?
S
Sarah (QA)2:18 PM
I don't remember exactly what I clicked... I think it was the edit button? Or maybe save?
A
Alex (Dev)2:31 PM
I've been trying to reproduce this for 15 min. I need the exact steps. Did you see any error message?
S
Sarah (QA)2:45 PM
I didn't copy it down, sorry. Let me try again and see if it happens...
3 days later...
A
Alex (Dev)5 days later
Still can't reproduce this. Closing as 'cannot reproduce'. Please reopen if you see it again.
3+ days
Average time to reproduce a bug
40%
of dev time spent on debugging
60%
of bug reports are "cannot reproduce"
$10k+
monthly cost of wasted dev hours per team

The Real Pain Points

✗
Vague bug reports — "The page is broken" — no steps, no context, no error details
✗
Missing reproduction steps — Testers forget exactly what they clicked by the time they file the ticket
✗
No console errors captured — The stack trace that would solve the mystery is never included
✗
No network log — Failed API calls go unrecorded — developers have no idea which request broke
✗
Environment info missing — Which browser? Which OS? What viewport? Nobody knows.
The Solution

TraceBug Gives Developers Everything They Need

Every time a tester finds a bug, TraceBug has already captured all the context needed to reproduce and fix it. Zero extra effort.

Before TraceBug

“The page is broken”

“I don't remember what I clicked”

“There was some red error text”

“It's Chrome... or maybe Firefox?”

→ 3+ days of back-and-forth
After TraceBug

✓ Exact steps: Click Edit → Select Inactive → Click Update

✓ TypeError: Cannot read 'status' at line 42

✓ POST /api/vendor/update → 500 Internal Server Error

✓ Chrome 121, Windows 11, 1920×1080

→ Developer fixes in minutes, not days
User Clicks
Tag, text, id, aria-label, role, data-testid — every click recorded with full element context
Form Inputs
Field name, type, value (passwords auto-redacted), placeholder — all captured securely
Navigation
Every route change tracked — from path, to path, timestamp, duration on page
Console Errors
Full error messages, stack traces, source files, line numbers — everything a dev needs
Network Calls
Fetch + XHR, URL, method, status code, duration — failed API calls flagged automatically
Screenshots
html2canvas-powered snapshots with smart auto-naming, annotation, and drawing tools
Environment Data
Browser, OS version, viewport size, device type, connection type — auto-captured
Voice Descriptions
Web Speech API — testers describe bugs by voice, transcript saved in the report
Features

Everything a QA Team Needs

A complete suite of tools for capturing, documenting, and reporting bugs — all built into a single lightweight SDK.

Core Feature

Automatic Bug Reports

TraceBug converts user sessions into developer-ready bug reports with zero manual effort. Auto-generated titles, flow summaries, reproduction steps, and environment data — all structured and ready to paste into Jira or GitHub.

Recording

Session Recording

Every user action is silently captured — clicks with full element context, form inputs (passwords auto-redacted), navigation, selects, and form submissions. Sessions are capped at 200 events and stored in localStorage.

Monitoring

Console & Network Monitoring

Automatically intercepts console.error(), unhandled promise rejections, and all fetch/XHR requests. Failed API calls are flagged with status codes. Framework noise (Next.js, Vite, Webpack HMR) is filtered out automatically.

QA Tools

Screenshot Capture

Capture full-page screenshots using html2canvas with smart auto-naming based on event context. Annotate with rectangles, arrows, and text overlays using the built-in editor. Color picker, undo support, and session gallery included.

Voice

Voice Bug Description

QA testers describe bugs by speaking — no typing required. Uses the Web Speech API (completely free, no paid services). Auto-capitalizes, adds punctuation, converts spoken "period" and "comma". Works in Chrome, Edge, Brave, Opera.

Export

GitHub & Jira Integration

One-click export to GitHub Issues or Jira tickets. TraceBug generates properly formatted markdown (GitHub) and Jira markup with steps, errors, network log, environment, and screenshots. Copy to clipboard instantly — zero account setup needed.

Works with Any Frontend Framework

ReactNext.jsVueNuxtAngularSvelteRemixAstroVitePlain HTML

2 lines of code. Zero runtime dependencies. Dual CJS/ESM output for universal compatibility.

How It Works

From Bug to Report in Under 60 Seconds

Four simple steps. No training required. Works for developers and non-technical QA testers alike.

STEP 01

Install Chrome Extension

Load the TraceBug extension in Chrome via Developer Mode, or install the SDK into your app with 2 lines of code.

STEP 02

Start TraceBug Session

Click the 🐛 floating button or the extension popup to enable recording. A green dot confirms TraceBug is active.

STEP 03

Reproduce the Bug

Navigate through the app as you normally would. Click buttons, fill forms, trigger the error. TraceBug captures everything silently in the background.

STEP 04

Generate Bug Report Instantly

Open the dashboard, select the session, and click GitHub Issue or Jira Ticket. A complete, developer-ready report is copied to your clipboard in under 10 seconds.

⚡

Zero Meetings. Zero Back-and-Forth.

Tester finds bug → clicks one button → pastes into Jira. Developer has everything. The entire process takes less than 60 seconds.

Installation

Get Started in Under 2 Minutes

Choose the installation method that fits your workflow. SDK for developers, Chrome Extension for everyone else.

Install the SDK into any JavaScript/TypeScript project. Works with React, Vue, Angular, Next.js, Svelte, and plain HTML.

Terminal
$ npm install tracebug-sdk
app/layout.tsx or index.tsx
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 will appear in the bottom-right corner of your app. Click it to open the dashboard, view sessions, and generate bug reports.

Live Preview

What a Real TraceBug Report Looks Like

This is an actual report generated by TraceBug from the demo “Vendor Update” bug — complete, structured, and ready for a developer.

TraceBug Report — GitHub Issue Format
✓ Ready to paste
🐛 Vendor Update Fails — TypeError
Reported: 2026-03-12 14:23:01Session: tb_20260312_142301Duration: 18 seconds
── Environment ────────────────────────────
Browser
Chrome 121.0.6167.85
OS
Windows 11 Pro
Viewport
1920 × 1080
Device
Desktop
Connection
4G — fast
Page
/vendor
Events
6 captured
Errors
1 critical
── Steps to Reproduce ─────────────────────
1.Navigate to /vendor
2.Click "Edit" button (role=button, id=vendor-edit-btn)
3.Select "Inactive" from Status dropdown (was: "Active")
4.Click "Update" button (type=submit)
5.Observe TypeError thrown in browser console
── Console Errors ──────────────────────────
TypeError — Critical
Cannot read properties of undefined (reading 'status')
Stack trace:
at updateVendor (vendor/page.tsx:42:18)
at handleSubmit (vendor/page.tsx:67:5)
at onClick (vendor/page.tsx:112:24)
── Network Log ─────────────────────────────
MethodURLStatusDurationTime
GET/api/vendor/123200124ms+0.3s
POST/api/vendor/update50089ms+3.5s
── Session Timeline ─────────────────────────
+0.0s→navigate/ → /vendor
+1.2s●clickbutton "Edit" [id=vendor-edit-btn]
+2.1s◆selectStatus: "Active" → "Inactive"
+3.4s●clickbutton "Update" [type=submit]
+3.5s⟳apiPOST /api/vendor/update → 500
+3.5s✕errorTypeError: Cannot read 'status'
Comparison

TraceBug vs. Manual Bug Reporting

See exactly what you get with TraceBug versus the traditional tester-writes-a-Slack-message workflow.

Feature
Manual Reporting
TraceBugRecommended
Steps to reproduce
Written manually, often incomplete or inaccurate
Auto-generated from session timeline with exact element selectors
Console errors
Manually copied (if the tester even opened DevTools)
Auto-captured — full message, stack trace, source file, line number
Network logs
Almost always missing — developers have to guess which API failed
Full API log — URL, method, status code, duration, timestamp
Screenshots
Manually taken with OS screenshot tool, often without context
Auto-captured via html2canvas with smart naming and annotation support
Browser & OS info
Usually missing or just "Chrome on Windows"
Auto-captured — browser version, OS, viewport, device, connection type
Time to create report
30–60 minutes of back-and-forth
Under 60 seconds from bug found to report ready
Developer time to reproduce
3+ days average, often closed as "cannot reproduce"
Minutes — everything needed is in the report
Voice description
Not possible — requires typing everything
One-click voice recording, transcript auto-saved to report
Framework compatibility
N/A — manual process regardless of framework
React, Vue, Angular, Next.js, Svelte, Nuxt, Remix, Astro, plain HTML
Privacy / data storage
Data sent to external bug tracker (Jira, Linear, etc.)
All data stays in localStorage — zero backend, no server calls
Cost
Dev time @ $80–200/hr × hours of back-and-forth
Free — open source, zero API keys, no subscriptions
Start Using TraceBug — Free
No account needed • No API keys • Works in 2 minutes