Breadcrumbs

Breadcrumbs are a trail of events that happened before an error, helping you understand what led to the crash.

Automatic Breadcrumbs

With breadcrumbs: true (default), the Browser SDK automatically captures:

Category	Events Captured
click	Element clicks with selector, tag, ID, class
navigation	URL changes (pushState, popstate)
console	console.error() calls
fetch	Fetch requests with URL, method, status, duration
xhr	XMLHttpRequest with URL, method, status, duration

Disabling Auto-Breadcrumbs

Syntropy.init({
  projectId: 'your-project-id',
  breadcrumbs: false, // Disable automatic collection
});

Limiting Breadcrumbs

Syntropy.init({
  projectId: 'your-project-id',
  maxBreadcrumbs: 25, // Default is 50
});

Manual Breadcrumbs

Add custom breadcrumbs for important actions:

import { addBreadcrumb } from '@eclosion-tech/syntropy-browser';

addBreadcrumb({
  category: 'user',
  message: 'User clicked checkout button',
  data: {
    cartTotal: 99.99,
    itemCount: 3,
  },
});

Breadcrumb Categories

Category	Use Case
navigation	Page/screen changes
click	User interactions
xhr / fetch	Network requests
console	Log messages
error	Error-related events
user	User actions
custom	Anything else

Breadcrumb Levels

addBreadcrumb({
  category: 'custom',
  message: 'Payment failed',
  level: 'error', // 'fatal' | 'error' | 'warning' | 'info' | 'debug'
  data: { reason: 'Card declined' },
});

React Native Breadcrumbs

For React Native, add breadcrumbs for:

Navigation

onStateChange={() => {
  const currentRoute = navigationRef.getCurrentRoute()?.name;
  if (currentRoute) {
    Syntropy.addBreadcrumb({
      category: 'navigation',
      message: `Navigate to ${currentRoute}`,
    });
  }
}}

App State

AppState.addEventListener('change', (state) => {
  Syntropy.addBreadcrumb({
    category: 'custom',
    message: `App state: ${state}`,
    data: { state },
  });
});

User Actions

<TouchableOpacity
  onPress={() => {
    Syntropy.addBreadcrumb({
      category: 'click',
      message: 'Pressed checkout button',
    });
    handleCheckout();
  }}
>

Breadcrumb Data

When an error occurs, breadcrumbs are attached to the error event:

{
  "type": "error",
  "payload": {
    "message": "Cannot read property 'id' of undefined",
    "breadcrumbs": [
      {
        "timestamp": "2024-01-15T10:00:00Z",
        "category": "navigation",
        "message": "Navigate to /checkout"
      },
      {
        "timestamp": "2024-01-15T10:00:05Z",
        "category": "fetch",
        "message": "POST /api/orders",
        "data": { "status": 200, "duration": 245 }
      },
      {
        "timestamp": "2024-01-15T10:00:06Z",
        "category": "click",
        "message": "Click on button.submit-order"
      }
    ]
  }
}

Viewing Breadcrumbs

In the Syntropy dashboard, breadcrumbs appear on the error detail page, showing the timeline of events leading up to the error.