Collecte de données SPA

Ce document explique comment le navigateur collecte et stocke les données de votre application monopage asynchrone (SPA). Cela vous donnera une meilleure compréhension des données SPA que vous voyez dans l'UIdu navigateur. Cela vous aidera également à ajouter plus facilement un monitoring personnalisé avec l' API SPA.

Interaction Browser

Au cœur de monitoring des ZPS se trouve le concept du browser interaction. New Relic définit une interaction avec le navigateur comme tout ce qui se produit dans le navigateur de l'utilisateur de l'application ; par exemple :

• Une interaction utilisateur qui conduit au chargement d'une page ou à un changement d'itinéraire
• Une mise à jour dynamique et planifiée du widget d'une application

Une interaction avec un navigateur inclut non seulement l'événement déclencheur initial, mais également l'activité provoquée par cet événement, comme requests AJAX et JavaScript synchrone et asynchrone. En suivant non seulement la cause mais aussi les effets d'une interaction avec un navigateur, nous vous aidons à comprendre comment les utilisateurs perçoivent les vues et les changements d'itinéraire de votre application.

Toutes les applications sont différentes et ont des besoins monitoring différents. C'est pourquoi nous incluons monitoring par défaut ainsi que la possibilité de configurer monitoring personnalisée pour toute interaction avec le navigateur que vous choisissez.

Types de reporting SPA des données

Trois grandes catégories de données d’application à page unique peuvent être signalées à New Relic :

• Chargement initial de la page
• Modifications d'itinéraire
• Interaction de navigateur personnalisée créée via l' API SPA

Chacun d’entre eux crée un événement BrowserInteraction . Si une ou plusieurs requests AJAX font partie d'une interaction, les événements AjaxRequest associés sont également créés. Ces événements et leurs attribut peuvent être requêtes dans le générateur de requêtes.

Chargement initial de la page

Un initial page load est un changement d’URL traditionnel, résultant d’un chargement ou d’un rechargement complet d’une URL. Ceci est indiqué dans le navigateur lorsqu'un événement de chargement de page se déclenche (l'événement window.onload ). Les chargements de page initiaux apparaissent avec les changements d'itinéraire dans l'UI du navigateur.

Modifications d'itinéraire

Les utilisateurs de SPA expérimentent des changements d'itinéraire dynamiques de manière similaire aux chargements de pages. Les visiteurs d'un site ou d'une application ne se soucient généralement pas de savoir how une nouvelle vue leur a été fournie ; ils savent simplement que lorsqu'ils effectuent une action, une nouvelle vue apparaît. Pour cette raison, nous traitons les changements d'itinéraire de la même manière que les chargements de pages dans l'UI.

Afin de monitorer de manière optimale les applications monopages, nous commençons par monitoring de nombreuses interactions avec le navigateur qui pourraient théoriquement conduire à des changements d'itinéraire.

• Si ces interactions n’entraînent pas de modifications d’itinéraire, le navigateur lance monitoring mais les ignore ensuite.
• Si ces interactions do conduisent à un changement d'itinéraire, le navigateur enregistre la séquence interaction en tant qu'événement BrowserInteraction, incluant des informations sur l'activité synchrone et asynchrone.

Une interaction est considérée comme un changement d'itinéraire et enregistrée en tant qu'événement BrowserInteraction lorsque l'un des événements suivants se produit :

• L'URL hacher change (généralement en utilisant window.location.hash).
• Un événement popstate se déclenche pendant un rappel associé à une interaction.
• Une API pushState ou replaceState est appelée.

Les modifications d'itinéraire apparaissent avec les chargements de page initiaux dans l' UIdu navigateur.

Nous recevons et sauvegardons des fragments de hacher à partir des URL de changement d'itinéraire. Si vous utilisez hacher pour transmettre des données privées ou sensibles, ces données peuvent être visibles par l'utilisateur de votre compte New Relic. Pour plus d'informations sur la collecte et la création de rapports de données, voir Sécurité du navigateur.

monitoringpersonnalisé

Vous pouvez utiliser l' API SPA pour configurer monitoring personnalisée des interactions du navigateur qui ne sont pas monitorées par défaut. Vous pouvez également utiliser l'API pour désactiver monitoring par défaut.

l'événement personnalisé est enregistré sous BrowserInteraction événement et possède l'attribut suivant :

• L'attribut category aura la valeur Custom.
• L'attribut trigger aura la valeur api. (Il s'agit de la valeur par défaut mais peut être modifiée avec l'API.)

Différence avec le temps de chargement des pages traditionnelles

Pour fournir des données optimisées pour monitoring des applications sur une seule page, nous mesurons le temps de chargement des pages d'une nouvelle manière : en enveloppant des fonctions de navigateur de bas niveau, à la fois synchrones et asynchrones. Cela donne une représentation plus complète du temps nécessaire pour effectuer les modifications requises pour une nouvelle vue.

Ceci est différent de la méthode traditionnelle de chronométrage du chargement des pages. La synchronisation traditionnelle du chargement des pages utilise le déclenchement de l'événement window.onload pour déterminer quand une page est chargée. Il ne s’agit pas d’une méthode optimale pour mesurer le temps de changement de vue, car les applications Web ont souvent du code asynchrone qui s’exécute pendant une durée significative après l’événement window.onload .

Le temps de chargement traditionnel de la page window.onload apparaît toujours sur la page SPA Page views . Lorsque vous sélectionnez un événement de chargement de page spécifique, Window onload apparaît sous la forme d'une ligne rouge dans le graphique des temps de chargement de page. Vous pouvez également sélectionner Switch to standard page views pour revenir aux affichages de temps de chargement traditionnels.

Minuteries

L'agent monitore tous les appels asynchrones, y compris les minuteries. Les minuteries dont la durée est inférieure à une seconde sont enveloppées. Les temporisateurs d'une durée supérieure à une seconde ne sont pas encapsulés car ils sont généralement destinés à des transactions non Web, telles que des travaux en arrière-plan ou des sondages qui ne sont pas liés à un utilisateur interaction .

événement et attribut

Nous enregistrons les interactions du navigateur qui conduisent à des changements d'itinéraire et à des chargements de pages comme événement BrowserInteraction et requests AJAX comme événement AjaxRequest. Vous pouvez requêter ces événements dans le générateur de requêtes.