Breadcrumbs

Breadcrumbs are a trail of events that happened before an error occurred. They help you understand what the user was doing leading up to the error.

What are Breadcrumbs?

Breadcrumbs are like a timeline of events. When an error occurs, you can see all the breadcrumbs that were recorded before the error, giving you context about what happened.

[10:00:01] User logged in
[10:00:05] User navigated to /dashboard
[10:00:10] User clicked "Create Project"
[10:00:12] API call: POST /api/projects
[10:00:13] ERROR: Database connection failed

Adding Breadcrumbs

Laravel / PHP

use Alertiqo\Laravel\Facades\Alertiqo;

Alertiqo::addBreadcrumb([
    'message' => 'User clicked checkout button',
    'category' => 'user-action',
    'level' => 'info',
    'data' => [
        'button_id' => 'checkout-btn',
        'cart_items' => 3
    ]
]);

JavaScript

alertiqo.addBreadcrumb({
  message: 'User clicked checkout button',
  category: 'user-action',
  level: 'info',
  data: { buttonId: 'checkout-btn', cartItems: 3 }
});

Node.js

alertiqo.addBreadcrumb({
  message: 'User clicked checkout button',
  category: 'user-action',
  level: 'info',
  data: { buttonId: 'checkout-btn', cartItems: 3 }
});

Python

alertiqo.add_breadcrumb(
    message="User clicked checkout button",
    category="user-action",
    level="info",
    data={"button_id": "checkout-btn", "cart_items": 3}
)

Go

client.AddBreadcrumb(
    "User clicked checkout button",
    "user-action",
    "info",
    map[string]interface{}{"buttonId": "checkout-btn", "cartItems": 3},
)

Ruby

Alertiqo.add_breadcrumb(
  "User clicked checkout button",
  category: "user-action",
  level: "info",
  data: { button_id: "checkout-btn", cart_items: 3 }
)

Breadcrumb Properties

Property Type Description
message string Description of the event
category string Category of the event (e.g., "user-action", "navigation", "api")
level string Severity level: debug, info, warning, error
data object Additional data associated with the event

Common Categories

  • user-action - User interactions (clicks, form submissions)
  • navigation - Page navigations and route changes
  • api - API calls and responses
  • query - Database queries
  • auth - Authentication events (login, logout)
  • system - System events

Automatic Breadcrumbs

Some SDKs automatically capture breadcrumbs:

  • Laravel - SQL queries (when enabled), HTTP requests
  • JavaScript - Console logs, XHR/fetch requests, DOM events
  • Node.js - HTTP requests, console logs

Best Practices

  • Add breadcrumbs at key points in your application flow
  • Use descriptive messages that explain what happened
  • Include relevant data but avoid sensitive information
  • Use appropriate categories for easier filtering
  • Don't add too many breadcrumbs - focus on important events