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

# Options de configuration d'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>

Passez la configuration à `init()` dans un seul objet. Seul `key` est obligatoire. Un second appel à `init()` est ignoré jusqu'à ce que vous appeliez `destroy()`. La plupart des applications changent les options à leur prochain build.

<CodeGroup>
  ```js appsignal.js theme={null}
  import { init } from "@appsignal/browser";

  init({
    key: "<YOUR_FRONTEND_API_KEY>",
    endpoint: "https://appsignal-endpoint.net",
    active: process.env.NODE_ENV === "production",
    appVersion: "<YOUR_APP_REVISION>",
    tracePropagationTargets: ["api.example.com/**"],
    errors: { sampleRate: 1.0 },
    breadcrumbs: { console: false },
    privacy: {
      queryParamsAllowlist: ["utm_*", "page"],
      networkBlocklist: ["api.stripe.com/**"],
      dom: { blockElement: ["#card-form"] },
    },
  });
  ```
</CodeGroup>

<h2 id="key">
  `key`
</h2>

* **Type :** `string`
* **Obligatoire**

La [Front-end API key](/browser/installation#find-your-front-end-api-key) de votre application, destinée à être exposée publiquement. Ce n'est pas l'une des Push keys utilisées par vos intégrations back-end.

<h2 id="endpoint">
  `endpoint`
</h2>

* **Type :** `string`
* **Valeur par défaut :** l'origine de la page courante

L'endroit où les données sont envoyées. Définissez-le sur `https://appsignal-endpoint.net`. Si vous relayez le trafic AppSignal via votre domaine, laissez-le vide pour utiliser l'origine courante. Une barre oblique finale est retirée.

Les erreurs sont envoyées à `POST /ingest/browser/errors`, et les web vitals à `POST /ingest/browser`. La clé voyage en paramètre de requête `api_key`, ce qui est utile à savoir si vous maintenez une allowlist `connect-src`.

<h2 id="active">
  `active`
</h2>

* **Type :** `boolean`
* **Valeur par défaut :** `true`

L'interrupteur principal pour le premier appel à `init()`. Quand il vaut `false`, l'initialisation retourne sans modifier la page, sans démarrer de minuteur ni émettre de requête. Un second appel à `init()` ne peut pas désactiver un SDK déjà en cours d'exécution. Toutes les autres fonctions ne font rien non plus, vous pouvez donc les appeler partout sans vérification préalable.

Définissez-le depuis votre environnement de build pour que les exécutions de développement, de test et de CI n'envoient rien :

<CodeGroup>
  ```js JavaScript theme={null}
  init({
    key: "<YOUR_FRONTEND_API_KEY>",
    active: process.env.NODE_ENV === "production", // or import.meta.env.PROD
  });
  ```
</CodeGroup>

<h2 id="appversion">
  `appVersion`
</h2>

* **Type :** `string`

Le tag de release, le SHA de commit ou l'ID de deploy du build en cours d'exécution. Il étiquette les erreurs et les web vitals pour les filtres de version des vues Browser. Il sélectionne aussi les [sourcemaps](/browser/error-tracking#sourcemaps) pour les backtraces. Pour en savoir plus, consultez notre [guide des deploy markers](/application/markers/deploy-markers).

<h2 id="servicename">
  `serviceName`
</h2>

* **Type :** `string`
* **Valeur par défaut :** `"Browser"`

AppSignal utilise cette valeur comme nom de service pour les erreurs du navigateur dans une trace. Par exemple, `serviceName: "Checkout UI"` affiche `Checkout UI` au lieu de la valeur par défaut `Browser` dans la chronologie de trace. Utilisez une valeur différente pour chaque front-end que vous surveillez. Le SDK l'envoie avec chaque rapport d'erreur. Consultez [tracing distribué pour Browser](/browser/distributed-tracing).

<h2 id="tracepropagationtargets">
  `tracePropagationTargets`
</h2>

* **Type :** `string[]`
* **Valeur par défaut :** `[]`

Utilisez cette liste pour choisir quelles requêtes API portent un en-tête `traceparent`. Chaque motif doit comporter un hôte et un chemin. Par exemple, `["api.example.com/**"]` correspond à tous les chemins de `api.example.com`. `api.example.com` seul ne correspond à rien.

Si une requête correspondante renvoie une réponse 5xx ou expire, le SDK rapporte une erreur du navigateur. Pour voir les spans back-end dans sa trace, [instrumentez le service qui la reçoit](/browser/distributed-tracing#before-you-start) pour qu'il lise l'en-tête.

La liste vide par défaut n'ajoute aucun en-tête `traceparent`. Consultez [tracing distribué pour Browser](/browser/distributed-tracing) pour la configuration et des exemples.

<h2 id="beforeerror">
  `beforeError`
</h2>

* **Type :** `(event: IncomingError) => IncomingError | null`

Appelé pour les erreurs qui passent l'échantillonnage et la limite de débit globale, avant la création d'un breadcrumb ou d'un rapport d'erreur. Retournez `null` pour écarter l'erreur, ou modifiez ses champs pour les expurger. Pour en savoir plus, consultez [filtrer les erreurs](/browser/privacy#filtering-errors-and-breadcrumbs).

Ce callback doit être synchrone. Une promesse retournée est détectée, journalisée via `console.error`, et l'erreur est écartée.

<h2 id="beforebreadcrumb">
  `beforeBreadcrumb`
</h2>

* **Type :** `(breadcrumb: Breadcrumb) => Breadcrumb | null`

S'exécute une fois pour chaque breadcrumb, au moment de son enregistrement. Retournez `null` pour le jeter, ou modifiez `message` et `data` pour retirer du texte sensible. Cela s'exécute souvent : gardez-le rapide.

<h2 id="errors-enabled">
  `errors.enabled`
</h2>

* **Type :** `boolean`
* **Valeur par défaut :** `true`

Si les erreurs sont rapportées ou non. Quand il vaut `false`, le SDK continue de les écouter mais n'envoie rien.

<h2 id="errors-samplerate">
  `errors.sampleRate`
</h2>

* **Type :** `number` entre `0` et `1`
* **Valeur par défaut :** `1.0`

La proportion d'erreurs à rapporter. Le choix est fait au hasard pour chaque erreur, donc `0.25` rapporte environ un quart d'entre elles. Cela se produit avant les [limites de débit](/browser/error-tracking#rate-limits) et avant l'exécution de `beforeError`.

<h2 id="breadcrumbs-network">
  `breadcrumbs.network`
</h2>

* **Type :** `boolean`
* **Valeur par défaut :** `true`

Enregistre des breadcrumbs pour les appels `fetch` et `XMLHttpRequest`, à l'exception des requêtes annulées. Cette option ne contrôle pas le breadcrumb du chargement initial du document. Le SDK ne lit pas les corps de requête ni de réponse.

<h2 id="breadcrumbs-console">
  `breadcrumbs.console`
</h2>

* **Type :** `boolean`
* **Valeur par défaut :** `true`

Enregistre un breadcrumb pour `console.warn` et `console.error`. `console.log` n'est pas modifié.

<h2 id="breadcrumbs-clicks">
  `breadcrumbs.clicks`
</h2>

* **Type :** `boolean`
* **Valeur par défaut :** `true`

Enregistre un breadcrumb quand un utilisateur sélectionne un élément.

<h2 id="breadcrumbs-longtasks">
  `breadcrumbs.longTasks`
</h2>

* **Type :** `boolean`
* **Valeur par défaut :** `true`

Enregistre un breadcrumb quand le thread principal est bloqué plus de 50 ms.

<h2 id="privacy-queryparamsallowlist">
  `privacy.queryParamsAllowlist`
</h2>

* **Type :** `string[]`
* **Valeur par défaut :** `[]`

Les paramètres de requête à conserver dans les URL enregistrées. Utilisez `*` pour faire correspondre plusieurs noms à la fois : `"utm_*"` conserve donc tous les paramètres UTM. La liste par défaut est vide, ce qui les supprime tous. Pour en savoir plus, consultez [confidentialité et filtrage](/browser/privacy#urls-and-query-parameters).

<h2 id="privacy-networkblocklist">
  `privacy.networkBlocklist`
</h2>

* **Type :** `string[]`
* **Valeur par défaut :** `[]`

Des motifs d'URL en glob pour les appels `fetch` et `XMLHttpRequest` qui ne sont enregistrés ni comme breadcrumbs ni comme [erreurs de requête échouée](/browser/distributed-tracing#what-is-reported). Comparés à l'hôte et au chemin. Les appels ont toujours lieu. Cette option ne filtre pas le breadcrumb du chargement initial du document.

<h2 id="privacy-dom-masktext">
  `privacy.dom.maskText`
</h2>

* **Type :** `string[]`
* **Valeur par défaut :** `[]`

Des sélecteurs CSS dont le contenu textuel est remplacé par `[masked]` dans les breadcrumbs `click`. Le breadcrumb est tout de même enregistré, vous conservez donc le fait qu'une interaction a eu lieu.

<h2 id="privacy-dom-blockelement">
  `privacy.dom.blockElement`
</h2>

* **Type :** `string[]`
* **Valeur par défaut :** `[]`

Des sélecteurs CSS dont les interactions ne sont pas enregistrées du tout. Utilisez-les pour les formulaires de carte bancaire et les autres champs qui ne doivent jamais apparaître.

<h2 id="api-reference">
  Référence de l'API
</h2>

À l'exception d'`init()`, ces fonctions ne font rien tant que le SDK n'a pas été initialisé avec `active: true`.

| Fonction | Description |
| - | - |
| `init(config)` | Démarre la collecte. À appeler une fois, le plus tôt possible. Les appels suivants sont ignorés. |
| `captureError(error)` | Rapporte une erreur interceptée. L'argument de contexte optionnel n'est pas inclus dans les rapports d'erreur ordinaires pendant cette bêta. Pour en savoir plus, consultez [error tracking](/browser/error-tracking#reporting-errors-manually). |
| `addBreadcrumb({ category, message, data? })` | Ajoute votre propre breadcrumb à la chronologie. |
| `setRouteTemplate(template)` | Déclare la route sur laquelle se trouve l'utilisateur, par exemple `/users/:id`. Passez `null` pour l'effacer. |
| `setTags(tags)` | Attache des tags à chaque erreur rapportée à partir de maintenant. Fusionne avec les tags existants. |
| `clearTags()` | Supprime tous les tags. Les tags survivent à un rechargement : appelez donc ceci à la déconnexion. |
| `flush()` | Envoie immédiatement les web vitals mises en tampon. |
| `destroy()` | Envoie les données en attente et arrête la collecte. Un nouvel appel à `init()` peut la redémarrer, y compris sur la même page. |


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