Correlazione delle trace frontend e backend

L'obiettivo ultimo dell'osservabilità frontend è ottenere un'unica traccia che colleghi il clic dell'utente in React alla rete, ai gestori API, alle chiamate ai servizi e infine alla query del database che ha causato una risposta lenta. Questa traccia end-to-end rende immediata l'analisi della causa principale.

La specifica W3C TraceContext definisce il formato dell'header traceparent: version-traceId-parentSpanId-flags. Un valore di esempio è: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. Il trace ID è condiviso nell'intera traccia distribuita, mentre il parent span ID cambia a ogni passaggio.

La strumentazione fetch di OTel inietta automaticamente l'header traceparent in ogni richiesta fetch in uscita. L'header contiene il trace ID corrente e lo span ID dello span fetch frontend come parent, consentendo al backend di creare uno span figlio collegato allo span frontend.

Sul server, la strumentazione HTTP OTel per Node.js/Express legge l'header traceparent in ingresso e crea span figli dello span fetch frontend. Il trace ID viene preservato, quindi Jaeger o Grafana Tempo mostrano l'intera catena — span del browser → span di Express → span del database — in un'unica vista a cascata.

Quando frontend e backend sono entrambi strumentati, apra Jaeger o Grafana Tempo e cerchi un trace ID. Vedrà l'intera vista a cascata: in alto lo span del componente React, sotto lo span fetch, poi lo span del gestore della route Express e infine lo span della query al database, tutti con le rispettive durate e attributi.

Imposti user.id come attributo su tutti gli span della Sua app React utilizzando span.setAttribute('user.id', userId). Faccia lo stesso sul backend. Ora può filtrare il backend di osservabilità per visualizzare tutte le tracce relative a uno specifico user ID, così da diagnosticare i problemi segnalati da un determinato cliente.

Generi un ID di sessione univoco al caricamento della pagina e lo imposti come session.id su tutti gli span frontend. Lo includa negli header delle richieste, in modo che anche il backend lo associ ai propri span. La correlazione per sessione consente di ricostruire la sequenza completa delle azioni eseguite dall'utente in una singola sessione.

Gli strumenti commerciali come Datadog integrano nativamente le sessioni RUM con le tracce APM. L'SDK RUM di Datadog inietta un header specifico (X-Datadog-Trace-Id) nelle richieste fetch e l'SDK APM di Datadog sul backend lo legge per collegare la riproduzione della sessione alla traccia distribuita: può guardare la riproduzione della sessione e la traccia contemporaneamente.

Supponga che un utente segnali che il checkout è lento. Con le tracce correlate, cerca per user.id nel Suo backend di osservabilità, trova la traccia del checkout e vede immediatamente che il rallentamento è stato causato da una query al database di 900 ms che univa due tabelle di grandi dimensioni, un problema invisibile alle sole metriche frontend.

I browser non possono inviare direttamente le tracce a Jaeger o ad altri backend, a causa delle restrizioni CORS e dell'esposizione delle credenziali. Esegua invece un OTel Collector come proxy: configuri OTLPTraceExporter per inviare i dati all'endpoint del Collector, che poi li distribuisce a Jaeger, Grafana Tempo o qualsiasi altro backend.

Le tracce frontend possono catturare inavvertitamente dati sensibili: valori dei campi dei moduli negli URL, PII negli attributi degli span e token di sessione negli header. Esamini la strumentazione per assicurarsi che nessun dato sensibile venga incluso negli attributi degli span. Utilizzi span.setAttribute con parsimonia e sanifichi i parametri di query degli URL prima di registrarli.

Qual è il formato dell'header traceparent di W3C TraceContext?

La correlazione tra le tracce frontend e backend offre visibilità end-to-end sull'intero percorso della richiesta dell'utente. Gli header traceparent di W3C TraceContext collegano automaticamente gli span fetch del browser agli span backend tramite la strumentazione OTel. Arricchisca tutti gli span con user.id e session.id per un debugging mirato. Utilizzi un OTel Collector come proxy tra browser e backend per evitare problemi CORS e l'esposizione delle credenziali.