Monitoring du SPA Browser 2.1

Important

Nous déployons cette fonctionnalité par phases à l'aide d'un indicateur de fonctionnalité pour remplacer l'expérience SPA du navigateur existante par défaut. Il n'y aura pas d'option permettant de choisir la nouvelle version SPA que vous recevrez ; vous recevrez toujours automatiquement la dernière version.

SPA 2.1

La prise en compte des tâches longues a été introduite pour remplacer le suivi de rappel étendu utilisé dans les anciennes applications à page unique (SPA). Il sert également à remplir les attributs jsDuration, timeToSettle et timeToLastCallbackEnd des événements AjaxRequest associés à une BrowserInteraction.

Pour certains objets de navigateur natifs enveloppés par le nrWrapper de l'agent, leur rappel sera chronométré. Celles d'une durée supérieure à 50 ms (tâche longue) peuvent prolonger une BrowserInteraction. Dans la version 2.0, la fonctionnalité suivait une heuristique de navigation douce pour déterminer quand une interaction se produisait naturellement. Désormais, l'interaction attendra et prolongera également sa durée jusqu'à une période sans tâche longue de 5 secondes, et son heure de fin sera réajustée en conséquence.

Auparavant, dans la version 2.0, AjaxRequest associé à l'interaction ne signalait ni ne suivait le temps de rappel, ce qui entraînait des valeurs annulées pour les trois attributs mentionnés ci-dessus. Avec la mise à jour actuelle, XMLHttpRequest (mais pas fetch) qui fait partie d'une interaction et inclut des écouteurs d'événements provoquant des tâches longues aura les attributs jsDuration, timeToSettle et timeToLastCallbackEnd mis à jour pour refléter le timing du rappel long.

SPA 2.0

Pour les clients monitoring les applications monopages (SPA) du navigateur, nous sommes ravis d'annoncer une refonte de notre fonctionnalité monitoring SPA, destinée à résoudre de nombreux problèmes :

Dernières versions inutilisables : des conflits fréquents avec des bibliothèques tierces et une capture interaction peu fiable ont affecté l'agent existant, rendant souvent la dernière version inutilisable.
Solutions patchwork : résoudre un problème avec des correctifs SPA en introduisait souvent un autre, créant un cycle frustrant de correctifs et de régressions.
Conflits de bibliothèques tierces : l'encapsulation globale, en particulier autour de Promises, perturbe souvent la fonctionnalité du code en raison de conflits avec d'autres bibliothèques.
Goulot d'étranglement des performances : les conflits avec le code utilisant des temporisateurs, RAF et la chaîne de promesses ont entraîné des problèmes de performances, allant des ralentissements aux blocages.

L’expérience monitoring SPA mise à jour est conçue pour éliminer ces problèmes et fournir une expérience monitoring considérablement améliorée. Les principaux changements incluent :

Exécution non encapsulée : en n'encapsulant pas les variables globales principales, la nouvelle expérience SPA libère des gains de vitesse d'exécution pour votre application.
Aligné sur les heuristiques de navigation souple : la nouvelle expérience adopte la navigation souple de Google Chrome, offrant un suivi interaction plus précis et un meilleur alignement avec le comportement du navigateur.
Détermination simplifiée interaction : les interactions sont désormais définies comme un événement d'UI (clic/appui sur une touche/soumission -> changement de route -> modification DOM ), offrant une approche de capture plus claire et plus efficace.
- Dissociation potentielle d'événements : vous pouvez observer que les événements AjaxRequest et JavascriptError précédemment associés se dissocient de l'interaction, reflétant l'accent mis sur l'interaction pilotée par UI .
Concentrez-vous sur les indicateurs clés : bien que les données rapportées restent en grande partie inchangées, la nouvelle expérience ne suit plus l'exécution JavaScript ni la durée de rappel au sein de l'interaction, simplifiant ainsi les informations rapportées.
Durées d'interaction réduites : attendez-vous à des durées d'interaction considérablement plus courtes, en particulier pour les changements d'itinéraire. Les chargements de pages initiaux connaîtront une légère réduction.
Mises à jour de l'API :
- Nouvel argument optionnel .interaction({waitForEnd: true}) ajouté à la fonction .interaction() : cela permet de personnaliser l'heure de fin de interaction de l'utilisateur. La fonctionnalité .interaction() existante reste inchangée.
- API obsolète : la fonction createTracer: bien que toujours fonctionnelle, la fonction createTracer est obsolète car elle ne maintient plus l'interaction ouverte ni les temps de rappel. Remarque : si vous continuez à utiliser createTracer avec la nouvelle expérience SPA, l'événement BrowserTiming ne sera pas créé.

