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

Toggle whole categories off with the breadcrumbs options.

​
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:
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 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, which removes all of them by default.
  • Requests to blocked hosts and paths. Requests matching privacy.networkBlocklist, and requests to AppSignal’s own endpoint, leave no breadcrumb.
  • 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 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.