Skip to main content
Browser monitoring is a beta AppSignal 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.
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. It shows the previous route and what the user clicked. It also shows requests and console warnings or errors. Breadcrumbs are collected automatically after init(). Up to 25 breadcrumbs from the error context buffer travel with each reported error, including a breadcrumb for that error. You can read them in the issue’s sample.

​
What is collected

These automatic categories can appear with an error report: The breadcrumbs options can turn off network, console, click, and long-task collection. Navigation, visibility, and error breadcrumbs have no separate switch.

​
Labeling elements

Selection breadcrumbs describe the element the way a person would recognize it, rather than by its position in the page. AppSignal first looks for a data-breadcrumb attribute. Otherwise, it uses the element type and text, such as button "Submit". If neither helps, it uses the tag and ID, such as input#cvc. When the automatic label is unhelpful, or when the visible text is something you would rather not send, set your own:
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():
Your own breadcrumbs travel with errors whatever category you give them.

​
What the SDK does not capture automatically

  • Request and response bodies. The SDK does not read them from network calls. If a payload matters for debugging, add only the parts you need with addBreadcrumb().
  • Cookies. The SDK reads and writes none.
  • Query parameters in most SDK-created URL fields. privacy.queryParamsAllowlist removes them by default from navigation and fetch/XMLHttpRequest breadcrumbs. The initial document-load breadcrumb is an exception.
  • Blocked fetch and XMLHttpRequest calls. Calls matching privacy.networkBlocklist, and calls to AppSignal’s own endpoint, leave no breadcrumb and are never reported as failed requests. The initial document-load breadcrumb is not covered by the blocklist.
  • Text and elements you have masked. Read more in masking and blocking page elements.
To filter or redact individual breadcrumbs as they are recorded, use beforeBreadcrumb.

​
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 no response arrived. The cause may be DNS, a refused connection, or a blocked request. A request that sent a traceparent header also records its trace ID in the breadcrumb. The receiving service must continue the trace for back-end spans to appear under that ID. 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.