Using Breadcrumbs for Better Error Context

Record event trails that are automatically attached to error logs.

What Are Breadcrumbs?

Breadcrumbs are a trail of events leading up to an error. When an error or fatal log is sent, all recorded breadcrumbs are attached automatically — giving you the full context of what happened before the failure.

Automatic Breadcrumbs

The Browser SDK automatically records breadcrumbs for:

• fetch() and XMLHttpRequest calls (method, URL, status, duration)
• Navigation events (page loads, history changes)
• Console warnings and errors

Manual Breadcrumbs

Add custom breadcrumbs for application-specific events:

Lognitor.addBreadcrumb({
  type: 'user',
  category: 'ui.click',
  message: 'Clicked "Add to cart" button',
  level: 'info',
  data: { productId: 'prod_123', buttonId: '#add-to-cart' },
});

Lognitor.addBreadcrumb({
  type: 'db',
  category: 'query',
  message: 'SELECT * FROM orders WHERE id = ?',
  level: 'info',
  data: { rows: 1, duration_ms: 12 },
});

When an error occurs, these breadcrumbs appear in the error detail view, showing the exact sequence of events.

Ring Buffer

Breadcrumbs are stored in a ring buffer (default: 100). When the buffer is full, the oldest breadcrumbs are dropped. Configure the size:

Lognitor.init({
  apiKey: 'your-key',
  maxBreadcrumbs: 200,
});