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.