Flare by Spatie
    • Error Tracking
    • Performance Monitoring
    • Logs
  • Pricing
  • Docs
  • Blog
  • Changelog
  • Back to Flare ⌘↵ Shortcut: Command or Control Enter
  • Sign in
  • Try Flare for free
  • Error Tracking
  • Performance Monitoring
  • Logs
  • Pricing
  • Docs
  • Blog
  • Changelog
    • Back to Flare ⌘↵ Shortcut: Command or Control Enter
    • Try Flare for free
    • Sign in
Flare Flare PHP PHP JavaScript JavaScript Protocol Protocol
JavaScript
  • JavaScript
  • React
  • Vue
  • Svelte
  • Inertia
  • React Native
  • Electron
  • Getting Started
  • Introduction
  • Quick start
  • CDN installation
  • Errors
  • Reporting errors
  • Client hooks
  • Sourcemaps
  • Tracing
  • How tracing works
  • What gets traced
  • Web vitals
  • Manual spans
  • Sampling
  • Profiling
  • How component profiling works
  • Logs
  • Introduction
  • Levels
  • Attributes
  • Data Collection
  • Adding custom context
  • Adding glows
  • Automatic breadcrumbs
  • GDPR consent
  • Identifying users
  • Reference
  • API
  • Configuration

Automatic breadcrumbs

View as Markdown

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. So Flare does not send the text a user types, such as a password or an email address.

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.

Adding glows GDPR consent

On this page

  • Turning breadcrumbs on
  • What Flare records
  • Privacy
  • Breadcrumb lifecycle
  • Limiting breadcrumbs per report

Catch errors and fix slowdowns with Flare, the full-stack application monitoring platform for Laravel, PHP & JavaScript.

  • Platform
  • Error Tracking
  • Performance Monitoring
  • Pricing
  • Support
  • Resources
  • Blog
  • Newsletter
  • Changelog
  • Documentation
  • Affiliate program
  • uptime status badge Service status
  • Terms of use
  • DPA
  • Privacy & cookie Policy
Made in by Spatie logo
Flare