données de navigateur dans le tracing distribué

Si vous utilisez New Relic pour monitorer l'activité finale du navigateur de l'utilisateur, vous pouvez profiter du tracing distribué pour voir les traces côté navigateur qui proviennent de l'expérience finale de l'utilisateur.

tracer l'activité du frontend au backend

En signalant les données du navigateur dans le tracing distribué, vous pouvez voir le lien entre l'activité du frontend et l'activité backend . New Relic trace les données sur l'ensemble d'une transaction, du temps passé par un utilisateur final dans le navigateur Web, à l'activité réseau, jusqu'aux services backend associés. Cela vous aide à :

• Détectez plus facilement la latence, les erreurs et les anomalies dans le navigateur ou le réseau.
• Résolvez plus rapidement les problèmes des clients.
• Appliquez tous les avantages du tracing distribué à votre monitoring utilisateur final.

Cette fonctionnalité signale requests AJAX (Fetch et XHR) qui se produisent lors d'une interactionavec le navigateur. Par défaut, seules requests à origine unique sont monitorées, sauf si le partage de ressources entre origines multiples est activé.

Versions du navigateur et de l'APM

Assurez-vous de disposer des versions minimales nécessaires pour votre agent monitoring de navigateurset votre agent APM :

Browser monitoring:

• Pour le tracing distribué : agent navigateur Pro+SPA avec tracing distribué activé et agent navigateur version 1153 ou supérieure
• Pour le partage de ressources entre origines: version de l'agent de navigateur 1158 ou supérieure
• Pour la prise en charge du contexte de trace W3C : version 1173 ou supérieure de l'agent du navigateur

APM:

• Java 5.9.0 ou supérieur
• PHP 9.4.0 ou supérieur
• Autres exigences de version de l'agent APM

Activer le tracing distribuéc

Par défaut, pour la version d'agent 1173 et supérieure, les en-têtes newrelic, traceparent et tracestate seront ajoutés à toutes requests AJAX de même origine. (Si vous les excluez, aucun en-tête ne sera envoyé.) Pour plus d'informations, consultez notre documentation sur les en-têtes de contexte de trace W3C.

Pour activer le tracing distribué pour monitoring des navigateurs :

1. Assurez-vous que votre agent monitoring des navigateurs et votre agent APM sont compatibles avec le tracing distribué. Mettre à jour vers la version la plus récente si applicable.
2. Allez à one.newrelic.com > All capabilities > Browser > (select an app) > Settings > Application settings.
3. Activez le bouton bascule Distributed tracing .
4. Facultatif : activer le partage des ressources entre origines.
5. Redéployez l'agent monitoring des navigateurs, soit en redémarrant l'agent APM associé, soit en mettant à jour l'installation du navigateur par copier/coller.
6. Si vous avez des applications ou des services en aval de votre application de navigateur et qu'ils utilisent Infinite Tracing, suivez les étapes de configuration pour Infinite Tracing.

En-têtes de contexte de trace W3C

Avec la sortie de l'agent monitoring des navigateurs version 1173, nous prenons en charge les en-têtes W3C Trace Context (traceparent et tracestate), assurez-vous donc de les autoriser dans votre configuration. W3C Trace Context définit une paire d'en-têtes HTTP de contexte standardisés qui servent à propager les informations de corrélation de contexte entre les services :

• Un en-tête traceparent contient les éléments de données dont chaque modèle de tracing distribué a besoin pour définir et propager le contexte : un ID trace , un ID parent et un indicateur d'échantillon.
• Un en-tête tracestate contient des données contextuelles spécifiques au fournisseur, généralement afin de prendre en charge des fonctionnalités supplémentaires ou des optimisations associées à un outil de traçage particulier.

Pour plus d'informations sur W3C Trace Context, consultez notre article de blog.

Activer le partage de ressources entre origines (CORS)

Si vous avez requests AJAX qui nécessitent des ressources provenant d'origines différentes, vous pouvez activer le partage de ressources entre origines (CORS). Par défaut, le tracing distribué pour requests cross-origin n'est pas activé en raison des restrictions de sécurité CORS du navigateur : le tracing distribué est implémenté en ajoutant des en-têtes HTTP personnalisés (newrelic, traceparent et tracestate) aux requests AJAX sortantes, et les navigateurs n'autorisent généralement pas les en-têtes personnalisés sur requests cross-origin.

Deux configurations distinctes sont requises pour activer le tracing d'origine croisée distribué :

1. Configurez le service sur l’origine différente pour accepter l’en-tête personnalisé newrelic .
2. Configurez monitoring des navigateurs dans votre Application settings pour inclure l'origine cible dans le tracing distribué.

Cette section fournit des concepts et des étapes clés pour activer et configurer CORS. Si vous avez besoin de plus d'informations sur le fonctionnement du partage de ressources entre origines, nous vous recommandons ce document destiné aux développeurs Mozilla.

Access-Control-Allow-Headers: newrelic, traceparent, tracestate

Activer Infinite Tracing

Nous proposons une fonctionnalité de tracing distribué en fin de flux de travail appelée Infinite Tracing. Si vos applications de navigateur disposent de services en aval, assurez-vous de les activer. Cela garantit que votre span racine (l'application de navigateur d'origine) est incluse dans le reste des spans suivis par Infinite Tracing.

Pour configurer le Infinite Tracing :

1. Suivez les étapes pour activer le tracing distribué.
2. Accédez à notre documentation Infinite Tracing, puis suivez les étapes pour créer un observateur de trace et sélectionner les applications (sources de données) auxquelles vous souhaitez envoyer des étendues de trace à l'observateur de trace Infinite Tracing.

Explorez vos données de trace

Voici quelques conseils pour rechercher et interroger vos données de trace dans New Relic.

Dépannage

Si vous ne voyez pas les portées finales des utilisateurs ou si vous rencontrez d'autres problèmes de tracing distribué, consultez notre documentation de dépannage .