Aller au contenu

Breadcrumbs

Les breadcrumbs sont une mini-timeline qui accompagne chaque event. Pionne en collecte automatiquement, et tu peux en ajouter manuellement pour les actions métier.

Auto-breadcrumbs

Activés par défaut.

Console

Tous les console.log/info/warn/error deviennent des breadcrumbs category: 'console' :

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

Fetch

Chaque fetch() crée un breadcrumb category: 'http'. L’URL est strippée : la query string est retirée pour éviter d’envoyer des tokens d’auth ou des query params PII.

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

Désactiver l’auto-capture

// Tout désactiver
Pionne.init({ token: '...', breadcrumbs: false });

// Garder fetch, désactiver console
Pionne.init({ token: '...', breadcrumbs: { console: false, fetch: true } });

Breadcrumbs manuels

Utilise Pionne.addBreadcrumb pour tracer les actions métier importantes :

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

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

Categories standard

Category	Usage
`console`	Auto, depuis `console.*`
`http`	Auto, depuis `fetch`
`navigation`	Manuel, hooks Expo Router / React Navigation
`ui`	Manuel, taps & gestes
`custom`	Manuel, libre

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;
}

Limites

Voir aussi