> ## 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.

# AppSignal pour Browser

<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 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.

<h2 id="what-it-collects">
  Ce qui est collecté
</h2>

<CardGroup cols={3}>
  <Card title="Errors" icon="bug" href="/browser/error-tracking">
    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.
  </Card>

  <Card title="Breadcrumbs" icon="shoe-prints" href="/browser/breadcrumbs">
    Navigation, sélections, requêtes réseau et avertissements et erreurs de la console avant chaque erreur. Collecté automatiquement après `init()`.
  </Card>

  <Card title="Web vitals" icon="gauge" href="/browser/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.
  </Card>
</CardGroup>

Pour voir le travail du navigateur et du back-end dans un seul [trace](/browser/distributed-tracing), 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.

<h2 id="where-to-find-it-in-appsignal">
  Où le trouver dans AppSignal
</h2>

La section Browser de votre application comporte deux vues :

* **Errors** regroupe les erreurs front-end en issues que vous pouvez trier. Pour en savoir plus, consultez [les erreurs front-end dans AppSignal](/browser-monitoring/errors).
* **Performance** résume les cinq web vitals et les détaille par route. Pour en savoir plus, consultez [les performances front-end dans AppSignal](/browser-monitoring/performance).

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 vos réglages de notification. Pour ce que browser monitoring couvre en tant que fonctionnalité, consultez l'[aperçu de browser monitoring](/browser-monitoring).

<h2 id="relation-to-appsignal-for-javascript">
  Relation avec AppSignal pour JavaScript
</h2>

Si vous utilisez [`@appsignal/javascript`](/front-end), suivez le [guide de migration](/browser/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`.

<h2 id="requirements">
  Prérequis
</h2>

* 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.

<h2 id="next-steps">
  Étapes suivantes
</h2>

<CardGroup cols={2}>
  <Card title="Générer votre snippet" icon="wand-magic-sparkles" href="https://appsignal.com/redirect-to/organization?to=sites/new/browser">
    Laissez AppSignal générer le code d'installation avec votre Front-end API key déjà renseignée.
  </Card>

  <Card title="Installer le package" icon="download" href="/browser/installation">
    Ajoutez `@appsignal/browser` à votre application et commencez à remonter des données.
  </Card>

  <Card title="Options de configuration" icon="sliders" href="/browser/configuration">
    Chaque option, son type et sa valeur par défaut.
  </Card>

  <Card title="Filtrer ce que vous envoyez" icon="shield" href="/browser/privacy">
    Nettoyer les URL, masquer des éléments et conditionner la collecte au consentement des utilisateurs.
  </Card>

  <Card title="Migrer depuis AppSignal pour JavaScript" icon="arrow-right-arrow-left" href="/browser/migration">
    Faire correspondre l'ancienne API à la nouvelle.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.