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 les breadcrumbs les plus récents et les web vitals d’utilisateurs réels. Il s’agit d’une section distincte dans AppSignal, à côté des traces, des erreurs et des métriques que remonte votre intégration back-end. La collecte de données est assurée par @appsignal/browser, un package autonome qui ne dépend d’aucun autre package AppSignal.

​
Ce qui est collecté

Errors

Les exceptions non interceptées et les rejets de promesses non gérés, avec les stack traces disponibles, les tags et la route sur laquelle se trouvait l’utilisateur.

Breadcrumbs

Navigation, sélections, requêtes réseau et avertissements et erreurs de la console avant chaque erreur. Collecté automatiquement après init().

Web vitals

LCP, INP, CLS, FCP et TTFB issus d’utilisateurs réels, agrégés par route et comparables d’une release à l’autre.
Pour voir le travail du navigateur et du back-end dans un seul trace, configurez les deux côtés. Le SDK Browser envoie le contexte de trace. Le service API qui reçoit la requête a besoin d’une instrumentation pour le lire et rapporter des spans. Une réponse 5xx ou un timeout correspondant peut tout de même produire une erreur navigateur. Sans instrumentation back-end, son trace n’a aucun span back-end.

​
Où le trouver dans AppSignal

La section Browser de votre application comporte deux vues : 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 vos réglages de notification. Pour ce que browser monitoring couvre en tant que fonctionnalité, consultez l’aperçu de browser monitoring.

​
Relation avec AppSignal pour JavaScript

Si vous utilisez @appsignal/javascript, suivez le guide de migration pour passer à @appsignal/browser. Le nouveau SDK a une API différente. Il collecte les breadcrumbs et les web vitals après init() et rapporte les erreurs dans le namespace browser.

​
Prérequis

  • Un navigateur qui prend en charge ES2020. Le package cible ES2020 et ne fournit pas de polyfills.
  • CLS et INP nécessitent respectivement les types d’entrée de performance layout-shift et event-timing du navigateur. Le SDK ignore la métrique concernée lorsque son type d’entrée n’est pas disponible.
Optionnel : React 16.8 ou une version plus récente, si vous souhaitez utiliser l’error boundary fournie avec le package.

​
Étapes suivantes

Générer votre snippet

Laissez AppSignal générer le code d’installation avec votre Front-end API key déjà renseignée.

Installer le package

Ajoutez @appsignal/browser à votre application et commencez à remonter des données.

Options de configuration

Chaque option, son type et sa valeur par défaut.

Filtrer ce que vous envoyez

Nettoyer les URL, masquer des éléments et conditionner la collecte au consentement des utilisateurs.

Migrer depuis AppSignal pour JavaScript

Faire correspondre l’ancienne API à la nouvelle.