OpenTelemetry-traces fra browseren

OpenTelemetrys JavaScript-SDK til browsere består af flere pakker: @opentelemetry/sdk-trace-web leverer den centrale implementering af sporing, @opentelemetry/instrumentation-fetch opretter automatisk spans for alle fetch API-kald, og @opentelemetry/exporter-trace-otlp-http sender spans til en collector.

TracerProvider er det centrale konfigurationsobjekt i OpenTelemetry. Det indeholder listen over SpanProcessors (som bestemmer, hvad der sker med afsluttede spans), den ressource, der beskriver din applikation (tjenestenavn, version), og eventuel samplingkonfiguration.

BatchSpanProcessor samler afsluttede spans i hukommelsen og eksporterer dem i grupper i stedet for at sende hvert span individuelt. Det reducerer antallet af HTTP-anmodninger til din collector markant, forbedrer browserens ydeevne og mindsker belastningen på OTel-collectorens endepunkt.

OTLPTraceExporter sender grupper af spans til en OpenTelemetry-kompatibel collector via HTTP i JSON- eller protobuf-format. Du konfigurerer collectorens URL (f.eks. dit OTel Collector-proxyendepunkt), og eksportøren håndterer serialisering og logik til nye forsøg automatisk.

Et span repræsenterer en enkelt arbejdsenhed i et spor: en komponentmontering, et API-kald eller en brugerinteraktion. Spans har et navn, et starttidspunkt, et sluttidspunkt, en status (OK eller ERROR) og et sæt nøgle-værdi-attributter. Relaterede spans forbindes via et fælles trace-id og forælder-barn-relationer.

Du opretter en tracer med provider.getTracer('react-app') og starter spans med tracer.startSpan('component-mount'). Når arbejdet er færdigt, skal du kalde span.end() for at registrere sluttidspunktet. Afslut altid spans — lækkede spans spilder hukommelse og skaber ufuldstændige data i din backend til observerbarhed.

Attributter beriger spans med kontekstuelle data: span.setAttribute('user.id', userId) eller span.setAttribute('route', location.pathname). Der kan søges i attributterne i din backend til observerbarhed, så du kan køre forespørgsler som "vis alle langsomme spans for bruger 42" eller "vis alle fejl på ruten /checkout".

@opentelemetry/instrumentation-fetch ændrer den globale fetch-funktion, så der automatisk oprettes spans for hver udgående HTTP-anmodning. Spannet indfanger URL'en, metoden, HTTP-statuskoden og varigheden uden ændringer i dine eksisterende fetch-kald.

Når fetch-instrumenteringen opretter et span til en udgående anmodning, indsætter den W3C TraceContext-traceparent-headeren i anmodningen. Den modtagende backend læser denne header og fortsætter det samme trace, så der oprettes et sammenhængende trace, der spænder over browser og server.

OTel skal initialiseres, før nogen komponenter mountes — typisk i appens entry-fil (main.tsx) før ReactDOM.createRoot-kaldet. Opret provideren, registrer processorer og eksportører, og kald provider.register() for at gøre den til den globale TracerProvider.

Registrering af enhver brugerinteraktion i apps med høj trafik genererer enorme mængder tracedata. Konfigurer en TraceIdRatioBased-sampler (f.eks. 10 % af traces) i TracerProvider for at reducere mængden. Udvælg altid 100 % af traces med fejl ved hjælp af en ParentBased-sampler for at sikre, at ingen fejl overses.

OpenTelemetry JavaScript SDK instrumenterer browsere med TracerProvider, BatchSpanProcessor og OTLPTraceExporter. Spans repræsenterer arbejdsenheder, der er beriget med attributter. Fetch-instrumenteringen opretter automatisk spans for API-kald og indsætter W3C TraceContext-headers til distribueret tracing fra ende til ende. Initialiser tidligt, udfør sampling på passende vis, og afslut altid spans for at bevare rene tracedata.