Breadcrumbs

Product overview (types, issue trail): Features → Breadcrumbs.

Queue

• max 24 entries — oldest drop first
• works before init (entries wait until the first error)
• never throws into your app

addBreadcrumb

import { addBreadcrumb } from '@retrace-kit/sdk';

addBreadcrumb({
  type: 'common',
  name: 'action',
  value: 'opened export modal',
});

type: route | request | common. For request, optional status and duration (ms).

Network

After init(), fetch and XMLHttpRequest are instrumented. Each completed request adds one request breadcrumb (method, URL, status when available, duration).

• works with axios and other clients on fetch/XHR
• SDK ingest calls are excluded
• network failures omit status; duration is still recorded

import { init } from '@retrace-kit/sdk';

init({ apiKey: '...' });

// No extra setup
await fetch('/api/plans');

Router

Routers do not emit breadcrumbs by themselves. Hook navigation once:

React Router

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { addBreadcrumb } from '@retrace-kit/sdk';

function RouteBreadcrumbs() {
  const location = useLocation();

  useEffect(() => {
    addBreadcrumb({
      type: 'route',
      name: 'pathname',
      value: location.pathname + location.search,
    });
  }, [location]);

  return null;
}

// render inside <BrowserRouter>, before your routes

Next.js

App Router: onRouterTransitionStart in instrumentation-client.ts (no React). Full setup: Next.js → Route breadcrumbs.

Vue Router

import { addBreadcrumb } from '@retrace-kit/sdk';

router.afterEach((to) => {
  addBreadcrumb({
    type: 'route',
    name: 'pathname',
    value: to.fullPath,
  });
});