tracecc

AI API request tracing proxy with Web UI control and visual report generation.

Installation

npm install

Configuration (Optional)

To set default values for the UI (for privacy and convenience), create a .env file:

cp .env.example .env

Edit .env with your preferred defaults:

UI_DEFAULT_DOMAIN=https://api.example.com
UI_DEFAULT_BYPASS_PATHS=/health,/metrics

Important: The .env file is git-ignored to protect your privacy. Never commit it to version control.

Usage

npm start

Open http://localhost:3000, configure target domain and bypass paths (or use defaults from .env), then start the proxy (listening on port 8080).

Web UI Workflow

1. Enter target domain (e.g., https://api.example.com)
2. Enter paths to skip logging, comma-separated (optional)
3. Click [START] to launch proxy
4. Configure your client to use proxy http://localhost:8080
5. Click [STOP] to stop and generate HTML report

Log Format

JSONL format, filename log-<timestamp>.jsonl:

{
  "request": { "timestamp": 1234.56, "method": "POST", "url": "...", "headers": {...}, "body": {...} },
  "response": { "timestamp": 1234.78, "status_code": 200, "headers": {...}, "body": {...} },
  "logged_at": "2025-10-12T10:30:00.000Z"
}

Supports SSE stream parsing.

Generate Reports

Click "Generate Report" button in Web UI, or run manually:

npx claude-trace --generate-html log-xxx.jsonl report.html --no-open

Tech Stack

Node.js, HTTP Proxy, claude-trace, vanilla HTML/CSS/JS

License

ISC