Korelowanie śladów frontendu i backendu

Ostatecznym celem obserwowalności frontendu jest pojedynczy trace łączący kliknięcie użytkownika w React z siecią, handlerami API, wywołaniami usług oraz zapytaniem do bazy danych, które spowodowało wolną odpowiedź. Taki trace od początku do końca umożliwia natychmiastową analizę przyczyny źródłowej.

Specyfikacja W3C TraceContext definiuje format nagłówka traceparent: version-traceId-parentSpanId-flags. Przykładowa wartość wygląda tak: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. Identyfikator trace jest współdzielony w całym rozproszonym trace, natomiast identyfikator parent span zmienia się na każdym etapie.

Instrumentacja fetch w OTel automatycznie wstrzykuje nagłówek traceparent do każdego wychodzącego żądania fetch. Nagłówek zawiera bieżący identyfikator trace oraz identyfikator spanu frontendowego fetch jako parent, dzięki czemu backend może utworzyć span podrzędny powiązany ze spanem frontendu.

Po stronie serwera instrumentacja HTTP OTel dla Node.js/Express odczytuje przychodzący nagłówek traceparent i tworzy spany podrzędne wobec frontendowego spanu fetch. Identyfikator trace zostaje zachowany, więc Jaeger lub Grafana Tempo pokazuje cały łańcuch — span przeglądarki → span Express → span bazy danych — w jednym widoku waterfall.

Po zinstrumentowaniu frontendu i backendu należy otworzyć Jaeger lub Grafana Tempo i wyszukać identyfikator trace. Zobaczą Państwo pełny widok waterfall: na górze span komponentu React, pod nim span fetch, następnie span handlera trasy Express, a na końcu span zapytania do bazy danych — wszystkie wraz z czasami trwania i atrybutami.

Należy ustawić user.id jako atrybut wszystkich spanów w aplikacji React za pomocą span.setAttribute('user.id', userId). To samo należy zrobić po stronie backendu. Dzięki temu można filtrować backend obserwowalności, aby wyświetlić wszystkie trace dla konkretnego identyfikatora użytkownika i diagnozować problemy zgłoszone przez określonego klienta.

Przy ładowaniu strony należy wygenerować unikatowy identyfikator sesji i ustawić go jako session.id we wszystkich spanach frontendu. Należy dołączać go do nagłówków żądań, aby backend również dodawał go do swoich spanów. Korelacja sesji pozwala odtworzyć pełną sekwencję działań użytkownika wykonanych w ramach jednej sesji.

Narzędzia komercyjne, takie jak Datadog, natywnie integrują sesje RUM z trace APM. Datadog RUM SDK wstrzykuje do żądań fetch określony nagłówek (X-Datadog-Trace-Id), a Datadog APM SDK po stronie backendu odczytuje go, aby połączyć nagranie sesji RUM z rozproszonym trace — można jednocześnie oglądać nagranie sesji i trace.

Załóżmy, że użytkownik zgłasza, iż realizacja zakupu trwa zbyt długo. Dzięki skorelowanym trace można wyszukać user.id w backendzie obserwowalności, znaleźć trace realizacji zakupu i od razu zobaczyć, że przyczyną spowolnienia było trwające 900 ms zapytanie do bazy danych, łączące dwie duże tabele — coś, czego same metryki frontendu nie pozwoliłyby wykryć.

Przeglądarki nie mogą wysyłać trace bezpośrednio do Jaeger ani innych backendów (ze względu na ograniczenia CORS i ryzyko ujawnienia danych uwierzytelniających). Zamiast tego należy uruchomić OTel Collector jako proxy: skonfigurować OTLPTraceExporter tak, aby wysyłał dane do endpointu Collectora, który następnie przekazuje je do Jaeger, Grafana Tempo lub dowolnego innego backendu.

Trace frontendu mogą przypadkowo przechwytywać dane wrażliwe: wartości pól formularzy w adresach URL, dane osobowe w atrybutach spanów czy tokeny sesji w nagłówkach. Należy sprawdzić instrumentację, aby upewnić się, że atrybuty spanów nie zawierają danych wrażliwych. Z span.setAttribute należy korzystać oszczędnie, a przed zapisaniem parametrów zapytania URL należy je oczyścić.

Jaki jest format nagłówka traceparent standardu W3C TraceContext?

Korelacja trace frontendu i backendu zapewnia widoczność od początku do końca pełnej drogi żądania użytkownika. Nagłówki traceparent standardu W3C TraceContext automatycznie łączą spany fetch przeglądarki ze spanami backendu dzięki instrumentacji OTel. Należy wzbogacać wszystkie spany o user.id i session.id, aby ułatwić ukierunkowane debugowanie. OTel Collector należy wykorzystywać jako proxy między przeglądarką a backendem, aby uniknąć problemów z CORS i ujawniania danych uwierzytelniających.