Corréler les traces du frontend et du backend

L’objectif ultime de l’observabilité de l’interface est d’obtenir une seule trace reliant le clic d’un utilisateur dans React au réseau, aux gestionnaires d’API, aux appels de services, puis à la requête de base de données à l’origine d’une réponse lente. Cette trace de bout en bout rend l’analyse de la cause racine immédiate.

La spécification W3C TraceContext définit le format de l’en-tête traceparent : version-traceId-parentSpanId-flags. Un exemple de valeur est : 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. L’identifiant de trace est partagé dans toute la trace distribuée ; l’identifiant du segment parent change à chaque relais.

L’instrumentation fetch d’OpenTelemetry injecte automatiquement l’en-tête traceparent dans chaque requête fetch sortante. Cet en-tête contient l’identifiant de trace actuel ainsi que l’identifiant du segment fetch de l’interface, utilisé comme parent, ce qui permet au serveur de créer un segment enfant lié au segment de l’interface.

Sur le serveur, l’instrumentation HTTP d’OpenTelemetry pour Node.js/Express lit l’en-tête traceparent entrant et crée des segments enfants du segment fetch de l’interface. L’identifiant de trace est conservé : Jaeger ou Grafana Tempo affiche ainsi toute la chaîne — segment du navigateur → segment Express → segment de base de données — dans une vue en cascade unique.

Une fois l’interface et le serveur instrumentés, ouvrez Jaeger ou Grafana Tempo et recherchez un identifiant de trace. Vous verrez la cascade complète : le segment du composant React en haut, le segment fetch en dessous, puis le segment du gestionnaire de route Express et enfin le segment de la requête de base de données — tous accompagnés de leur durée et de leurs attributs.

Définissez user.id comme attribut sur tous les segments de votre application React à l’aide de span.setAttribute('user.id', userId). Faites de même sur le serveur. Vous pouvez alors filtrer votre plateforme d’observabilité pour afficher toutes les traces associées à un identifiant utilisateur donné, ce qui vous permet de diagnostiquer les problèmes signalés par un client précis.

Générez un identifiant de session unique lors du chargement de la page et définissez-le comme session.id sur tous les segments de l’interface. Incluez-le dans les en-têtes des requêtes afin que le serveur l’ajoute également à ses segments. La corrélation par session vous permet de reconstituer la séquence complète des actions effectuées par un utilisateur au cours d’une même session.

Les outils commerciaux comme Datadog intègrent nativement les sessions RUM aux traces APM. Le SDK RUM de Datadog injecte un en-tête spécifique (X-Datadog-Trace-Id) dans les requêtes fetch, et le SDK APM de Datadog sur le serveur le lit pour relier la relecture de la session à la trace distribuée — vous pouvez regarder la relecture de la session tout en consultant la trace.

Imaginez qu’un utilisateur se plaigne de la lenteur du paiement. Grâce aux traces corrélées, recherchez user.id dans votre plateforme d’observabilité, trouvez la trace du paiement et constatez immédiatement que le ralentissement vient d’une requête de base de données de 900 ms qui joint deux tables volumineuses — un problème invisible dans les seules métriques de l’interface.

Les navigateurs ne peuvent pas envoyer directement des traces à Jaeger ou à d’autres plateformes (restrictions CORS et exposition d’informations d’identification). Exécutez plutôt un collecteur OpenTelemetry comme proxy : configurez OTLPTraceExporter pour envoyer les données à votre point de terminaison du collecteur, qui les répartira ensuite vers Jaeger, Grafana Tempo ou toute autre plateforme.

Les traces de l’interface peuvent capturer par inadvertance des données sensibles : valeurs de champs de formulaire dans les URL, PII dans les attributs de segments et jetons de session dans les en-têtes. Examinez votre instrumentation pour vous assurer qu’aucune donnée sensible n’est incluse dans les attributs de segments. Utilisez span.setAttribute avec parcimonie et assainissez les paramètres de requête des URL avant de les enregistrer.

Quel est le format de l’en-tête traceparent de W3C TraceContext ?

La corrélation des traces de l’interface et du serveur offre une visibilité de bout en bout sur l’ensemble du parcours d’une requête utilisateur. Les en-têtes traceparent de W3C TraceContext relient automatiquement les segments fetch du navigateur aux segments du serveur grâce à l’instrumentation OpenTelemetry. Enrichissez tous les segments avec user.id et session.id pour faciliter le débogage ciblé. Utilisez un collecteur OpenTelemetry comme proxy entre le navigateur et le serveur afin d’éviter les problèmes de CORS et l’exposition d’informations d’identification.