Breadcrumbs
Trail of events leading up to an error — automatic navigation and tap tracking plus manual breadcrumbs for HTTP, user actions, and custom events.
Breadcrumbs are a trail of events that happened before an error occurred. They help you understand what the user was doing when things went wrong.
Example journey:
Flutter#
Track Navigation Automatically
MaterialApp(
navigatorObservers: [
AbrovaTraceNavigatorObserver(), // Tracks all screen changes
],
home: HomePage(),
)Track Taps Automatically
One call enables breadcrumbs for every tap on a button, switch, list row, or any interactive widget — across Web, Android, iOS, macOS, Windows, and Linux. Each breadcrumb captures the widget type, label, optional ValueKey, current route, and tap coordinates.
// Call once after AbrovaTrace.init() and WidgetsFlutterBinding.ensureInitialized() AbrovaTrace.enableGestureBreadcrumbs();
See the Flutter SDK page for the full list of recognized widgets, label-extraction order, and privacy notes.
Add Manual Breadcrumbs#
Flutter
// User action
AbrovaTrace.addBreadcrumb(
'User clicked checkout button',
type: BreadcrumbType.user,
data: {'cart_items': 3, 'total': 49.99},
);
// HTTP request
AbrovaTrace.addBreadcrumb(
'POST /api/orders',
type: BreadcrumbType.http,
data: {'status_code': 200, 'duration_ms': 150},
);
// Custom event
AbrovaTrace.addBreadcrumb(
'Cache miss for user profile',
type: BreadcrumbType.info,
data: {'cache_key': 'user_123'},
);Node.js
const AbrovaTrace = require('@abrova-trace/nodejs-sdk');
const { Breadcrumb } = AbrovaTrace;
AbrovaTrace.addBreadcrumb(
Breadcrumb.http('POST', '/api/login', 200, 150)
);
AbrovaTrace.addBreadcrumb(
Breadcrumb.database('SELECT * FROM users WHERE id = ?', 25)
);
AbrovaTrace.addBreadcrumb(
Breadcrumb.user('clicked_checkout_button', { cart_total: 99.99 })
);Next.js
import { useBreadcrumbs } from '@abrova-trace/nextjs-sdk/react';
const { addBreadcrumb, addHttp } = useBreadcrumbs();
addBreadcrumb('Form submitted', { formName: 'contact' });
addHttp('GET', '/api/users', 200, { duration_ms: 45 });Breadcrumb Types#
| Type | Description |
|---|---|
BreadcrumbType.user | User actions (clicks, taps, swipes) |
BreadcrumbType.navigation | Screen changes (automatic with observer) |
BreadcrumbType.http | API calls and network requests |
BreadcrumbType.state | App state changes |
BreadcrumbType.info | General information events |
BreadcrumbType.error | Error events |
BreadcrumbType.system | SDK and system events |
Complete Example#
class CheckoutPage extends StatelessWidget {
Future<void> _checkout() async {
// Track user action
AbrovaTrace.addBreadcrumb(
'User initiated checkout',
type: BreadcrumbType.user,
data: {'cart_items': 3},
);
try {
// Track HTTP call
AbrovaTrace.addBreadcrumb(
'POST /api/orders',
type: BreadcrumbType.http,
);
final order = await api.createOrder();
AbrovaTrace.addBreadcrumb(
'Order created successfully',
type: BreadcrumbType.info,
data: {'order_id': order.id},
);
} catch (e, stackTrace) {
// Error will include ALL breadcrumbs above
await AbrovaTrace.captureException(
e,
stackTrace: stackTrace,
message: 'Checkout failed',
);
}
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: _checkout,
child: Text('Place Order'),
);
}
}Viewing Breadcrumbs#
Breadcrumbs appear automatically in the dashboard when viewing an error detail. They show a timeline of: navigation events, user clicks, API requests, and then the error.
Best Practices#
Track breadcrumbs before payments, data mutations, and auth flows
"User clicked checkout" is better than "button clicked"
Add IDs, amounts, and context — but avoid sensitive info
Too many breadcrumbs can be noisy — focus on meaningful events