observability

name	observability
description	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.

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

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