Skip to content

Breadcrumbs

Breadcrumbs are a mini-timeline attached to every event. Pionne collects some automatically, and you can add your own for business actions.

Auto-breadcrumbs

Enabled by default.

Console

Every console.log/info/warn/error becomes a category: 'console' breadcrumb:

console.warn('User clicked banner', { campaign: 'spring_24' });
// → breadcrumb { category: 'console', level: 'warn', message: '...' }

Fetch

Every fetch() creates a category: 'http' breadcrumb. The URL is stripped: the query string is removed to avoid leaking auth tokens or PII query params.

fetch('https://api.example.com/users/42?token=abc');
// → breadcrumb http { url: 'https://api.example.com/users/42', method: 'GET', status: 200 }

Disable auto-capture

// Disable everything
Pionne.init({ token: '...', breadcrumbs: false });

// Keep fetch, disable console
Pionne.init({ token: '...', breadcrumbs: { console: false, fetch: true } });

Manual breadcrumbs

Use Pionne.addBreadcrumb to trace the business actions that matter:

Pionne.addBreadcrumb({
  category: 'navigation',
  message: 'Navigated to Checkout',
  data: { from: 'Cart', items: 3 },
});

Pionne.addBreadcrumb({
  category: 'ui',
  message: 'Tapped pay button',
});

Standard categories

Category	Usage
`console`	Auto, from `console.*`
`http`	Auto, from `fetch`
`navigation`	Manual, Expo Router / React Navigation hooks
`ui`	Manual, taps & gestures
`custom`	Manual, free

import { useSegments } from 'expo-router';
import { useEffect } from 'react';
import { Pionne } from '@pionne/react-native';

export function NavBreadcrumbs() {
  const segments = useSegments();
  useEffect(() => {
    Pionne.addBreadcrumb({
      category: 'navigation',
      message: '/' + segments.join('/'),
    });
  }, [segments]);
  return null;
}

Limits

See also