Skill

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.

npx claudepluginhub serkan-ozal/browser-devtools-claude --plugin browser-devtools-mcp

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

SKILL.md

Similar Skills

Observability Skill

Captures console logs, network requests, OpenTelemetry traces, and web vitals to monitor and debug web app request flows across frontend and backend services.

browser-devtools-mcp

distributed-tracing

Guides implementing distributed tracing in microservices with OpenTelemetry, covering traces, spans, context propagation, and cross-service debugging.

3 tools

systems-design

instrument-distributed-tracing

Instruments apps with OpenTelemetry for distributed tracing and Jaeger/Tempo integration. Debugs latency in microservices, analyzes request flows, correlates traces with logs/metrics.

1 file1 tool

agent-almanac

Stats

Stars3

Forks1

Last CommitFeb 26, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

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