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

# Breadcrumbs du navigateur

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

Un breadcrumb est une entrée dans une piste chronologique de ce qui s'est passé dans le navigateur avant une erreur. Reconstituer un bug front-end à partir d'une seule stack trace relève souvent de la devinette. Elle montre la route précédente et sur quoi l'utilisateur a cliqué. Elle montre aussi les requêtes et les avertissements ou erreurs de la console.

Les breadcrumbs sont collectés automatiquement après `init()`. Jusqu'à 25 breadcrumbs du tampon de contexte d'erreur accompagnent chaque erreur rapportée, y compris un breadcrumb pour cette erreur elle-même. Vous les lisez dans le sample de l'issue.

<h2 id="what-is-collected">
  Ce qui est collecté
</h2>

Ces catégories automatiques peuvent apparaître avec un rapport d'erreur :

| Catégorie | Enregistré |
| - | - |
| `navigation` | L'URL au démarrage, puis chaque `pushState`, `replaceState`, `popstate` et `hashchange`, avec l'URL précédente et la nouvelle. |
| `click` | Un libellé lisible pour l'élément que l'utilisateur a sélectionné, par exemple `button "Submit"` ou `link "Dashboard"`. Tronqué à 50 caractères. Enregistre aussi l'endroit de l'écran où la sélection a eu lieu. |
| `network` | Méthode, URL, statut et durée pour les appels `fetch` et `XMLHttpRequest`, plus le chargement initial du document. Les requêtes annulées sont omises. Inclut un détail des resource timings là où le navigateur en expose un. |
| `console` | Tout ce qui est envoyé à `console.warn` et `console.error`, coupé après 200 caractères. `console.log` n'est pas touché. |
| `long_task` | Tout blocage du thread principal de plus de 50 ms, avec attribution du script là où le navigateur la fournit. |
| `visibility` | L'onglet est devenu masqué ou visible. |
| `error` | Chaque erreur capturée, de sorte qu'une erreur antérieure apparaisse dans la piste d'une erreur ultérieure. |

Les [options `breadcrumbs`](/browser/configuration#breadcrumbs-network) permettent de désactiver la collecte de `network`, `console`, `click` et `long_task`. Les breadcrumbs `navigation`, `visibility` et `error` n'ont pas d'interrupteur séparé.

<h2 id="labeling-elements">
  Nommer les éléments
</h2>

Les breadcrumbs de sélection décrivent l'élément comme une personne le reconnaîtrait, plutôt que par sa position dans la page. AppSignal cherche d'abord un attribut `data-breadcrumb`. Sinon, il utilise le type d'élément et son texte, par exemple `button "Submit"`. Si rien de tout cela n'aide, il utilise la balise et l'ID, par exemple `input#cvc`.

Quand le libellé automatique n'aide pas, ou quand le texte visible est quelque chose que vous préférez ne pas envoyer, définissez le vôtre :

<CodeGroup>
  ```html HTML theme={null}
  <button data-breadcrumb="Checkout: confirm payment">Pay {total}</button>
  ```
</CodeGroup>

L'attribut est lu sur l'élément ou sur n'importe lequel de ses ancêtres : nommer un conteneur couvre donc tout ce qu'il contient.

<h2 id="adding-your-own-breadcrumbs">
  Ajouter vos propres breadcrumbs
</h2>

Enregistrez tout ce qui mérite d'être connu avec `addBreadcrumb()` :

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

  addBreadcrumb({
    category: "checkout",
    message: "Payment method changed",
    data: { from: "card", to: "ideal" },
  });
  ```
</CodeGroup>

| Option | Type | Description |
| - | - | - |
| `category` | `string` | Un libellé sous lequel regrouper l'événement, par exemple `checkout` ou `auth`. |
| `message` | `string` | Ce qui s'est passé. |
| `data` | `object` | Métadonnées clé-valeur facultatives. |

Vos propres breadcrumbs accompagnent les erreurs, quelle que soit la catégorie que vous leur donnez.

<h2 id="what-is-never-recorded">
  Ce que le SDK ne capture pas automatiquement
</h2>

* **Les corps de requête et de réponse.** Le SDK ne les lit pas depuis les appels réseau. Si une charge utile compte pour le débogage, ajoutez uniquement les parties dont vous avez besoin avec `addBreadcrumb()`.
* **Les cookies.** Le SDK n'en lit ni n'en écrit aucun.
* **Les paramètres de requête dans la plupart des champs d'URL créés par le SDK.** [`privacy.queryParamsAllowlist`](/browser/privacy#urls-and-query-parameters) les supprime par défaut des breadcrumbs de navigation et de `fetch`/`XMLHttpRequest`. Le breadcrumb du chargement initial du document fait exception.
* **Les appels `fetch` et `XMLHttpRequest` bloqués.** Les appels correspondant à [`privacy.networkBlocklist`](/browser/privacy#excluding-network-requests), ainsi que les appels vers l'endpoint d'AppSignal, ne laissent aucun breadcrumb. Ils ne sont jamais rapportés comme des [requêtes échouées](/browser/distributed-tracing#what-is-reported) non plus. Le breadcrumb du chargement initial du document n'est pas couvert par la liste de blocage.
* **Le texte et les éléments que vous avez masqués.** Pour en savoir plus, consultez [masquer et bloquer des éléments de page](/browser/privacy#masking-and-blocking-page-elements).

Pour filtrer ou expurger des breadcrumbs individuels au moment de leur enregistrement, utilisez [`beforeBreadcrumb`](/browser/privacy#filtering-errors-and-breadcrumbs).

<h2 id="reading-network-breadcrumbs">
  Lire les breadcrumbs réseau
</h2>

Un breadcrumb réseau se lit comme une méthode, une URL et un statut dès qu'une réponse est arrivée, y compris les réponses `404` et `500`. Un suffixe `(error)` signifie qu'aucune réponse n'est arrivée. La cause peut être un échec DNS, une connexion refusée ou une requête bloquée.

Une requête qui a envoyé un en-tête `traceparent` enregistre aussi son trace ID dans le breadcrumb. Le service qui la reçoit doit [poursuivre la trace](/browser/distributed-tracing#before-you-start) pour que les spans back-end apparaissent sous cet ID.

Les requêtes cross-origin ne rapportent aucun détail de temps, sauf si le serveur envoie un en-tête `Timing-Allow-Origin`. C'est une restriction du navigateur, pas d'AppSignal.


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