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 les erreurs front-end avec des breadcrumbs récents et des web vitals provenant d’utilisateurs réels. 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 non interceptées et les promesses rejetées non gérées. Chacune comporte une stack trace si elle est disponible, ainsi que les tags que vous avez définis.
  • Breadcrumbs : la navigation récente, les clics, les requêtes réseau, ainsi que les avertissements et erreurs de la console avant une erreur.
  • 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 envoyées au namespace browser (voir les namespaces). Cela les tient à l’écart des listes d’erreurs back-end et des réglages de notification. La section Browser vous offre une vue dédiée pour les erreurs front-end et la performance. Ce sont des issues AppSignal ordinaires. Vous pouvez les regrouper, les trier et être notifié à leur sujet. 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. Passez /orders/:id plutôt que /orders/1042. Les erreurs utilisent le chemin brut lorsque vous ne définissez pas de template. Cela peut diviser un bug en plusieurs issues. Pour les web vitals, le processeur déduit un template approximatif, mais le motif de votre routeur est plus fiable. 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.