Core Features

Breadcrumbs

A rolling buffer of the last 30 events that happened before an error — clicks, navigations, console logs, and anything you add manually.

Why breadcrumbs#

A stack trace tells you what broke. Breadcrumbs tell you what was happening just before things broke. When an error fires, Reliable attaches the most recent 30 breadcrumbs to the event so you can reconstruct the user's journey.

Automatic breadcrumbs#

Several breadcrumb sources are wired up by the SDK with no config:

Name	Type	Default	Description
click	category	—	Every user click — adds a breadcrumb with the target's selector and text.
navigation	category	—	Every route change via history.pushState / popstate.
console	category	—	console.warn and console.error calls (info/debug are not captured to keep noise low).
fetch	category	—	Each network request — method, URL, status, duration.

Adding manual breadcrumbs#

Use addBreadcrumb for app-specific signals — state transitions, feature flag evaluations, business events, anything that helps you understand the user's intent.

typescript

import { addBreadcrumb } from '@reliableapp/frontend-core';

// Simple
addBreadcrumb({
  category: 'cart',
  message: 'Added item to cart',
  level: 'info',
});

// With structured data
addBreadcrumb({
  category: 'feature-flag',
  message: 'evaluated checkout_v2',
  level: 'info',
  data: {
    flag: 'checkout_v2',
    variant: 'B',
    user_id: 'user_123',
  },
});

Breadcrumb shape#

Name	Type	Default	Description
category*	string	—	Free-form bucket. Pick a stable name — 'cart', 'auth', 'feature-flag', 'state-transition' — and reuse it.
message*	string	—	Human-readable summary. Will appear inline in the dashboard error timeline.
level	enum	'info'	info \| warn \| error. Levels affect how the breadcrumb is rendered in the dashboard.
data	object	—	Arbitrary JSON-serializable details. No size limit, but keep it under a few KB to avoid bloating error payloads.

When to add breadcrumbs#

State transitions — "user opened modal", "wizard advanced to step 3", "onboarding completed"
Feature flag evaluations — record which variant the user got
External events — "Stripe.js loaded", "Mapbox tile failed to render"
Recoverable failures — anything you'd otherwise log but don't want as a full error

Ring buffer mechanics#

The buffer holds 30 entries. When the 31st breadcrumb is added, the oldest is dropped — so the most recent 30 are always retained. Adding breadcrumbs is cheap (~µs per call) since nothing is sent until an error flushes the buffer.

The buffer is per-tab and per-init — opening a new tab gets a fresh buffer; calling __resetClientForTesting() in tests clears it.

React users

Use the useAddBreadcrumb hook for a referentially stable function inside components. See React → Hooks.

Session Replay

Core Features

captureException

API Reference