Breadcrumbs in Sentry are small records of what happened just before an error: clicks, network requests, console messages and page changes. The SDK collects many of them automatically, you add your own with Sentry.addBreadcrumb(), and they are attached to the next error event. By default the JavaScript SDK keeps the latest 100.
| Setting or call | What it does | Default |
|---|---|---|
| maxBreadcrumbs | How many breadcrumbs are kept | 100 |
| beforeBreadcrumb | Edit or drop each breadcrumb before it is stored | Not set |
| Sentry.addBreadcrumb() | Record your own breadcrumb | Not applicable |
| level | fatal, error, warning, log, info or debug | Not set |
Updated
When a customer hits an error on your site, the stack trace says where the code broke but not what they did first. Breadcrumbs fill that gap. This guide covers the browser JavaScript SDK; other Sentry SDKs follow the same idea with their own defaults.
Record a few events, set the options, then trigger an error to see which breadcrumbs would travel with it. This is a simulation in your browser; nothing is sent to Sentry.
Record an event: Click Add to cart, Cart request finished, console.log call, Go to checkout, Customer signed in
maxBreadcrumbs
Drop console breadcrumbs in beforeBreadcrumb
Replace email addresses in messages
Throw an error
No breadcrumbs yet. Record an event above.
Clear trail
Record a business step with a category, a short message, a level and extra fields under data.
import * as Sentry from "@sentry/browser";
function applyCoupon(code, cartTotal) {
Sentry.addBreadcrumb({
category: "cart",
message: "Coupon applied",
level: "info",
data: { code, cartTotal },
});
// ...apply the discount
}Drop console noise, mask email addresses, and keep the default limit written out so it is easy to change.
Sentry.init({
dsn: "https://[email protected]/0",
maxBreadcrumbs: 100,
beforeBreadcrumb(breadcrumb, hint) {
if (breadcrumb.category === "console") return null;
if (breadcrumb.message) {
breadcrumb.message = breadcrumb.message.replace(
/[\w.+-]+@[\w-]+\.[\w.-]+/g,
"[email]"
);
}
return breadcrumb;
},
});Automatic breadcrumbs tell you what the browser did. Manual ones tell you what the business flow did: a customer chose express shipping, a discount code was applied, a booking date was picked.
These are the moments a support person asks about first, so recording them saves a round of questions.
Breadcrumbs often pick up text you did not mean to keep: an email in a console line, a search query in a URL. Clean them in beforeBreadcrumb before they are stored, and use beforeSend for the rest of the event.
Sentry also offers server-side data scrubbing configured in its UI, which acts as a second net.
100. The Sentry docs list a default of 100 for the JavaScript SDK, and the SDK source uses the same number when the option is not set.
In the browser SDK: clicks and key presses on DOM elements, XHR and fetch requests, console API calls and all location changes.
type, category, message, level, timestamp and data. The docs say other keys are dropped during processing.
Set beforeBreadcrumb in Sentry.init. It receives each breadcrumb and an optional hint, and can return a changed breadcrumb or null to discard it.
No. They are kept in memory and attached to the next event the SDK sends, such as an error.
Related: Breadcrumb navigation on websites, Next.js environment variables, Web push notifications, What is an API key.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.