Essayez la nouvelle expérience monitoring SPA du navigateur

Examiner les exigences

Cette fonctionnalité est testée et prise en charge conformément à notre déclaration de prise en charge standard du navigateur.

Ajouter l'indicateur de fonctionnalité

Si votre agent a été installé avec la méthode APM, contactez notre équipe d'assistance et nous activerons l'indicateur de fonctionnalité sur votre compte.

Si votre agent a été installé avec NPM ou la méthode copier/coller basée sur UI, ajoutez l'indicateur de fonctionnalité suivant au code de votre agent de navigateur :

Recherchez le code de l'agent du navigateur New Relic dans le code HTML de votre page Web.
Dans l’objet de configuration init, ajoutez l’indicateur de fonctionnalité soft_nav . Voici un exemple :
```
<script type="text/javascript"> ;window.NREUM||(NREUM={});init={ …, feature_flags: ['soft_nav'] }:
```
Déployez votre application.
Besoin de désactiver cette fonctionnalité ? Supprimez simplement l'indicateur de fonctionnalité.

Confirmer que les données sont envoyées à New Relic

Tout d’abord, vérifiez que votre interaction suit l’heuristique : clic/appui sur la touche/soumettre -> changement d’itinéraire -> modification DOM .

Ensuite, vérifiez l’onglet réseau dans les outils de développement de votre navigateur. Filtre pour requests allant à /events/1/. Il devrait y en avoir pour lesquels la charge commence par bel.7;1, indiquant que votre interaction est capturée et envoyée.

Enfin, les données interaction doivent continuer à circuler dans le dashboard et les graphiques de votre entité de navigateur.

Problèmes connus

Utilisation de l'API :
- newrelic.interaction().end() solution de contournement : si vous avez déjà utilisé cette solution pour résoudre les problèmes de fermeture interaction, vous risquez désormais de voir des interactions supplémentaires et inutiles. Passez en revue votre utilisation pour garantir des résultats optimaux.
- createTracer() changement de fonctionnalité : createTracer() ne maintient plus l'interaction ouverte ou ne déclenche plus le rappel. Si vous vous êtes appuyé sur cela pour suivre le code JavaScript, explorez des approches alternatives.
AjaxRequest association:
- Exclusion potentielle de l'interaction : requests Ajax initiées vers la fin de l'interaction précédente peuvent désormais être exclues en raison de durées interaction raccourcies.
- Extension manuelle : si vous avez besoin qu'une requête soit attribuée à une interaction spécifique, utilisez l'argument .interaction({waitForEnd: true}) ajouté à la fonction .interaction() pour maintenir l' interaction ouverte jusqu'à ce que la requête se déclenche, puis .end() l' interaction. Cela associera la demande à l’interaction.

Laisser les commentaires

Soumettez un problème GitHub pour signaler des bugs, requests de fonctionnalités ou des améliorations de performances.

Pour tout autre commentaire, partagez vos réflexions et suggestions en envoyant un e-mail à browser-agent@newrelic.com avec une ligne d'objet commençant par [SoftNav]: .

Cette traduction automatique est fournie pour votre commodité.