Observability

Skill serkan-ozal/browser-devtools-claude/skills/observability

Monitor and debug web applications using OpenTelemetry, console logs, network requests, and distributed tracing. Use when correlating frontend and backend requests or debugging request flow across services.From its SKILL.md

Install

npx -y skills add serkan-ozal/browser-devtools-claude --skill observability

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

8 stars8 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.9 KB, as published. Nobody here has run it

Observability Skill

Monitor and debug web 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

Get current trace ID (o11y_get-trace-id)
Generate new trace ID (o11y_new-trace-id)
Set specific trace ID (o11y_set-trace-id)
Correlate browser actions with backend traces

Console Monitoring

Capture all console output (o11y_get-console-messages)
Filter by level (error, warn, info, debug)
Track JavaScript exceptions
Monitor application logs

Network Observability

Track HTTP requests (o11y_get-http-requests)
Monitor API call timing
Identify failed requests
Inspect request/response details

Performance Metrics

Core Web Vitals (o11y_get-web-vitals)
Page load timing
Resource timing
User interaction metrics

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

When using Node platform (PLATFORM=node), tracepoint/logpoint snapshots include traceContext (traceId, spanId) when the Node process uses @opentelemetry/api, enabling correlation of backend traces with browser traces in Jaeger/Grafana.

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

Debugging Workflow

1. Set Up Tracing

/trace new

Generate a fresh trace ID for the session.

2. Perform Actions

Navigate, click, fill forms - all requests will carry the trace ID.

3. Capture Evidence

/console error
/network api/

Get console errors and API requests.

4. Correlate in Backend

Use the trace ID to search your observability platform:

Jaeger: Search by trace ID
Grafana: Query by trace ID
Datadog: APM trace search

5. Analyze Full Journey

See the complete request flow from browser to backend services.

Configuration

Environment Variables

Variable	Description	Default
`OTEL_ENABLE`	Enable OpenTelemetry	`false`
`OTEL_SERVICE_NAME`	Service identifier	`frontend`
`OTEL_EXPORTER_TYPE`	Export destination	`none`
`OTEL_EXPORTER_HTTP_URL`	Collector endpoint	-
`OTEL_EXPORTER_HTTP_HEADERS`	Auth headers	-

Exporter Types

Type	Description
`none`	Disabled
`console`	Log to console
`otlp/http`	Send 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

Generate new trace IDs for each test scenario
Document trace IDs in bug reports
Check console first for JavaScript errors
Filter network requests to relevant endpoints
Correlate timestamps between frontend and backend
Use structured logging with trace context