TracePanel

Chrome DevTools for your backend — zero-config, animated, live.

A live request-tracing visualizer for Node.js/Express apps.
One line of middleware. Real-time animated dashboard. Zero config.

⚡ Quick Start

npm install trace-panel

import express from 'express';
import { tracePanel } from 'trace-panel';

const app = express();
app.use(tracePanel()); // ← That's it.

app.listen(3000);
// Dashboard: http://localhost:5555

3 lines. No config files. No environment variables. No setup.

🎯 What It Does

TracePanel intercepts every HTTP request to your Express app and visualizes the complete async execution flow in real-time:

→ Express Middleware
  → Controller
    → Mongoose Query (find)
    → Mongoose Query (save)
  → HTTP Call (fetch)
→ Response

Each operation appears as an animated node in the dashboard:

• 🔵 Blue pulse — currently executing
• 🟢 Green glow — completed successfully
• 🔴 Red flash — error (with stack trace)

Concurrent requests render as distinct, correctly-colored flows — proving that request correlation works across async boundaries.

🏗️ Architecture

Express App
     │
TracePanel Middleware (assigns requestId via AsyncLocalStorage)
     │
OTel SDK (MongoDB + HTTP auto-instrumentation)
     │
Custom SpanProcessor → EventEmitter event bus
     │
Redaction Layer (strips password/token/secret/authorization)
     │
Socket.IO Server (batched events, 60ms flush)
     │
React Dashboard (React Flow + Zustand + Dagre layout)

The Core Technical Bet: AsyncLocalStorage

TracePanel uses Node.js's AsyncLocalStorage to carry a unique requestId through the entire async call chain of each request — from middleware to controller to database driver callback — without manually passing it through function signatures.

This is the same mechanism that powers distributed tracing in production systems. When you await a Mongoose query inside a request handler, Node.js tracks that the resulting callback belongs to the same logical "thread" as the original request. AsyncLocalStorage hooks into this mechanism to provide request-scoped storage that's invisible to application code.

// Deep inside a service, 4 layers down from the middleware:
import { getRequestId } from 'trace-panel';

function someDeepFunction() {
  console.log(getRequestId()); // → "V1StGXR8_Z5jdHi6B-myT" ← correct request!
}

⚙️ Configuration

app.use(tracePanel({
  // Dashboard port (default: 5555)
  port: 5555,

  // Disable tracing (e.g., in production)
  enabled: process.env.NODE_ENV !== 'production',

  // Event batch interval in ms (default: 60)
  batchIntervalMs: 60,

  // Replace the default redaction key list
  redactionKeys: ['password', 'token', 'secret'],

  // Or extend it
  additionalRedactionKeys: ['my_custom_secret'],
}));

🔒 Security: Automatic Redaction

TracePanel automatically redacts sensitive fields before events leave your Node.js process. Values matching these keys are replaced with [REDACTED]:

password · token · secret · authorization · cookie · session · apikey · api_key · credit_card · ssn · private_key · access_token · refresh_token

You can extend or replace this list via redactionKeys / additionalRedactionKeys.

🛠️ Tech Stack

| Layer | Technology | |---|---| | Request Tracing | AsyncLocalStorage (Node.js built-in) | | ID Generation | nanoid | | Instrumentation | @opentelemetry/sdk-node + MongoDB/HTTP plugins | | Event Transport | Socket.IO (WebSocket) | | Dashboard | React + React Flow + Zustand | | Graph Layout | Dagre | | Build | tsup (dual ESM/CJS) |

🗺️ Roadmap

| Planned | Status | |---|---| | Fastify/Koa/Nest plugins | 📋 Planned | | Timeline replay / time machine | 📋 Planned | | Multi-DB support (Postgres, MySQL, Redis) | 📋 Planned | | Export traces (PNG/SVG/Mermaid) | 📋 Planned | | Performance heatmap | 📋 Planned | | Live team collaboration | 📋 Planned | | AI "explain this bottleneck" | 📋 Planned |

📄 License

MIT © 2026 Jasil Meledath

Built by Jasil Meledath