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.
- 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.
- 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.
- 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.
- 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.
The default privacy setting masks everything by replacing all text with an *. If you need to customize what content or user input is captured, you have options to mask, block, or ignore specific classes and attributes of content or user input.
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 !
3. Watch replays to understand how users interact with the page and identify areas for improvement. Perhaps a lack of guest checkout is causing cart abandonment as the users are not interested in creating an account.
Based on these observations, you can make data-driven decisions to optimize the user experience and reduce friction points in the checkout flow.
Contextualize customer support
Session Replay also provides context to customer support teams to resolve issues efficiently:
- Search by the specific user to identify their specific session within Session Replay.
2. Playback the recording to see exactly what the user was doing that led to the error.
With a clear understanding of the problem, the agent can now directly assist the customer. They can explain why the error occurred, offer a solution or escalate the issue to the development team if it's a website bug. This eliminates the need for back-and-forth communication and gets the customer back on track
Conclusion
New Relic Session Replay empowers you to see your application through the user's eyes. In this blog, we've walked you through the setup process and shown you how to actively debug frontend issues, optimize user flow and contextualize customer support using session replay. By proactively identifying pain points and optimizing user journey, you can create a web experience that keeps your users happy and coming back for more.
Get started with Session Replay today and unlock the secrets to a better web experience!
Étapes suivantes
Prêt(e) à plonger dans le débogage ? Découvrez la puissance de New Relic Session Replay. Inscrivez-vous dès aujourd'hui et libérez le potentiel de cet outil pour votre application. Le meilleur ? C'est gratuit !
Les opinions exprimées sur ce blog sont celles de l'auteur et ne reflètent pas nécessairement celles de New Relic. Toutes les solutions proposées par l'auteur sont spécifiques à l'environnement et ne font pas partie des solutions commerciales ou du support proposés par New Relic. Veuillez nous rejoindre exclusivement sur l'Explorers Hub (discuss.newrelic.com) pour toute question et assistance concernant cet article de blog. Ce blog peut contenir des liens vers du contenu de sites tiers. En fournissant de tels liens, New Relic n'adopte, ne garantit, n'approuve ou n'approuve pas les informations, vues ou produits disponibles sur ces sites.
