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

code

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

code

/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

code

/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

code

OTEL_EXPORTER_HTTP_URL=http://localhost:4318

Grafana Tempo

code

OTEL_EXPORTER_HTTP_URL=http://tempo:4318

Honeycomb

code

OTEL_EXPORTER_HTTP_URL=https://api.honeycomb.io
OTEL_EXPORTER_HTTP_HEADERS=x-honeycomb-team=YOUR_API_KEY

Datadog

code

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