OpenTelemetry Traces from the Browser
Set up the OTel JavaScript SDK in React, create spans for user interactions, and export to a backend collector.
The OpenTelemetry JavaScript SDK
The OpenTelemetry JavaScript SDK for browsers consists of several packages: @opentelemetry/sdk-trace-web provides the core tracing implementation, @opentelemetry/instrumentation-fetch automatically creates spans for all fetch API calls, and @opentelemetry/exporter-trace-otlp-http sends spans to a collector.
TracerProvider: The Root of OTel Tracing
The TracerProvider is the central configuration object in OpenTelemetry. It holds the list of SpanProcessors (which determine what happens to completed spans), the resource describing your application (service name, version), and any sampling configuration.
All lessons in this course
- Frontend Observability: What and Why
- OpenTelemetry Traces from the Browser
- Real User Monitoring and Web Vitals
- Correlating Frontend and Backend Traces