Automatic breadcrumbs
Breadcrumbs are a record of the actions a user took before an error. Flare records them for you and attaches them to each error report. They appear in chronological order in the "Debug" tab of an error occurrence, next to your glows.
Glows are breadcrumbs that you add yourself in code. Flare records automatic breadcrumbs for you from events in the browser. You can use both at the same time.
Turning breadcrumbs on
Breadcrumbs are off by default. Turn them on with flare.configure():
import { flare } from '@flareapp/js';
flare.light('YOUR PROJECT KEY');
flare.configure({
enableBreadcrumbs: true,
});
From that point on, Flare records the events below. If you turn breadcrumbs off again, Flare records no more events and removes the breadcrumbs it kept.
What Flare records
Flare records four types of events.
| Event | When Flare records it | What it captures |
|---|---|---|
| Click | A user clicks an element | A selector for the element, such as button#checkout, and its data-testid when the element has one. |
| Form change | A form field changes | A selector for the field. Flare does not record the value the user typed. |
| Request | A fetch or XMLHttpRequest request settles |
The method, the URL, the host, and the response status code. Flare skips its own requests to the ingest endpoint. |
| Navigation | The page loads or the route changes | The URL the user moved to, and the URL they came from. |
For a click, Flare looks up the tree from the clicked element to the nearest interactive element, such as a button or a link. So Flare records a click on an icon inside a button as a click on the button.
Privacy
Flare redacts sensitive query-string values from breadcrumb URLs with the same urlDenylist it uses for other URLs. It also cuts each breadcrumb URL to 256 characters.
The form-change breadcrumb records the field, never the value inside it. It does not capture a password or email address typed into that field. This does not mean the full error report contains no personal information: other report context can include cookies and user-agent information.
URL redaction matches query parameter names; it does not redact URL paths or fragments. Element IDs, classes and data-testid values are also recorded without that URL filter. Avoid putting personal information in those values and configure the URL denylist for your application's sensitive query parameters.
Consent and collection
Turning breadcrumbs on and allowing data to be sent are separate controls. In client version 2.13.0, setConsent(false) stops sending but does not clear existing breadcrumbs or stop their collection while enableBreadcrumbs is true. A later grant can attach those breadcrumbs to a new error report.
If collection should depend on consent, keep enableBreadcrumbs false until consent is granted and set it back to false when consent is withdrawn. Disabling breadcrumbs clears the buffer and removes the automatic browser listeners. Delaying light() alone is not a collection gate if breadcrumbs have already been enabled. See the consent setup for a complete example.
Breadcrumb lifecycle
Breadcrumbs accumulate in memory throughout the browser session. Flare attaches the most recent breadcrumbs (up to maxBreadcrumbs) to each error report.
Breadcrumbs are stored in memory only and are lost on a page refresh. Flare attaches them to error reports, not to traces (yet).
Limiting breadcrumbs per report
By default, Flare keeps the last 100 breadcrumbs. You can change this limit with flare.configure():
flare.configure({
maxBreadcrumbs: 200,
});
When the limit is reached, the oldest breadcrumbs are removed first.