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

<Note>
  Browser monitoring is a beta [AppSignal Labs](/labs) feature. The
  `@appsignal/browser` package is published under the `beta` tag on npm, and its
  configuration and API may still change between beta releases. Share feedback
  in our [Discord community](https://discord.gg/EjF6ykYx63).
</Note>

A breadcrumb is one entry in a time-ordered trail of what happened in the browser before an error. Reproducing a front-end bug from a stack trace alone is often guesswork. The trail tells you which route the user came from, what they interacted with, which request failed, and what the console said.

Breadcrumbs are collected automatically. There is nothing to enable, and no plugin to install. The 25 most recent breadcrumbs travel with every error AppSignal for Browser reports, and you read them in the incident's timeline.

## What is collected

| Category     | Recorded                                                                                                                                                                                |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `navigation` | The URL at startup, then every `pushState`, `replaceState`, `popstate`, and `hashchange`, with both the previous and the new URL.                                                       |
| `click`      | A readable label for the element the user selected, for example `button "Submit"` or `link "Dashboard"`. Shortened to 50 characters. Also records where on the screen they selected it. |
| `network`    | Method, URL, status, and duration for every `fetch` and `XMLHttpRequest`, plus the initial document load. Includes a resource timing breakdown where the browser exposes one.           |
| `console`    | Anything sent to `console.warn` and `console.error`, cut off after 200 characters. `console.log` is left alone.                                                                         |
| `long_task`  | Any main-thread block longer than 50 ms, with script attribution where the browser provides it.                                                                                         |
| `visibility` | The tab became hidden or visible.                                                                                                                                                       |
| `error`      | Each captured error, so an earlier error shows up in a later one's trail.                                                                                                               |

Toggle whole categories off with the [`breadcrumbs` options](/browser/configuration#breadcrumbsnetwork).

## Labeling elements

Selection breadcrumbs describe the element the way a person would recognize it, rather than by its position in the page. AppSignal looks for three things, in order: a `data-breadcrumb` attribute, then the kind of element together with its text (`button "Submit"`), then the element's tag and ID (`input#cvc`).

When the automatic label is unhelpful, or when the visible text is something you would rather not send, set your own:

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

The attribute is read from the element or any of its ancestors, so labeling a container covers everything inside it.

## Adding your own breadcrumbs

Record anything else worth knowing with `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` | A label to group the event under, for example `checkout` or `auth`. |
| `message`  | `string` | What happened.                                                      |
| `data`     | `object` | Optional key-value metadata.                                        |

Your own breadcrumbs travel with errors whatever category you give them.

## What is never recorded

* **Request and response bodies.** No option exposes them. If a payload matters for debugging, add the parts you need with `addBreadcrumb()`.
* **Cookies.** The SDK reads and writes none.
* **Query parameters you have not allowed.** Every URL is filtered through [`privacy.queryParamsAllowlist`](/browser/privacy#urls-and-query-parameters), which removes all of them by default.
* **Requests to blocked hosts and paths.** Requests matching [`privacy.networkBlocklist`](/browser/privacy#excluding-network-requests), and requests to AppSignal's own endpoint, leave no breadcrumb.
* **Text and elements you have masked.** Read more in [masking and blocking page elements](/browser/privacy#masking-and-blocking-page-elements).

To filter or redact individual breadcrumbs as they are recorded, use [`beforeBreadcrumb`](/browser/privacy#filtering-errors-and-breadcrumbs).

## Reading network breadcrumbs

A network breadcrumb reads as method, URL, and status whenever a response arrived, including `404` and `500` responses. An `(error)` suffix means the request failed at the transport level, with no response at all: a DNS failure, a refused connection, or a blocked request.

Cross-origin requests report no timing breakdown unless the server sends a `Timing-Allow-Origin` header. That is a browser restriction, not an AppSignal one.