API Reference
addBreadcrumb
Push an event onto the rolling breadcrumb buffer. The last 30 are attached to every error.
Signature#
typescript
function addBreadcrumb(crumb: {
category: string;
message: string;
level?: 'info' | 'warn' | 'error';
data?: Record<string, unknown>;
}): void;Parameters#
| Name | Type | Default | Description |
|---|---|---|---|
| category* | string | — | A bucket label. Pick a stable name and reuse it. Examples: 'cart', 'auth', 'feature-flag'. |
| message* | string | — | Human-readable summary, shown inline in the dashboard error timeline. |
| level | enum | 'info' | info | warn | error. Affects rendering color in the dashboard. |
| data | object | — | Arbitrary JSON-serializable details. Keep under a few KB. |
Examples#
typescript
import { addBreadcrumb } from '@reliableapp/frontend-core';
// State transition
addBreadcrumb({
category: 'wizard',
message: 'advanced to step 3',
level: 'info',
data: { step: 3, total_steps: 5 },
});
// Feature flag evaluation
addBreadcrumb({
category: 'feature-flag',
message: 'evaluated checkout_v2 -> B',
level: 'info',
data: { flag: 'checkout_v2', variant: 'B' },
});
// Recoverable failure (worth tracing, not worth an error)
addBreadcrumb({
category: 'image-load',
message: 'fallback used for /hero.jpg',
level: 'warn',
});Cost#
Adding a breadcrumb costs roughly a microsecond. Nothing is sent over the network — breadcrumbs only travel as part of an error or other event payload. You can call addBreadcrumb liberally inside hot code paths without worrying about overhead or quota.
Ring buffer behavior#
The buffer holds 30 entries. The 31st push evicts the oldest. The buffer is per-tab and resets on page reload.
More on breadcrumbs
See the Breadcrumbs feature page for the full mental model and what categories/messages work well.