Skip to main content
Browser monitoring est une fonctionnalité en beta d’AppSignal Labs. Le package @appsignal/browser est publié sous le tag beta sur npm, et sa configuration ainsi que son API peuvent encore changer d’une release beta à l’autre. Partagez vos retours dans notre communauté Discord.
Browser monitoring rapporte ce qui se passe dans les navigateurs de vos utilisateurs : les erreurs front-end, chacune accompagnée de la suite d’événements qui y a mené, et les web vitals mesurées sur de vrais chargements de page. Votre télémétrie back-end ne peut pas répondre à des questions comme celles-ci :
  • Après un deploy, certains utilisateurs rencontrent Failed to fetch dynamically imported module alors que vos propres tests restent au vert. Quelle release a introduit le problème, et que faisait l’utilisateur à ce moment-là ?
  • Vos traces montrent un serveur qui répond en 80 ms, mais les utilisateurs trouvent toujours le dashboard lent. Le temps part-il quelque part dans le navigateur ?
  • Vous avez livré hier une modification de votre bundle JavaScript. Les pages sur lesquelles vos utilisateurs passent le plus de temps sont-elles devenues plus lentes ?
Browser monitoring constitue une section à part de votre application dans AppSignal, avec deux vues :
  • Errors regroupe les erreurs front-end en issues que vous pouvez trier, assigner et pour lesquelles vous pouvez être notifié.
  • Performance rapporte les web vitals par route, pour comparer les releases et repérer les pages à retravailler.

​
Ce que collecte le SDK

Browser monitoring est alimenté par AppSignal pour Browser, le package @appsignal/browser que vous ajoutez à votre front end. Une fois initialisé, il collecte trois choses sans configuration supplémentaire :
  • Errors : les erreurs JavaScript que votre code lève sans les intercepter, y compris les promesses qui échouent. Chacune arrive avec une stack trace et les tags que vous avez définis.
  • Breadcrumbs : une chronologie de ce qui s’est passé avant une erreur, à savoir les pages que l’utilisateur a ouvertes, ce qu’il a sélectionné, les requêtes émises par la page et ce que la console a journalisé.
  • Web vitals : cinq mesures du ressenti à l’usage de la page. Le temps de chargement, la rapidité de réponse et le fait que la mise en page saute ou non pendant le chargement.
La documentation du SDK explique comment l’installer et le configurer, et ce que chacun de ces éléments contient exactement. Cette section explique ce qu’AppSignal en fait.

​
Lien avec vos erreurs back-end

Les erreurs front-end sont rapportées dans le namespace browser (voir les namespaces), ce qui les tient à l’écart de vos listes d’erreurs back-end et de leurs réglages de notification. C’est la raison pour laquelle browser monitoring est une section à part plutôt qu’un filtre sur vos erreurs existantes : une développeuse front-end ouvre une vue qui contient du travail front-end et rien d’autre, au lieu de restreindre une vue conçue pour déboguer le côté serveur. Pour le reste, ce sont des issues ordinaires : le regroupement, le tri et le modèle de notification sont ceux qu’Errors utilise partout ailleurs dans AppSignal. Les web vitals sont distinctes de vos données back-end de performance et de tracing. Un navigateur mesure le temps qu’une page a mis à devenir utilisable. Un trace mesure ce qu’a fait votre serveur. Quand la même route est lente dans les deux, vous regardez un même problème par deux côtés.

​
Deux réglages à ne pas manquer

Ces deux choix déterminent l’utilité des données :
  • Rapportez le template de route. Indiquez à AppSignal que l’utilisateur est sur /orders/:id, pas sur /orders/1042. Les erreurs comme les web vitals sont regroupées selon la route que vous rapportez. Sans template, mille commandes deviennent mille routes distinctes, et un bug devient mille issues. Pour en savoir plus, consultez rapporter la route actuelle.
  • Définissez une version d’application. Les deux vues peuvent filtrer selon la version qui a rapporté les données. C’est ainsi que vous saurez si une release a dégradé les choses. Pour en savoir plus, consultez appVersion.
Pour la liste complète de ce qui est enregistré, et comment désactiver des catégories, consultez la page des breadcrumbs.