mcpField
O
observability

observability

github.com/serkan-ozalDevelopment738 installsUpdated 33w ago
Repository

About observability

An observability skill for debugging web and Node.js applications with browser and backend tooling. It covers trace correlation, console and network inspection, and web-vitals monitoring.

Key features

  1. 01Generate and set trace IDs
  2. 02Inspect browser console messages
  3. 03Filter HTTP requests
  4. 04Read web-vitals metrics
  5. 05Correlate frontend and backend traces

Use cases

  1. 01Trace a request across frontend and backend
  2. 02Investigate browser errors and failing requests
  3. 03Check web-vitals during application debugging

MCP support

The skill uses Browser DevTools MCP capabilities to inspect browser traces, console messages, HTTP requests, and web vitals. It also describes using node-devtools-cli for backend logs and trace correlation.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill observability

After installing, type/observabilityin Claude Code to confirm it loaded.

Details

From the project README

Observability Skill

Monitor and debug web and Node.js applications using OpenTelemetry, console logs, network requests, and distributed tracing.

When to Use

This skill activates when:

  • User asks about distributed tracing
  • User wants to correlate frontend and backend requests
  • User mentions OpenTelemetry, Jaeger, Zipkin, or tracing
  • User needs to debug request flow across services
  • User wants to monitor application behavior

Capabilities

Distributed Tracing
browser-devtools-cli o11y get-trace-id
browser-devtools-cli o11y new-trace-id
browser-devtools-cli o11y set-trace-id --trace-id "abc123def456..."
Console Monitoring
browser-devtools-cli o11y get-console-messages
browser-devtools-cli --json o11y get-console-messages --type warning
browser-devtools-cli --json o11y get-console-messages --search "error"
Network Observability
browser-devtools-cli --json o11y get-http-requests
browser-devtools-cli --json o11y get-http-requests --resource-type fetch
browser-devtools-cli --json o11y get-http-requests --status '{"min":400}'
Performance Metrics
browser-devtools-cli --json o11y get-web-vitals
browser-devtools-cli --json o11y get-web-vitals --wait-ms 3000
browser-devtools-cli --json o11y get-web-vitals --include-debug

OpenTelemetry Integration

Trace Context

Browser DevTools MCP can inject and extract W3C Trace Context headers:

  • traceparent: Contains trace-id, span-id, and trace flags
  • tracestate: Vendor-specific trace information
Correlation Flow
Browser Session
    │
    ├─► trace-id: abc123
    │
    ▼
Frontend Request
    │
    ├─► Header: traceparent: 00-abc123-def456-01
    │
    ▼
Backend Service
    │
    ├─► Logs with trace-id: abc123
    │
    ▼
Observability Platform
    │
    └─► Full trace visualization
Backend Observability (node-devtools-cli)

When correlating frontend traces with backend behavior, use node-devtools-cli to inspect Node.js processes:

# Connect to backend
node-devtools-cli --session-id backend debug connect --pid 12345

# Get console logs from Node process (can correlate with trace ID in logs)
node-devtools-cli --session-id backend --json debug get-logs
node-devtools-cli --session-id backend --json debug get-logs --search "trace"

# Optional: set tracepoints on backend handlers to capture call context
node-devtools-cli --session-id backend debug put-tracepoint \
  --url-pattern "routes/api.ts" \
  --line-number 25

Debugging Workflow

SESSION="--session-id trace-session"

# 1. Generate new trace ID
browser-devtools-cli $SESSION o11y new-trace-id

# 2. Navigate (requests will carry trace ID)
browser-devtools-cli $SESSION navigation go-to --url "https://app.example.com"
browser-devtools-cli $SESSION sync wait-for-network-idle

# 3. Perform actions
browser-devtools-cli $SESSION interaction click --selector "#submit"
browser-devtools-cli $SESSION sync wait-for-network-idle

# 4. Get trace ID for backend correlation
browser-devtools-cli $SESSION o11y get-trace-id

# 5. Check console errors
browser-devtools-cli $SESSION --json o11y get-console-messages --type error

# 6. Check network requests
browser-devtools-cli $SESSION --json o11y get-http-requests

# 7. Cleanup
browser-devtools-cli session delete trace-session

Use Existing Trace ID

SESSION="--session-id trace-session"

# Set trace ID from backend
browser-devtools-cli $SESSION o11y set-trace-id --trace-id "abc123def456789..."

# Navigate (requests will use this trace ID)
browser-devtools-cli $SESSION navigation go-to --url "https://app.example.com"

# All subsequent requests carry the trace ID
browser-devtools-cli $SESSION interaction click --selector "#api-call"

Configuration

Environment Variables
VariableDescriptionDefault
OTEL_ENABLEEnable OpenTelemetryfalse
OTEL_SERVICE_NAMEService identifierfrontend
OTEL_EXPORTER_TYPEExport destinationnone
OTEL_EXPORTER_HTTP_URLCollector endpoint-
OTEL_EXPORTER_HTTP_HEADERSAuth headers-
Exporter Types
TypeDescription
noneDisabled
consoleLog to console
otlp/httpSend to OTLP collector

Common Platforms

Jaeger
OTEL_EXPORTER_HTTP_URL=http://localhost:4318
Grafana Tempo
OTEL_EXPORTER_HTTP_URL=http://tempo:4318
Honeycomb
OTEL_EXPORTER_HTTP_URL=https://api.honeycomb.io
OTEL_EXPORTER_HTTP_HEADERS=x-honeycomb-team=YOUR_API_KEY
Datadog
OTEL_EXPORTER_HTTP_URL=http://localhost:4318

Best Practices

  1. Generate new trace IDs for each test scenario
  2. Document trace IDs in bug reports
  3. Check console first for JavaScript errors
  4. Filter network requests to relevant endpoints
  5. Correlate timestamps between frontend and backend
  6. Use structured logging with trace context
  7. Set up OTEL exporter for full trace visibility

Comments

Markdown supported