Surveillance des performances de ressources

Surveillance des performances de ressources

LE SDK RUM recueille les ressources de chaque vue RUM (chargement de page) : XMLHttpRequest (XHR), requêtes Fetch, mais également les images, les fichiers CSS, les ressources JavaScript et les fichiers de police. Un événement de ressource RUM est généré pour chaque ressource, avec des métadonnées et des durées précises.

Les ressources RUM héritent de tout le contexte lié à la vue RUM active au moment de la collecte.

Associer des ressources RUM à des traces de l’APM

Pour bénéficier d’une réelle visibilité de bout en bout sur vos requêtes au fur et à mesure qu’elles traversent les différentes couches de votre pile, associez vos données RUM aux traces de backend correspondantes. Vous pourrez ainsi effectuer les actions suivantes :

  • Localiser les problèmes au niveau du backend ayant généré une erreur pour les utilisateurs
  • Mesurer les répercussions d’un problème de votre pile sur les utilisateurs
  • Afficher des requêtes de bout en bout complètes dans les flamegraphs afin de naviguer facilement entre les fonctionnalités RUM et APM en conservant un contexte précis.

Consultez la section Associer RUM à vos traces pour en savoir plus sur la configuration de cette fonctionnalité.

Durée et métriques des ressources

Les méthodes natives Fetch et XHR pour navigateur, ainsi que l'API Performance Resource Timing, recueillent des données réseau temporelles détaillées.

Attribut Type Description
duration nombre Durée totale de chargement de la ressource.
resource.size nombre (octets) Taille de la ressource.
resource.connect.duration nombre (ns) Durée d’établissement d’une connexion au serveur (connectEnd - connectStart).
resource.ssl.duration nombre (ns) Durée d’établissement de la liaison TLS. Si la dernière requête ne suit pas le protocole HTTPS, cette métrique n’apparaît pas (connectEnd - secureConnectionStart).
resource.dns.duration nombre (ns) Durée de résolution du nom DNS de la dernière requête (domainLookupEnd - domainLookupStart).
resource.redirect.duration nombre (ns) Temps passé sur les requêtes HTTP ultérieures (redirectEnd - redirectStart).
resource.first_byte.duration nombre (ns) Temps écoulé avant la réception du premier octet de la réponse (responseStart - RequestStart).
resource.download.duration nombre (ns) Durée de téléchargement de la réponse (responseEnd - responseStart).

Remarque : si vous ne parvenez pas à recueillir les durées détaillées de certaines ressources, consultez la rubrique Durées des ressources et CORS.

Attributs des ressources

Attribut Type Description
resource.type chaîne Le type de ressource à recueillir (par exemple, css, javascript, media, XHR ou image).
resource.method chaîne La méthode HTTP (par exemple, POST ou GET).
resource.status_code nombre Le code de statut de la réponse.
resource.url chaîne L’URL de la ressource.
resource.url_host chaîne La partie de l’URL correspondant au host.
resource.url_path chaîne La partie de l’URL correspondant au chemin.
resource.url_query objet Les parties de l’URL correspondant à la chaîne de requête, décomposées en attributs key/value de paramètres de requête.
resource.url_scheme chaîne Le nom du protocole de l’URL (HTTP ou HTTPS).
resource.provider.name chaîne Le nom du fournisseur de ressources. Valeur par défaut : unknown.
resource.provider.domain chaîne Le domaine du fournisseur de ressources.
resource.provider.type chaîne Le type de fournisseur de ressources (par exemple, first-party, cdn, ad ou analytics).

Identifier les ressources tierces

La solution RUM récupère le nom et la catégorie du fournisseur de données à partir de l’élément « host » de l’URL de la ressource. Si cet élément correspond au host actuel de l’URL de la page, la catégorie est définie sur first party. Si ce n’est pas le cas, la catégorie prend par exemple pour valeur cdn, analytics ou social.

Durées des ressources et CORS

L'API Resource Timing sert à recueillir les durées des ressources RUM. Elle est limitée par les mesures de sécurité appliquées par les navigateurs contre l’usage de multiples origines dans des scripts. Par exemple, si votre application Web est hébergée sur www.example.com et qu’elle charge vos images via images.example.com, vous obtiendrez uniquement les durées des ressources chargées qui sont hébergées sur www.example.com par défaut.

Pour y remédier, activez la collecte de données supplémentaires pour les ressources concernées par le CORS (Cross-Origin Resource Sharing) en ajoutant l’en-tête de réponse HTTP Timing-Allow-Origin à vos ressources ayant de multiples origines. Par exemple, pour autoriser les durées des ressources à accéder à n’importe quelle origine, utilisez Timing-Allow-Origin: *. Consultez la documentation Web de MDN (en anglais) pour en savoir plus sur le mécanisme CORS.

Pour aller plus loin