# 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.

- Skill: `serkan-ozal/observability-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add serkan-ozal/observability-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/serkan-ozal/observability-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: serkan-ozal (https://skillmd.com/u/serkan-ozal)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/serkan-ozal/observability-2

---


# 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