Frontend- und Backend-Traces korrelieren

Das übergeordnete Ziel der Frontend-Observability ist ein einzelner Trace, der den Klick eines Benutzers in React über das Netzwerk, API-Handler und Service-Aufrufe bis hin zur Datenbankabfrage verbindet, die eine langsame Antwort verursacht hat. Dieser Trace von Ende zu Ende ermöglicht eine sofortige Ursachenanalyse.

Die W3C-TraceContext-Spezifikation definiert das Format des traceparent-Headers: version-traceId-parentSpanId-flags. Ein Beispielwert sieht so aus: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. Die Trace-ID wird im gesamten verteilten Trace gemeinsam verwendet; die Parent-Span-ID ändert sich bei jedem Hop.

Die OTel-fetch-Instrumentierung fügt den traceparent-Header automatisch in jede ausgehende fetch-Anfrage ein. Der Header enthält die aktuelle Trace-ID und die Span-ID des Frontend-fetch-Spans als übergeordnete Span-ID, sodass das Backend einen Child-Span erstellen kann, der mit dem Frontend-Span verknüpft ist.

Auf dem Server liest die OTel-HTTP-Instrumentierung für Node.js/Express den eingehenden traceparent-Header und erstellt Spans, die Kinder des Frontend-fetch-Spans sind. Die Trace-ID bleibt erhalten, sodass Jaeger oder Grafana Tempo die gesamte Kette – Browser-Span → Express-Span → Datenbank-Span – in einer einzigen Wasserfallansicht darstellt.

Wenn Frontend und Backend instrumentiert sind, öffnen Sie Jaeger oder Grafana Tempo und suchen Sie nach einer Trace-ID. Sie sehen den vollständigen Wasserfall: oben den React-Komponenten-Span, darunter den fetch-Span, anschließend den Express-Route-Handler-Span und danach den Datenbankabfrage-Span – alle mit ihren Dauern und Attributen.

Setzen Sie user.id in Ihrer React-App mit span.setAttribute('user.id', userId) als Attribut für alle Spans. Tun Sie dasselbe im Backend. Nun können Sie Ihr Observability-Backend filtern, um alle Traces für eine bestimmte Benutzer-ID anzuzeigen, und so von einem bestimmten Kunden gemeldete Probleme diagnostizieren.

Generieren Sie beim Laden der Seite eine eindeutige Sitzungs-ID und setzen Sie sie in allen Frontend-Spans als session.id. Fügen Sie sie in Request-Header ein, damit das Backend sie ebenfalls an Backend-Spans anhängt. Mit Sitzungskorrelation können Sie die vollständige Abfolge der Aktionen rekonstruieren, die ein Benutzer in einer einzelnen Sitzung ausgeführt hat.

Kommerzielle Tools wie Datadog integrieren RUM-Sitzungen nativ mit APM-Traces. Das Datadog-RUM-SDK fügt eine bestimmte Header (X-Datadog-Trace-Id) in fetch-Anfragen ein, und das Datadog-APM-SDK im Backend liest ihn, um die RUM-Sitzungswiedergabe mit dem verteilten Trace zu verknüpfen – Sie können die Sitzungswiedergabe ansehen und gleichzeitig den Trace sehen.

Stellen Sie sich vor, ein Benutzer beschwert sich darüber, dass der Checkout langsam ist. Mit korrelierten Traces suchen Sie in Ihrem Observability-Backend nach user.id, finden den Checkout-Trace und sehen sofort, dass die Verlangsamung durch eine 900-ms-Datenbankabfrage verursacht wurde, bei der zwei große Tabellen verknüpft wurden – etwas, das allein in Frontend-Metriken unsichtbar bleibt.

Browser können Traces nicht direkt an Jaeger oder andere Backends senden (CORS-Beschränkungen und Offenlegung von Zugangsdaten). Betreiben Sie stattdessen einen OTel Collector als Proxy: Konfigurieren Sie den OTLPTraceExporter so, dass er an Ihren Collector-Endpunkt sendet, der die Daten anschließend an Jaeger, Grafana Tempo oder jedes andere Backend verteilt.

Frontend-Traces können unbeabsichtigt sensible Daten erfassen: Formularfeldwerte in URLs, personenbezogene Daten (PII) in Span-Attributen und Sitzungstoken in Headern. Prüfen Sie Ihre Instrumentierung, um sicherzustellen, dass keine sensiblen Daten in Span-Attributen enthalten sind. Verwenden Sie span.setAttribute sparsam und bereinigen Sie URL-Abfrageparameter, bevor Sie sie aufzeichnen.

Welches Format hat der W3C-TraceContext-Header traceparent?

Die Korrelation von Frontend- und Backend-Traces schafft durchgängige Transparenz über die gesamte Reise einer Benutzeranfrage. W3C-TraceContext-traceparent-Header verbinden Browser-fetch-Spans über die OTel-Instrumentierung automatisch mit Backend-Spans. Reichern Sie alle Spans mit user.id und session.id an, um gezielt Fehler zu untersuchen. Verwenden Sie einen OTel Collector als Proxy zwischen Browser und Backend, um CORS-Probleme und die Offenlegung von Zugangsdaten zu vermeiden.