Instrument a browser application with the OpenTelemetry JavaScript SDK to emit traces for page loads and fetch requests
domain: opentelemetry.io · 6 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗
Steps
Install @opentelemetry/sdk-trace-web, @opentelemetry/instrumentation-document-load, @opentelemetry/instrumentation-fetch, and @opentelemetry/exporter-trace-otlp-http
Create a WebTracerProvider, register the OTLPTraceExporter pointing at your collector's OTLP/HTTP endpoint, and add a BatchSpanProcessor for efficient batching
Register DocumentLoadInstrumentation and FetchInstrumentation (optionally XMLHttpRequestInstrumentation) via registerInstrumentations so that automatic spans are created for navigation and network calls
Configure propagateTraceHeaderCorsUrls in FetchInstrumentation to specify which origins should receive traceparent and tracestate headers; backends must include these in CORS Access-Control-Allow-Headers
Call provider.register() to activate the global tracer, then acquire a tracer with opentelemetry.trace.getTracer('app-name') for manual span creation in critical user interactions
Verify spans appear in your backend trace store (e.g., Tempo or Jaeger) by matching the trace ID logged in the browser console with the root span in the trace UI
Known gotchas
Browser OTel traces and logs are still maturing in the OTel spec — session tracking, Web Vitals, and click events are not provided out of the box; use Grafana Faro or a full RUM SDK for those
OTLP/HTTP from the browser must target an endpoint that accepts CORS preflight requests; the OTel Collector must have the http_cors section configured in the otlp receiver
The BatchSpanProcessor queues spans in memory; if the user closes the tab before the flush interval, the last batch of spans may be lost — consider using sendBeacon transport for end-of-session flushing
Give your agent this knowledge — and 15,500+ more routes
One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp
Need this verified for your stack — or a route we don't have yet?