OpenTelemetry-tracet selaimesta

Selainten OpenTelemetry JavaScript SDK koostuu useista paketeista: @opentelemetry/sdk-trace-web tarjoaa jäljityksen ydintoteutuksen, @opentelemetry/instrumentation-fetch luo automaattisesti spanit kaikille fetch API -kutsuille ja @opentelemetry/exporter-trace-otlp-http lähettää spanit kerääjälle.

TracerProvider on OpenTelemetryn keskitetty määritysobjekti. Se sisältää SpanProcessor-luettelon, joka määrittää valmiiden spanien käsittelyn, sovellusta kuvaavan resurssin (palvelun nimi ja versio) sekä mahdolliset otanta-asetukset.

BatchSpanProcessor kerää valmiit spanit muistiin ja vie ne erissä sen sijaan, että jokainen span lähetettäisiin erikseen. Tämä vähentää huomattavasti kerääjälle tehtävien HTTP-pyyntöjen määrää, parantaa selaimen suorituskykyä ja vähentää OTel-kerääjän päätepisteen kuormaa.

OTLPTraceExporter lähettää erissä kerätyt spanit OpenTelemetry-yhteensopivalle kerääjälle HTTP:n kautta JSON- tai protobuf-muodossa. Määritätte kerääjän URL-osoitteen, esimerkiksi oman OTel Collector -välityspalvelimen päätepisteen, ja vientikomponentti huolehtii sarjallistamisesta ja uudelleenyrityksistä automaattisesti.

Span edustaa yhtä työyksikköä jäljityksen sisällä: komponentin mounttausta, API-kutsua tai käyttäjän vuorovaikutusta. Spaneilla on nimi, aloitusaika, lopetusaika, tila (OK tai ERROR) sekä joukko avain–arvo-määritteitä. Toisiinsa liittyvät spanit yhdistetään jaetulla trace ID:llä sekä isäntä–lapsi-suhteilla.

Luotte tracerin kutsulla provider.getTracer('react-app') ja aloitatte spanit kutsulla tracer.startSpan('component-mount'). Kun työ on valmis, tallentakaa lopetusaika kutsumalla span.end(). Lopettakaa spanit aina — vuotavat spanit kuluttavat muistia ja tuottavat puutteellisia tietoja havainnoitavuuden taustajärjestelmään.

Määritteet rikastavat spaneja asiayhteystiedoilla: span.setAttribute('user.id', userId) tai span.setAttribute('route', location.pathname). Määritteitä voi hakea havainnoitavuuden taustajärjestelmästä, joten voitte tehdä kyselyitä, kuten "näytä kaikki käyttäjän 42 hitaat spanit" tai "näytä kaikki /checkout-reitin virheet".

@opentelemetry/instrumentation-fetch korvaa globaalin fetch-funktion automaattisesti ja luo spanin jokaiselle lähtevälle HTTP-pyynnölle. Span tallentaa URL-osoitteen, metodin, HTTP-statuskoodin ja keston ilman muutoksia olemassa oleviin fetch-kutsuihin.

Kun fetch-instrumentointi luo spanin lähtevää pyyntöä varten, se lisää pyyntöön W3C TraceContextin traceparent-otsakkeen. Vastaanottava backend lukee tämän otsakkeen ja jatkaa samaa tracea, jolloin selaimen ja palvelimen kattava yhtenäinen trace muodostuu.

OTel:n alustus on tehtävä ennen yhdenkään komponentin mounttaamista — yleensä sovelluksen käynnistystiedostossa (main.tsx) ennen ReactDOM.createRoot-kutsua. Luokaa provider, rekisteröikää processorit ja exporterit ja kutsukaa provider.register()-metodia, jotta siitä tulee globaali TracerProvider.

Jokaisen käyttäjän toiminnon tallentaminen paljon liikennettä käsittelevissä sovelluksissa tuottaa valtavan määrän jäljitystietoja. Määrän vähentämiseksi määrittäkää TracerProviderissa TraceIdRatioBased-sampler (esimerkiksi ottamaan 10 % traceista mukaan). Ottakaa ParentBased-samplerin avulla kaikki virheiden tracet aina 100-prosenttisesti mukaan, jotta yksikään virhe ei jää huomaamatta.

OpenTelemetry JavaScript SDK instrumentoi selaimet TracerProviderin, BatchSpanProcessorin ja OTLPTraceExporterin avulla. Spanit edustavat työyksiköitä, joita rikastetaan attribuuteilla. Fetch-instrumentointi luo API-kutsuille automaattisesti spanit ja lisää W3C TraceContext -otsakkeet, mikä mahdollistaa hajautetun jäljityksen päästä päähän. Alustakaa SDK ajoissa, määrittäkää näytteenotto tarkoituksenmukaisesti ja päättäkää spanit aina, jotta jäljitystiedot pysyvät selkeinä.