tracebug 1.5.0 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -37
- package/bin.mjs +158 -64
- package/package.json +43 -43
package/README.md
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
# tracebug
|
|
2
|
-
|
|
3
|
-
The TraceBug CLI — a **local MCP server** that lets AI coding agents debug [TraceBug](https://github.com/prashantsinghmangat/tracebug-ai) bug-report exports, plus one-command framework setup.
|
|
4
|
-
|
|
5
|
-
Zero dependencies. ~24 KB. Node ≥ 18.
|
|
6
|
-
|
|
7
|
-
## MCP server
|
|
8
|
-
|
|
9
|
-
Connect Claude Code, Cursor, Windsurf, or VS Code to the `.html` bug reports the [TraceBug Chrome extension](https://chromewebstore.google.com/detail/fdemmibikigigkfjngclmdheeajhdgaj) exports:
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
claude mcp add tracebug -- npx -y tracebug mcp --dir ./bug-reports
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
The agent gets six read tools — `list_bug_reports`, `get_bug_report` (with a prioritized investigation guide), `get_console_errors`, `get_network_activity`, `get_repro_steps`, `get_screenshot` — and a `/tracebug:debug_bug_report` prompt.
|
|
16
|
-
|
|
17
|
-
**Everything stays on your machine.** The server binds to stdio only, opens zero network connections, and reads the report files from your disk. No account, no cloud, no upload.
|
|
18
|
-
|
|
19
|
-
Full guide: [tracebug.
|
|
20
|
-
|
|
21
|
-
## Project setup
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npx tracebug init
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
Detects your framework (React, Next.js, Vue, Angular, Svelte, Nuxt, vanilla) and prints the setup snippet for the [`tracebug-sdk`](https://www.npmjs.com/package/tracebug-sdk) — the embeddable capture SDK.
|
|
28
|
-
|
|
29
|
-
## Related packages
|
|
30
|
-
|
|
31
|
-
| Package | What it is |
|
|
32
|
-
|---|---|
|
|
33
|
-
| [`tracebug`](https://www.npmjs.com/package/tracebug) (this one) | CLI: MCP server + `init`. For developers *receiving* bug reports. |
|
|
34
|
-
| [`tracebug-sdk`](https://www.npmjs.com/package/tracebug-sdk) | The full SDK for embedding capture in your app. Includes this CLI too. |
|
|
35
|
-
| [Chrome extension](https://chromewebstore.google.com/detail/fdemmibikigigkfjngclmdheeajhdgaj) | Zero-code capture for QA/testers on any website. |
|
|
36
|
-
|
|
37
|
-
MIT © Prashant Singh Mangat
|
|
1
|
+
# tracebug
|
|
2
|
+
|
|
3
|
+
The TraceBug CLI — a **local MCP server** that lets AI coding agents debug [TraceBug](https://github.com/prashantsinghmangat/tracebug-ai) bug-report exports, plus one-command framework setup.
|
|
4
|
+
|
|
5
|
+
Zero dependencies. ~24 KB. Node ≥ 18.
|
|
6
|
+
|
|
7
|
+
## MCP server
|
|
8
|
+
|
|
9
|
+
Connect Claude Code, Cursor, Windsurf, or VS Code to the `.html` bug reports the [TraceBug Chrome extension](https://chromewebstore.google.com/detail/fdemmibikigigkfjngclmdheeajhdgaj) exports:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
claude mcp add tracebug -- npx -y tracebug mcp --dir ./bug-reports
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
The agent gets six read tools — `list_bug_reports`, `get_bug_report` (with a prioritized investigation guide), `get_console_errors`, `get_network_activity`, `get_repro_steps`, `get_screenshot` — and a `/tracebug:debug_bug_report` prompt.
|
|
16
|
+
|
|
17
|
+
**Everything stays on your machine.** The server binds to stdio only, opens zero network connections, and reads the report files from your disk. No account, no cloud, no upload.
|
|
18
|
+
|
|
19
|
+
Full guide: [tracebug.dev/docs/mcp](https://tracebug.dev/docs/mcp)
|
|
20
|
+
|
|
21
|
+
## Project setup
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npx tracebug init
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Detects your framework (React, Next.js, Vue, Angular, Svelte, Nuxt, vanilla) and prints the setup snippet for the [`tracebug-sdk`](https://www.npmjs.com/package/tracebug-sdk) — the embeddable capture SDK.
|
|
28
|
+
|
|
29
|
+
## Related packages
|
|
30
|
+
|
|
31
|
+
| Package | What it is |
|
|
32
|
+
|---|---|
|
|
33
|
+
| [`tracebug`](https://www.npmjs.com/package/tracebug) (this one) | CLI: MCP server + `init`. For developers *receiving* bug reports. |
|
|
34
|
+
| [`tracebug-sdk`](https://www.npmjs.com/package/tracebug-sdk) | The full SDK for embedding capture in your app. Includes this CLI too. |
|
|
35
|
+
| [Chrome extension](https://chromewebstore.google.com/detail/fdemmibikigigkfjngclmdheeajhdgaj) | Zero-code capture for QA/testers on any website. |
|
|
36
|
+
|
|
37
|
+
MIT © Prashant Singh Mangat
|
package/bin.mjs
CHANGED
|
@@ -17,7 +17,9 @@ __export(mcp_server_exports, {
|
|
|
17
17
|
buildDebugPrompt: () => buildDebugPrompt,
|
|
18
18
|
buildInvestigationGuide: () => buildInvestigationGuide,
|
|
19
19
|
callTool: () => callTool,
|
|
20
|
+
collectReports: () => collectReports,
|
|
20
21
|
handleMessage: () => handleMessage,
|
|
22
|
+
knownReportDirs: () => knownReportDirs,
|
|
21
23
|
parseReportFile: () => parseReportFile,
|
|
22
24
|
runMcpServer: () => runMcpServer,
|
|
23
25
|
scanReportFiles: () => scanReportFiles,
|
|
@@ -30,6 +32,7 @@ __export(mcp_server_exports, {
|
|
|
30
32
|
});
|
|
31
33
|
import * as fs from "fs";
|
|
32
34
|
import * as path from "path";
|
|
35
|
+
import * as os from "os";
|
|
33
36
|
function parseReportFile(filePath) {
|
|
34
37
|
let raw;
|
|
35
38
|
try {
|
|
@@ -56,8 +59,9 @@ function parseReportFile(filePath) {
|
|
|
56
59
|
function isReportPayload(p) {
|
|
57
60
|
return typeof p === "object" && p !== null && typeof p.meta === "object" && p.meta !== null && typeof p.meta.title === "string" && typeof p.meta.sessionId === "string";
|
|
58
61
|
}
|
|
59
|
-
function scanReportFiles(dir, depth = 0) {
|
|
60
|
-
|
|
62
|
+
function scanReportFiles(dir, depth = 0, opts = {}) {
|
|
63
|
+
const maxDepth = opts.maxDepth ?? MAX_SCAN_DEPTH;
|
|
64
|
+
if (depth > maxDepth) return [];
|
|
61
65
|
let entries;
|
|
62
66
|
try {
|
|
63
67
|
entries = fs.readdirSync(dir, { withFileTypes: true });
|
|
@@ -69,19 +73,69 @@ function scanReportFiles(dir, depth = 0) {
|
|
|
69
73
|
const full = path.join(dir, entry.name);
|
|
70
74
|
if (entry.isDirectory()) {
|
|
71
75
|
if (!SKIP_DIRS.has(entry.name) && !entry.name.startsWith(".")) {
|
|
72
|
-
found.push(...scanReportFiles(full, depth + 1));
|
|
76
|
+
found.push(...scanReportFiles(full, depth + 1, opts));
|
|
73
77
|
}
|
|
74
78
|
} else if (entry.name.endsWith(".html") || entry.name.endsWith(".json")) {
|
|
79
|
+
if (opts.nameFilter && !opts.nameFilter(entry.name)) continue;
|
|
75
80
|
if (parseReportFile(full) !== null) found.push(full);
|
|
76
81
|
}
|
|
77
82
|
}
|
|
78
83
|
return found;
|
|
79
84
|
}
|
|
85
|
+
function knownReportDirs(baseDir) {
|
|
86
|
+
const raw = [baseDir, process.cwd()];
|
|
87
|
+
try {
|
|
88
|
+
const home = os.homedir();
|
|
89
|
+
raw.push(path.join(home, "Downloads"), path.join(home, "Desktop"));
|
|
90
|
+
} catch {
|
|
91
|
+
}
|
|
92
|
+
const seen = /* @__PURE__ */ new Set();
|
|
93
|
+
const out = [];
|
|
94
|
+
for (const d of raw) {
|
|
95
|
+
let key;
|
|
96
|
+
try {
|
|
97
|
+
key = path.resolve(d);
|
|
98
|
+
} catch {
|
|
99
|
+
continue;
|
|
100
|
+
}
|
|
101
|
+
if (seen.has(key)) continue;
|
|
102
|
+
seen.add(key);
|
|
103
|
+
try {
|
|
104
|
+
if (fs.statSync(d).isDirectory()) out.push(d);
|
|
105
|
+
} catch {
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
return out;
|
|
109
|
+
}
|
|
110
|
+
function collectReports(baseDir) {
|
|
111
|
+
const seen = /* @__PURE__ */ new Set();
|
|
112
|
+
const out = [];
|
|
113
|
+
const add = (f) => {
|
|
114
|
+
const key = path.resolve(f);
|
|
115
|
+
if (!seen.has(key)) {
|
|
116
|
+
seen.add(key);
|
|
117
|
+
out.push(f);
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
for (const f of scanReportFiles(baseDir)) add(f);
|
|
121
|
+
const baseKey = path.resolve(baseDir);
|
|
122
|
+
for (const dir of knownReportDirs(baseDir)) {
|
|
123
|
+
if (path.resolve(dir) === baseKey) continue;
|
|
124
|
+
for (const f of scanReportFiles(dir, 0, { maxDepth: 1, nameFilter: (n) => TB_EXPORT_NAME_RE.test(n) })) add(f);
|
|
125
|
+
}
|
|
126
|
+
return out;
|
|
127
|
+
}
|
|
128
|
+
function displayReportName(baseDir, file) {
|
|
129
|
+
const rel = path.relative(baseDir, file);
|
|
130
|
+
return rel && !rel.startsWith("..") && !path.isAbsolute(rel) ? rel : path.basename(file);
|
|
131
|
+
}
|
|
80
132
|
function requireReport(baseDir, file) {
|
|
81
|
-
const
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
|
|
133
|
+
const directCandidates = path.isAbsolute(file) ? [file] : [path.join(baseDir, file), path.resolve(process.cwd(), file)];
|
|
134
|
+
for (const direct of directCandidates) {
|
|
135
|
+
const p = parseReportFile(direct);
|
|
136
|
+
if (p) return { payload: p, resolved: direct };
|
|
137
|
+
}
|
|
138
|
+
const candidates = collectReports(baseDir);
|
|
85
139
|
const query = file.toLowerCase();
|
|
86
140
|
let match = candidates.find((c) => path.basename(c).toLowerCase() === query);
|
|
87
141
|
if (!match) {
|
|
@@ -92,9 +146,9 @@ function requireReport(baseDir, file) {
|
|
|
92
146
|
});
|
|
93
147
|
}
|
|
94
148
|
if (match) return { payload: parseReportFile(match), resolved: match };
|
|
95
|
-
const available = candidates.map((c) =>
|
|
149
|
+
const available = candidates.map((c) => displayReportName(baseDir, c));
|
|
96
150
|
throw new Error(
|
|
97
|
-
`Not a TraceBug export: ${file}. ` + (available.length ? `Available reports: ${available.join(", ")}` : `No reports found under ${baseDir} \u2014
|
|
151
|
+
`Not a TraceBug export: ${file}. ` + (available.length ? `Available reports: ${available.join(", ")}` : `No reports found under ${baseDir}, Downloads, or Desktop \u2014 pass an absolute path, or point the server's --dir at your reports folder.`)
|
|
98
152
|
);
|
|
99
153
|
}
|
|
100
154
|
function buildInvestigationGuide(p) {
|
|
@@ -131,11 +185,11 @@ function buildInvestigationGuide(p) {
|
|
|
131
185
|
}
|
|
132
186
|
function toolListBugReports(baseDir, args2) {
|
|
133
187
|
const scanDir = args2.dir ? path.isAbsolute(args2.dir) ? args2.dir : path.join(baseDir, args2.dir) : baseDir;
|
|
134
|
-
const files = scanReportFiles(scanDir);
|
|
188
|
+
const files = args2.dir ? scanReportFiles(scanDir) : AUTO_DISCOVER ? collectReports(baseDir) : scanReportFiles(baseDir);
|
|
135
189
|
const reports = files.map((file) => {
|
|
136
190
|
const p = parseReportFile(file);
|
|
137
191
|
return {
|
|
138
|
-
file:
|
|
192
|
+
file: displayReportName(baseDir, file),
|
|
139
193
|
title: p.meta.title,
|
|
140
194
|
summary: p.meta.summary,
|
|
141
195
|
severity: p.meta.severity,
|
|
@@ -154,7 +208,7 @@ function toolListBugReports(baseDir, args2) {
|
|
|
154
208
|
});
|
|
155
209
|
return {
|
|
156
210
|
count: reports.length,
|
|
157
|
-
scannedDir: scanDir,
|
|
211
|
+
scannedDir: args2.dir ? scanDir : AUTO_DISCOVER ? knownReportDirs(baseDir).join(", ") : baseDir,
|
|
158
212
|
reports,
|
|
159
213
|
...reports.length ? { nextStep: "Call get_bug_report on a file for the full overview plus a prioritized investigation guide." } : {}
|
|
160
214
|
};
|
|
@@ -338,11 +392,13 @@ function handleMessage(baseDir, msg) {
|
|
|
338
392
|
function reply(id, result) {
|
|
339
393
|
return { jsonrpc: "2.0", id: id ?? null, result };
|
|
340
394
|
}
|
|
341
|
-
function runMcpServer(baseDir, version) {
|
|
395
|
+
function runMcpServer(baseDir, version, autoDiscover = false) {
|
|
342
396
|
SERVER_VERSION = version;
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
397
|
+
AUTO_DISCOVER = autoDiscover;
|
|
398
|
+
process.stderr.write(
|
|
399
|
+
`TraceBug MCP server \u2014 reading bug reports from ${baseDir}` + (autoDiscover ? " (+ Downloads/Desktop auto-discovery)" : "") + "\n"
|
|
400
|
+
);
|
|
401
|
+
return new Promise((resolve2) => {
|
|
346
402
|
let buffer = "";
|
|
347
403
|
process.stdin.setEncoding("utf8");
|
|
348
404
|
process.stdin.on("data", (chunk) => {
|
|
@@ -365,16 +421,17 @@ function runMcpServer(baseDir, version) {
|
|
|
365
421
|
if (response) process.stdout.write(JSON.stringify(response) + "\n");
|
|
366
422
|
}
|
|
367
423
|
});
|
|
368
|
-
process.stdin.on("end", () =>
|
|
424
|
+
process.stdin.on("end", () => resolve2());
|
|
369
425
|
});
|
|
370
426
|
}
|
|
371
|
-
var TB_DATA_RE, MAX_SCAN_DEPTH, SKIP_DIRS, FILE_PROP, TOOL_DEFINITIONS, PROMPT_DEFINITIONS, SERVER_VERSION;
|
|
427
|
+
var TB_DATA_RE, MAX_SCAN_DEPTH, SKIP_DIRS, TB_EXPORT_NAME_RE, FILE_PROP, TOOL_DEFINITIONS, PROMPT_DEFINITIONS, SERVER_VERSION, AUTO_DISCOVER;
|
|
372
428
|
var init_mcp_server = __esm({
|
|
373
429
|
"cli/mcp-server.ts"() {
|
|
374
430
|
"use strict";
|
|
375
431
|
TB_DATA_RE = /<script id="tb-data" type="application\/json">([\s\S]*?)<\/script>/;
|
|
376
432
|
MAX_SCAN_DEPTH = 3;
|
|
377
433
|
SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", ".git", ".next", "dist", "build", "coverage", "out"]);
|
|
434
|
+
TB_EXPORT_NAME_RE = /^tracebug[-.]/i;
|
|
378
435
|
FILE_PROP = {
|
|
379
436
|
file: {
|
|
380
437
|
type: "string",
|
|
@@ -446,6 +503,7 @@ var init_mcp_server = __esm({
|
|
|
446
503
|
}
|
|
447
504
|
];
|
|
448
505
|
SERVER_VERSION = "0.0.0";
|
|
506
|
+
AUTO_DISCOVER = false;
|
|
449
507
|
}
|
|
450
508
|
});
|
|
451
509
|
|
|
@@ -455,6 +513,7 @@ var command = args[0];
|
|
|
455
513
|
var BOLD = "\x1B[1m";
|
|
456
514
|
var CYAN = "\x1B[36m";
|
|
457
515
|
var GREEN = "\x1B[32m";
|
|
516
|
+
var YELLOW = "\x1B[33m";
|
|
458
517
|
var DIM = "\x1B[2m";
|
|
459
518
|
var RESET = "\x1B[0m";
|
|
460
519
|
async function main() {
|
|
@@ -477,7 +536,8 @@ async function startMcpServer() {
|
|
|
477
536
|
const fs2 = await import("fs");
|
|
478
537
|
const path2 = await import("path");
|
|
479
538
|
const dirFlag = args.indexOf("--dir");
|
|
480
|
-
const
|
|
539
|
+
const hasExplicitDir = dirFlag !== -1 && !!args[dirFlag + 1];
|
|
540
|
+
const baseDir = hasExplicitDir ? path2.resolve(args[dirFlag + 1]) : process.cwd();
|
|
481
541
|
let version = "0.0.0";
|
|
482
542
|
for (const rel of ["./package.json", "../package.json"]) {
|
|
483
543
|
try {
|
|
@@ -489,14 +549,14 @@ async function startMcpServer() {
|
|
|
489
549
|
} catch {
|
|
490
550
|
}
|
|
491
551
|
}
|
|
492
|
-
await runMcpServer2(baseDir, version);
|
|
552
|
+
await runMcpServer2(baseDir, version, !hasExplicitDir);
|
|
493
553
|
}
|
|
494
554
|
function printHelp() {
|
|
495
555
|
console.log(`
|
|
496
556
|
${BOLD}TraceBug CLI${RESET} \u2014 Debug bugs in seconds, not hours
|
|
497
557
|
|
|
498
558
|
${BOLD}Commands:${RESET}
|
|
499
|
-
${CYAN}init${RESET}
|
|
559
|
+
${CYAN}init${RESET} Print the exact TraceBug setup for your framework (incl. the gotcha)
|
|
500
560
|
${CYAN}mcp${RESET} Start the MCP server so AI agents (Claude Code, Cursor) can read
|
|
501
561
|
exported bug reports. Options: ${DIM}--dir <path>${RESET} (default: current dir)
|
|
502
562
|
${CYAN}help${RESET} Show this help message
|
|
@@ -509,12 +569,14 @@ ${BOLD}Docs:${RESET} https://tracebug.dev/docs
|
|
|
509
569
|
`);
|
|
510
570
|
}
|
|
511
571
|
async function initProject() {
|
|
512
|
-
console.log(`
|
|
513
|
-
${BOLD}${CYAN}TraceBug${RESET} \u2014 Setting up bug reporting
|
|
514
|
-
`);
|
|
515
572
|
const fs2 = await import("fs");
|
|
516
573
|
const path2 = await import("path");
|
|
517
574
|
const cwd = process.cwd();
|
|
575
|
+
const projectId = path2.basename(cwd) || "my-app";
|
|
576
|
+
console.log(`
|
|
577
|
+
${BOLD}${CYAN}TraceBug${RESET} \u2014 the exact setup for your framework`);
|
|
578
|
+
console.log(`${DIM}(this prints the right snippet \u2014 it doesn't install or edit any files)${RESET}
|
|
579
|
+
`);
|
|
518
580
|
let framework = "vanilla";
|
|
519
581
|
const pkgPath = path2.join(cwd, "package.json");
|
|
520
582
|
if (fs2.existsSync(pkgPath)) {
|
|
@@ -523,69 +585,101 @@ ${BOLD}${CYAN}TraceBug${RESET} \u2014 Setting up bug reporting
|
|
|
523
585
|
const deps = { ...pkg.dependencies, ...pkg.devDependencies };
|
|
524
586
|
if (deps["next"]) framework = "nextjs";
|
|
525
587
|
else if (deps["nuxt"]) framework = "nuxt";
|
|
526
|
-
else if (deps["vue"]) framework = "vue";
|
|
527
588
|
else if (deps["@angular/core"]) framework = "angular";
|
|
528
589
|
else if (deps["svelte"]) framework = "svelte";
|
|
590
|
+
else if (deps["vue"]) framework = "vue";
|
|
529
591
|
else if (deps["react"]) framework = "react";
|
|
530
592
|
} catch {
|
|
531
593
|
}
|
|
532
594
|
}
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
595
|
+
const guides = {
|
|
596
|
+
nextjs: {
|
|
597
|
+
snippet: `// 1 \u2014 create app/tracebug.tsx
|
|
536
598
|
"use client";
|
|
537
599
|
import { useEffect } from "react";
|
|
538
600
|
|
|
539
601
|
export default function TraceBugInit() {
|
|
540
602
|
useEffect(() => {
|
|
541
|
-
import("tracebug-sdk").then(({ default: TraceBug }) =>
|
|
542
|
-
TraceBug.init({ projectId: "${
|
|
543
|
-
|
|
603
|
+
import("tracebug-sdk").then(({ default: TraceBug }) =>
|
|
604
|
+
TraceBug.init({ projectId: "${projectId}", enabled: "auto" })
|
|
605
|
+
);
|
|
544
606
|
}, []);
|
|
545
607
|
return null;
|
|
546
608
|
}
|
|
547
609
|
|
|
548
|
-
//
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
610
|
+
// 2 \u2014 mount it once inside <body> in app/layout.tsx: <TraceBugInit />`,
|
|
611
|
+
gotcha: `App Router components run on the server by default, but TraceBug is
|
|
612
|
+
browser-only. It must live in a Client Component ("use client") and fire from
|
|
613
|
+
useEffect \u2014 calling init() in a server component silently does nothing.`
|
|
614
|
+
},
|
|
615
|
+
nuxt: {
|
|
616
|
+
snippet: `// plugins/tracebug.client.ts (the .client suffix is required)
|
|
553
617
|
import TraceBug from "tracebug-sdk";
|
|
554
|
-
|
|
555
|
-
|
|
618
|
+
|
|
619
|
+
export default defineNuxtPlugin(() => {
|
|
620
|
+
TraceBug.init({ projectId: "${projectId}", enabled: "auto" });
|
|
621
|
+
});`,
|
|
622
|
+
gotcha: `The ".client.ts" filename is what keeps TraceBug out of the SSR
|
|
623
|
+
bundle \u2014 a plain tracebug.ts would try to run during server render and crash.`
|
|
624
|
+
},
|
|
625
|
+
svelte: {
|
|
626
|
+
snippet: `<!-- src/routes/+layout.svelte -->
|
|
556
627
|
<script>
|
|
557
|
-
import { onMount } from
|
|
558
|
-
import TraceBug from
|
|
559
|
-
onMount(() => TraceBug.init({ projectId: "${
|
|
628
|
+
import { onMount } from "svelte";
|
|
629
|
+
import TraceBug from "tracebug-sdk";
|
|
630
|
+
onMount(() => TraceBug.init({ projectId: "${projectId}", enabled: "auto" }));
|
|
560
631
|
</script>`,
|
|
561
|
-
|
|
632
|
+
gotcha: `Use onMount \u2014 it only runs in the browser, keeping TraceBug out of
|
|
633
|
+
SvelteKit's SSR pass. A top-level init() call would break the server render.`
|
|
634
|
+
},
|
|
635
|
+
react: {
|
|
636
|
+
snippet: `// src/main.tsx (your app entry file)
|
|
562
637
|
import TraceBug from "tracebug-sdk";
|
|
563
|
-
|
|
564
|
-
|
|
638
|
+
|
|
639
|
+
TraceBug.init({ projectId: "${projectId}", enabled: "auto" });`
|
|
640
|
+
},
|
|
641
|
+
vue: {
|
|
642
|
+
snippet: `// src/main.ts (your app entry file)
|
|
643
|
+
import TraceBug from "tracebug-sdk";
|
|
644
|
+
|
|
645
|
+
TraceBug.init({ projectId: "${projectId}", enabled: "auto" });`
|
|
646
|
+
},
|
|
647
|
+
angular: {
|
|
648
|
+
snippet: `// src/main.ts (before bootstrapApplication / bootstrapModule)
|
|
649
|
+
import TraceBug from "tracebug-sdk";
|
|
650
|
+
|
|
651
|
+
TraceBug.init({ projectId: "${projectId}", enabled: "auto" });`
|
|
652
|
+
},
|
|
653
|
+
vanilla: {
|
|
654
|
+
snippet: `<!-- add before </body> -->
|
|
565
655
|
<script type="module">
|
|
566
656
|
import TraceBug from "tracebug-sdk";
|
|
567
|
-
TraceBug.init({ projectId: "${
|
|
568
|
-
</script
|
|
569
|
-
|
|
570
|
-
import TraceBug from "tracebug-sdk";
|
|
571
|
-
export default defineNuxtPlugin(() => {
|
|
572
|
-
TraceBug.init({ projectId: "${path2.basename(cwd)}" });
|
|
573
|
-
});`
|
|
657
|
+
TraceBug.init({ projectId: "${projectId}", enabled: "auto" });
|
|
658
|
+
</script>`
|
|
659
|
+
}
|
|
574
660
|
};
|
|
575
|
-
|
|
576
|
-
${
|
|
661
|
+
const guide = guides[framework];
|
|
662
|
+
console.log(` Detected framework: ${GREEN}${framework}${RESET}
|
|
577
663
|
`);
|
|
578
|
-
console.log(`${
|
|
579
|
-
console.log(
|
|
580
|
-
|
|
581
|
-
console.log(`
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
664
|
+
console.log(`${BOLD}1. Install the SDK${RESET}`);
|
|
665
|
+
console.log(` ${CYAN}npm install tracebug-sdk${RESET}
|
|
666
|
+
`);
|
|
667
|
+
console.log(`${BOLD}2. Add this yourself${RESET}`);
|
|
668
|
+
console.log(`${DIM}\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${RESET}`);
|
|
669
|
+
console.log(guide.snippet);
|
|
670
|
+
console.log(`${DIM}\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${RESET}
|
|
671
|
+
`);
|
|
672
|
+
if (guide.gotcha) {
|
|
673
|
+
console.log(`${YELLOW}${BOLD}\u26A0 Heads up (${framework}):${RESET}${YELLOW} ${guide.gotcha}${RESET}
|
|
674
|
+
`);
|
|
675
|
+
}
|
|
676
|
+
console.log(`${DIM} enabled: "auto" loads TraceBug in dev & staging only \u2014 it never ships
|
|
677
|
+
to your production users. Set enabled: true to force it on.${RESET}
|
|
678
|
+
`);
|
|
679
|
+
console.log(`${BOLD}3. Run your app${RESET}, reproduce a bug, then click ${BOLD}Export .html${RESET} on the toolbar.
|
|
680
|
+
`);
|
|
681
|
+
console.log(`${DIM}Hand the exported report to your AI agent:${RESET} ${CYAN}npx tracebug mcp${RESET}`);
|
|
682
|
+
console.log(`${DIM}Full guide:${RESET} https://tracebug.dev/docs/getting-started
|
|
589
683
|
`);
|
|
590
684
|
}
|
|
591
685
|
main().catch(console.error);
|
package/package.json
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "tracebug",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "TraceBug CLI — local MCP server that lets AI coding agents (Claude Code, Cursor, VS Code) debug TraceBug bug-report exports, plus framework setup via `tracebug init`. Zero dependencies.",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"bin": {
|
|
7
|
-
"tracebug": "./bin.mjs"
|
|
8
|
-
},
|
|
9
|
-
"files": [
|
|
10
|
-
"bin.mjs",
|
|
11
|
-
"README.md"
|
|
12
|
-
],
|
|
13
|
-
"engines": {
|
|
14
|
-
"node": ">=18"
|
|
15
|
-
},
|
|
16
|
-
"scripts": {
|
|
17
|
-
"prepublishOnly": "node -e \"if(!require('fs').existsSync('bin.mjs')){console.error('bin.mjs missing - run: npm run build:cli (from the repo root)');process.exit(1)}\""
|
|
18
|
-
},
|
|
19
|
-
"keywords": [
|
|
20
|
-
"mcp",
|
|
21
|
-
"model-context-protocol",
|
|
22
|
-
"bug-reporting",
|
|
23
|
-
"debugging",
|
|
24
|
-
"claude-code",
|
|
25
|
-
"cursor",
|
|
26
|
-
"ai-agents",
|
|
27
|
-
"tracebug"
|
|
28
|
-
],
|
|
29
|
-
"author": {
|
|
30
|
-
"name": "Prashant Singh Mangat",
|
|
31
|
-
"url": "https://github.com/prashantsinghmangat"
|
|
32
|
-
},
|
|
33
|
-
"license": "MIT",
|
|
34
|
-
"repository": {
|
|
35
|
-
"type": "git",
|
|
36
|
-
"url": "git+https://github.com/prashantsinghmangat/tracebug-ai.git",
|
|
37
|
-
"directory": "packages/tracebug"
|
|
38
|
-
},
|
|
39
|
-
"homepage": "https://tracebug.
|
|
40
|
-
"bugs": {
|
|
41
|
-
"url": "https://github.com/prashantsinghmangat/tracebug-ai/issues"
|
|
42
|
-
}
|
|
43
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "tracebug",
|
|
3
|
+
"version": "1.7.0",
|
|
4
|
+
"description": "TraceBug CLI — local MCP server that lets AI coding agents (Claude Code, Cursor, VS Code) debug TraceBug bug-report exports, plus framework setup via `tracebug init`. Zero dependencies.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": {
|
|
7
|
+
"tracebug": "./bin.mjs"
|
|
8
|
+
},
|
|
9
|
+
"files": [
|
|
10
|
+
"bin.mjs",
|
|
11
|
+
"README.md"
|
|
12
|
+
],
|
|
13
|
+
"engines": {
|
|
14
|
+
"node": ">=18"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"prepublishOnly": "node -e \"if(!require('fs').existsSync('bin.mjs')){console.error('bin.mjs missing - run: npm run build:cli (from the repo root)');process.exit(1)}\""
|
|
18
|
+
},
|
|
19
|
+
"keywords": [
|
|
20
|
+
"mcp",
|
|
21
|
+
"model-context-protocol",
|
|
22
|
+
"bug-reporting",
|
|
23
|
+
"debugging",
|
|
24
|
+
"claude-code",
|
|
25
|
+
"cursor",
|
|
26
|
+
"ai-agents",
|
|
27
|
+
"tracebug"
|
|
28
|
+
],
|
|
29
|
+
"author": {
|
|
30
|
+
"name": "Prashant Singh Mangat",
|
|
31
|
+
"url": "https://github.com/prashantsinghmangat"
|
|
32
|
+
},
|
|
33
|
+
"license": "MIT",
|
|
34
|
+
"repository": {
|
|
35
|
+
"type": "git",
|
|
36
|
+
"url": "git+https://github.com/prashantsinghmangat/tracebug-ai.git",
|
|
37
|
+
"directory": "packages/tracebug"
|
|
38
|
+
},
|
|
39
|
+
"homepage": "https://tracebug.dev/docs/mcp",
|
|
40
|
+
"bugs": {
|
|
41
|
+
"url": "https://github.com/prashantsinghmangat/tracebug-ai/issues"
|
|
42
|
+
}
|
|
43
|
+
}
|