Déboguer les problèmes du frontend en temps réel grâce à New Relic Session Replay

Démêler les bugs du frontend revient à décoder un mystère : chaque clic, chaque interaction client peut contenir un indice. Imaginez jouer au détective dans un environnement le plus immersif possible ? Voici New Relic Session Replay, notre outil qui vous place au cœur des expériences utilisateur pour vous permettre d'observer et de disséquer les problèmes en temps réel. Ce n'est pas juste un autre outil de débogage : vous êtes au premier rang des parcours utilisateur. Allons voir de plus près comment cet outil peut devenir votre plus puissant allier pour le dépannage du frontend. 

Dans cet article, nous vous guiderons pour :

• Comprendre Session Replay
• Configurer Session Replay
• Examiner les sessions utilisateur
• Dépanner les problèmes du frontend

Pourquoi Session Replay ?

Avoir le bon point de vue est crucial lorsqu'on parle dépannage et optimisation des expériences utilisateur. Les outils de débogage traditionnels proposent métriques, logs et graphiques de données. Ils sont d'une grande utilité mais ne donnent qu'une vue d'ensemble. Parfois, vous avez besoin d'une vue sur le terrain et détaillée pour réellement comprendre où se trouvent les problèmes.

Contexte visuel 

Les chiffres et les logs ne racontent qu'une partie de l'histoire. Session Replay la complète en fournissant un contexte visuel. Observer une interaction utilisateur en temps réel vous permet de voir où un utilisateur hésite, rencontre un délai et où les erreurs interrompent son parcours. Avec ce feedback visuel direct, vous récoltez beaucoup plus d'informations que si vous passez les stacks de logs au crible.

Débogage centré sur l'utilisateur

Grâce à Session Replay, les développeurs peuvent passer d'un débogage centré sur le système à un débogage centré sur l'utilisateur. L'outil rapproche les développeurs de l'expérience utilisateur pour garantir que les solutions soient techniquement fiables mais également conviviales.

Résolution des problèmes plus rapide

Il faut agir rapidement en cas de débogage. En reproduisant les sessions utilisateur, les développeurs peuvent identifier et reproduire les erreurs rapidement et ainsi accélérer la résolution. Plus besoin d'allers-retours avec les équipes d'AQ ou de se baser sur un vague feedback utilisateur : trouvez le problème et attaquez-le de front.

Informations exhaustives

Session Replay ne fait pas que trouver les problèmes, cet outil vous donne des informations sur les schémas de comportement des utilisateurs. En comprenant ces schémas, vous pouvez régler les problèmes de manière proactive et même recueillir des données pour vos décisions quant au design IU/UX. Les expériences utilisateur n'en seront qu'améliorées.

Session Replay de New Relic n'est pas juste un outil supplémentaire dans votre boîte à dépannage. C'est un outil qui change véritablement la manière dont vous abordez, comprenez et résolvez les problèmes du frontend. En plaçant le parcours utilisateur au premier plan, elle garantit des solutions complètes, efficaces et surtout centrées sur l'utilisateur.

Configuration de Session Replay

Avant de commencer le débogage de votre application avec Session Replay, vous devez la configurer.

1. Commencez par instrumenter votre application avec l'agent de navigateur de New Relic. Cet agent capture les données de frontend essentielles au fonctionnement de Session Replay.
2. Une fois instrumentée, naviguez jusqu'à New Relic et sélectionnez Navigateur dans le menu latéral. Ici, vous trouverez la liste de vos applications instrumentées. Sélectionnez l'application pour laquelle configurer Session Replay.
3. Cliquez sur Paramètres d'application, puis, sous Paramètres de navigateur, assurez-vous que l'option Suivi de session est activée. Cette fonction ajoute des attributs de session précieux à vos données de navigateur. Dans la même fenêtre, assurez-vous également que l'option Session Replay est activée pour que New Relic enregistre les sessions utilisateur pour les visionner.
4. Maintenant, configurez vos paramètres de session. Réglez la taille de l'échantillon de sessions pour qu'elle représente le pourcentage des sessions utilisateur à enregistrer. Modifiez le taux d'échantillonnage de sessions avec erreurs selon le nombre de sessions avec erreurs que vous souhaitez capturer.

5.    Après avoir défini vos préférences, mettez à jour l'extrait de code de l'agent de navigateur dans votre application. Ainsi, l'agent capturera précisément vos configurations.

6.    Après quelque temps, une fois les sessions utilisateur enregistrées, revenez à New Relic. Les données de ces sessions seront renseignées pour vous permettre d'explorer chaque interaction.

Débogage des erreurs de frontend avec Session Replay

Avec Session Replay configuré, vous pouvez maintenant monitorer les interactions utilisateur pour que chaque clic, chaque défilement et chaque interaction sur votre plateforme se fasse sans erreur et tout en fluidité. Allons voir ça de plus près !

1.    Connectez-vous à New Relic et sélectionnez votre application instrumentée. Ici, cliquez sur Session Replay. Une liste de toutes les sessions enregistrées s'affiche.

2.    Cliquez sur l'une des sessions pour lancer la lecture. Vous voyez une représentation visuelle des interactions utilisateur qui souligne les problèmes potentiels.

3.    Utilisez les commandes de lecture pour faire des pauses, rembobiner ou accélérer la session. Vous pouvez déplacer le curseur de la barre de progression à des points temporels spécifiques de la session.

4.    Pendant le visionnage, notez toutes les erreurs ou anomalies observées dans les interactions utilisateur. Cela peut aller de petites défaillances visibles à des éléments qui ne répondent pas. 

5.    À côté du panneau de lecture, un volet latéral contient les logs de console. Ces logs capturent chaque action et événement utilisateur. Recoupez les erreurs de la session avec ces logs pour une meilleure compréhension.

6.    Si vous voulez vous concentrer sur les interactions problématiques, utilisez le filtre d'erreurs en haut pour isoler une erreur spécifique. Vous seront présentés les détails essentiels : le type d'erreur, sa description et une chronologie.

Par exemple, l'erreur Unhandled Promise Rejection (Rejet de promesse non géré) indique souvent qu'une demande web n'a pas bien fonctionné.

7.    Grâce aux informations recueillies dans le replay de la session et aux logs de console, vous pouvez maintenant vérifier la base de code. Localisez les sections correspondant aux erreurs et effectuez les corrections nécessaires.

Après ces ajustements, vous pouvez monitorer les sessions conséquentes pour confirmer que les problèmes ont été résolus. Ces vérifications et rectifications continues garantissent une expérience utilisateur cohérente et fluide.

Conclusion

New Relic Session Replay est un outil puissant qui fournit des informations approfondies sur les interactions utilisateur avec votre application. Dans cet article, nous vous avons guidé dans la procédure de configuration et montré comment déboguer activement les problèmes de frontend grâce aux enregistrements de session. Avec les connaissances acquises, vous pouvez identifier de manière proactive les points sensibles, les rectifier et améliorer l'expérience utilisateur de votre application. La meilleure expérience web possible pour vos utilisateurs !