Käyttöliittymän ja taustan tracejen yhdistäminen

Frontendin observabilityn perimmäinen tavoite on yksittäinen trace, joka yhdistää käyttäjän Reactissa tekemän napsautuksen verkon, API-käsittelijöiden ja palvelukutsujen kautta aina hitauden aiheuttaneeseen tietokantakyselyyn asti. Tämä päästä päähän ulottuva trace tekee juurisyyanalyysistä välitöntä.

W3C TraceContext -määritys määrittelee traceparent-otsakkeen muodon: version-traceId-parentSpanId-flags. Esimerkkiarvo on: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. Trace ID jaetaan koko hajautetun tracen kesken, kun taas parent span ID vaihtuu jokaisessa siirtymässä.

OTel:n fetch-instrumentointi lisää traceparent-otsakkeen automaattisesti jokaiseen lähtevään fetch-pyyntöön. Otsake sisältää nykyisen trace ID:n sekä frontendin fetch-spanin span ID:n parentina, minkä ansiosta backend voi luoda frontend-spaniin linkitetyn lapsispanin.

Palvelimella Node.js/Expressin OTel HTTP -instrumentointi lukee saapuvan traceparent-otsakkeen ja luo spanit frontendin fetch-spanin lapsiksi. Trace ID säilyy samana, joten Jaeger tai Grafana Tempo näyttää koko ketjun — selaimen spanin → Express-spanin → tietokantapanin — yhdessä waterfall-näkymässä.

Kun sekä frontend että backend on instrumentoitu, avaa Jaeger tai Grafana Tempo ja hae trace ID:n perusteella. Näet koko waterfallin: ylimpänä React-komponentin spanin, sen alapuolella fetch-spanin, sitten Express-reititinkäsittelijän spanin ja lopuksi tietokantakyselyn spanin — kaikilla omat kestonsa ja attribuuttinsa.

Aseta user.id attribuutiksi kaikkiin React-sovelluksen span-objekteihin käyttämällä span.setAttribute('user.id', userId). Tee sama backendissä. Nyt voit suodattaa observability-backendissäsi kaikki tietyn käyttäjän ID:n tracet, mikä auttaa tietyn asiakkaan ilmoittamien ongelmien diagnosoinnissa.

Luo sivun latautuessa yksilöllinen istunto-ID ja aseta se kaikkien frontend-spanien session.id-attribuutiksi. Sisällytä se pyyntöjen otsakkeisiin, jotta backend lisää sen myös backend-spanien attribuutiksi. Istunnon perusteella tehtävän korreloinnin avulla voit muodostaa uudelleen kaikki käyttäjän yhden istunnon aikana tekemät toimet.

Kaupalliset työkalut, kuten Datadog, integroivat RUM-istunnot APM-traceihin natiivisti. Datadog RUM SDK lisää fetch-pyyntöihin tietyn otsakkeen (X-Datadog-Trace-Id), ja backendin Datadog APM SDK lukee sen yhdistääkseen RUM-istunnon toiston hajautettuun traceen — voit tarkastella istunnon toistoa ja tracea samanaikaisesti.

Oletetaan, että käyttäjä ilmoittaa kassatoiminnon olevan hidas. Korreloitujen tracejen avulla haet observability-backendistä user.id:n perusteella kassatoiminnon tracen ja näet heti, että hidastumisen aiheutti 900 millisekunnin tietokantakysely, joka yhdisti kaksi suurta taulua — asia, jota frontend-metriikat eivät yksin paljasta.

Selaimet eivät voi lähettää traceja suoraan Jaegeriin tai muihin backendeihin CORS-rajoitusten ja tunnistetietojen paljastumisen vuoksi. Suorita sen sijaan OTel Collector välityspalvelimena: määritä OTLPTraceExporter lähettämään tiedot Collector-päätepisteeseesi, joka välittää ne edelleen Jaegeriin, Grafana Tempoon tai mihin tahansa muuhun backendiin.

Frontend-tracet voivat vahingossa kerätä arkaluonteisia tietoja: lomakekenttien arvoja URL-osoitteissa, henkilötietoja span-attribuuteissa ja istuntotunnuksia otsakkeissa. Tarkista instrumentointisi varmistaaksesi, ettei span-attribuutteihin sisälly arkaluonteisia tietoja. Käytä span.setAttributea harkiten ja puhdista URL-kyselyparametrit ennen niiden tallentamista.

Frontend- ja backend-tracejen korrelointi tarjoaa näkyvyyden käyttäjän koko pyyntöpolkuun päästä päähän. W3C TraceContextin traceparent-otsakkeet yhdistävät selaimen fetch-spanit backend-spanien kanssa automaattisesti OTel-instrumentoinnin avulla. Rikasta kaikki spanit user.id- ja session.id-attribuuteilla kohdennettua vianmääritystä varten. Käytä OTel Collectoria selaimen ja backendin välisenä välityspalvelimena CORS-ongelmien ja tunnistetietojen paljastumisen välttämiseksi.