> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser monitoring

> Ce qu'AppSignal rapporte sur les navigateurs de vos utilisateurs, et comment les erreurs front-end et les web vitals sont présentées.

<Note>
  Browser monitoring est une fonctionnalité en beta d'[AppSignal Labs](/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](https://discord.gg/EjF6ykYx63).
</Note>

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](/browser-monitoring/errors) regroupe les erreurs front-end en issues que vous pouvez trier, assigner et pour lesquelles vous pouvez être notifié.
* [Performance](/browser-monitoring/performance) rapporte les web vitals par route, pour comparer les releases et repérer les pages à retravailler.

<h2 id="what-the-sdk-collects">
  Ce que collecte le SDK
</h2>

Browser monitoring est alimenté par [AppSignal pour Browser](/browser), le package `@appsignal/browser` que vous ajoutez à votre front end. Une fois initialisé, il collecte trois choses sans configuration supplémentaire :

* [Errors](/browser/error-tracking) : 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](/browser/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](/browser/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.

<h2 id="how-it-relates-to-your-back-end-errors">
  Lien avec vos erreurs back-end
</h2>

Les erreurs front-end sont rapportées dans le namespace `browser` (voir les [namespaces](/guides/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](/errors) utilise partout ailleurs dans AppSignal.

Les web vitals sont distinctes de vos données back-end de [performance et de tracing](/performance-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.

<h2 id="two-settings-worth-getting-right">
  Deux réglages à ne pas manquer
</h2>

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](/browser/installation#report-the-current-route).
* **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`](/browser/configuration#appversion).

Pour la liste complète de ce qui est enregistré, et comment désactiver des catégories, consultez la [page des breadcrumbs](/browser/breadcrumbs).
