OpenTelemetry-traces vanuit de browser

De OpenTelemetry JavaScript-SDK voor browsers bestaat uit meerdere pakketten: @opentelemetry/sdk-trace-web biedt de kernimplementatie voor tracering, @opentelemetry/instrumentation-fetch maakt automatisch spans aan voor alle aanroepen van de fetch-API en @opentelemetry/exporter-trace-otlp-http stuurt spans naar een collector.

De TracerProvider is het centrale configuratieobject in OpenTelemetry. Het bevat de lijst met SpanProcessors (die bepalen wat er met voltooide spans gebeurt), de resource die je applicatie beschrijft (servicenaam, versie) en eventuele configuratie voor sampling.

De BatchSpanProcessor verzamelt voltooide spans in het geheugen en exporteert ze in groepen in plaats van elke span afzonderlijk te versturen. Dit vermindert het aantal HTTP-verzoeken aan je collector aanzienlijk, waardoor de browserprestaties verbeteren en de belasting op het eindpunt van de OTel-collector afneemt.

OTLPTraceExporter stuurt gegroepeerde spans via HTTP naar een OpenTelemetry-compatibele collector in JSON- of protobuf-indeling. Je configureert de URL van de collector (bijv. het proxy-eindpunt van je OTel Collector), waarna de exporter automatisch de serialisatie en logica voor opnieuw proberen afhandelt.

Een Span vertegenwoordigt een afzonderlijke werkeenheid binnen een trace: het mounten van een component, een API-aanroep of een gebruikersinteractie. Spans hebben een naam, begintijd, eindtijd, status (OK of ERROR) en een verzameling sleutel-waardeattributen. Gerelateerde spans zijn gekoppeld via een gedeelde trace-ID en ouder-kindrelaties.

Je maakt een tracer met provider.getTracer('react-app') en start spans met tracer.startSpan('component-mount'). Nadat het werk is voltooid, roep je span.end() aan om de eindtijd vast te leggen. Beëindig spans altijd — gelekte spans verspillen geheugen en leveren onvolledige gegevens op in je observabilitybackend.

Attributen verrijken spans met contextuele gegevens: span.setAttribute('user.id', userId) of span.setAttribute('route', location.pathname). Attributen zijn doorzoekbaar in je observabilitybackend, zodat query's mogelijk zijn zoals "toon alle trage spans voor gebruiker 42" of "toon alle fouten op de /checkout-route."

@opentelemetry/instrumentation-fetch past de globale fetch-functie aan om automatisch spans aan te maken voor elke uitgaande HTTP-aanroep. De span legt de URL, methode, HTTP-statuscode en duur vast zonder wijzigingen aan je bestaande fetch-aanroepen.

Wanneer de fetch-instrumentatie een span maakt voor een uitgaand verzoek, injecteert deze de W3C TraceContext-header traceparent in het verzoek. De ontvangende backend leest deze header en zet dezelfde trace voort. Zo ontstaat een verbonden trace die browser en server omvat.

OTel-initialisatie moet plaatsvinden voordat componenten worden gemount — meestal in het invoerbestand van de app (main.tsx), vóór de aanroep van ReactDOM.createRoot. Maak de provider, registreer processors en exporters en roep provider.register() aan om deze als de globale TracerProvider te registreren.

Elke gebruikersinteractie vastleggen in apps met veel verkeer genereert enorme hoeveelheden tracegegevens. Configureer een TraceIdRatioBased-sampler (bijv. 10% van de traces opnemen) in de TracerProvider om het volume te verminderen. Neem altijd 100% van de fouttraces op met een ParentBased-sampler, zodat geen fouten worden gemist.

De OpenTelemetry JavaScript-SDK instrumenteert browsers met TracerProvider, BatchSpanProcessor en OTLPTraceExporter. Spans staan voor werkeenheden die zijn verrijkt met attributen. Fetch-instrumentatie maakt automatisch spans voor API-aanroepen en injecteert W3C TraceContext-headers voor gedistribueerde tracing van begin tot eind. Initialiseer vroeg, pas passende steekproeven toe en beëindig spans altijd om schone tracegegevens te behouden.