Sentry : Frontend Monitoring, pour détecter les problèmes de vos utilisateurs

Frontend … monitoring, quel intérêt ?

Tout d’abord, rappelons rapidement de quoi on parle lorsque l’on aborde le sujet du frontend. Lorsque l’on ouvre son navigateur et que l’on va sur internet, le navigateur va charger du HTML, du CSS, du Javascript, des images, … bref, tout un tas de ressources qui a tendance à se complexifier de plus en plus. Et cela ne va pas s’arranger si l’on prend en compte des frameworks javascript qui sont de très bons outils, mais qui embarquent plus de code et peuvent donc créer plus d’erreurs.

En parlant d’erreur, est-ce que c’est grave ? Cela dépend, cela peut-être totalement invisible pour l’utilisateur, mais cela peut aussi être assez grave. Prenons l’exemple du listing de lacentrale, la majeure partie de la page étant en react, une erreur bloquante peut rendre la page inutilisable.

Evidemment, on peut se dire que l’on va vérifier par nous-mêmes que tout marche bien, malheureusement, une erreur peut être provoquée dans des circonstances particulières que l’on ne pourra pas reproduire. Dans ce contexte, un bon monitoring est indispensable.

Sentry : La sentinelle

Mise en place

Tout d’abord, il suffit d’importer le sdk mis à disposition par Sentry. Pour la production, on déconseille l’utilisation du cdn, qui peut se faire bloquer par des navigateurs comme Brave.

yarn add @sentry/browser @sentry/tracing

Puis on l’initialise et … c’est déjà fini !

Plus qu’un simple outil de log

Le grand avantage d’utiliser un outil de monitoring comme Sentry, c’est que les erreurs remontées par cet outil sont enrichies par d’autres données indispensables comme l’OS et le navigateur utilisé, mieux encore, à partir de la stacktrace et des source maps, on peut rapidement voir dans le code où l’erreur s’est produite.

Si cela ne suffit pas, on va aussi pouvoir avoir des informations de navigation qui se sont produites avant l’erreur, comme des cliques d’utilisateurs ou des requêtes ajax.

La plateforme Sentry met aussi à disposition un outil appelé « Discover » qui permet de rapidement visualiser les nouvelles erreurs, et permet notamment de faire des recherches d’erreurs plus avancer pour répondre à des questions comme: combien d’erreur sur android durant les dernières 24h ? combien d’utilisateurs impactés ? …

Visualiser une augmentation d’erreur après une mise en production, c’est bien. Savoir précisément qu’une mise en production génère des erreurs, c’est mieux. Pour permettre cela, Sentry fournit un outil de release. Il suffit d’envoyer à Sentry les source maps avec le nom de la release durant le déploiement, et de spécifier le même nom de release durant le script d’initialisation de sentry vu précédemment.

Dernier outil intéressant pour cette présentation non exhaustive de Sentry, c’est la possibilité d’alerter lorsqu’un seuil est dépassé. Ainsi, plutôt que d’avoir à recharger la page de monitoring toutes les heures, on recevra directement un mail ou une notification slack s’il y a un souci.

Notre expérience

Comme nous avons pu le voir, Sentry est un outil facile à mettre en place, et capable d’enregistrer tous les problèmes des utilisateurs. Dans le cas de nos pages microfrontends, le sdk offre aussi la possibilité de créer un nouveau client afin d’envoyer les erreurs sur le board sentry de l’équipe concernée. Pour la résolution, l’interface de Sentry est facile à prendre en main, les données fournies sont assez complètes pour qu’un correctif soit déployé le plus rapidement possible. A noter que le prix de Sentry est fonction du nombre d’évènements, mais des outils de filtre et d’échantillonnage du sdk permettent de réduire ce nombre. Quant à la rétention des données, elle est de 90 jours.

A l’usage, cela permet d’être conscient d’un problème et de chercher à le résoudre avant que l’utilisateur ne s’en plaigne, et que cela engendre un effet déceptif. Ce qu’il faut aussi prendre en compte, c’est que l’utilisateur ne va généralement pas savoir comment ouvrir une console d’un navigateur. Il va plutôt donner quelques pistes comme l’os et le navigateur. Là encore, Sentry permet d’aiguiller le développeur pour savoir qu’elle est le bug que l’utilisateur a malheureusement rencontré.

Bref, j’espère vous avoir convaincu d’utiliser un outil de monitoring comme Sentry. Leurs avantages sont nombreux, aussi bien pour les développeurs que pour les utilisateurs.

Merci pour votre temps et votre attention. Prenez soin de vous et de votre monitoring !!!