Breadcrumbها
ردی از رویدادهایی که به یک خطا رسیدهاند: ثبت خودکار ناوبری و لمسها، بههمراه breadcrumbهای دستی برای HTTP، کارهای کاربر و رویدادهای سفارشی.
breadcrumbها ردی از رویدادهایی هستند که پیش از رخ دادن خطا اتفاق افتادهاند. کمک میکنند بفهمید کاربر وقتی مشکل پیش آمد مشغول چه کاری بود.
نمونهی مسیر کاربر:
Flutter#
ثبت خودکار ناوبری
MaterialApp(
navigatorObservers: [
AbrovaTraceNavigatorObserver(), // Tracks all screen changes
],
home: HomePage(),
)ثبت خودکار لمسها
با یک فراخوانی، برای هر لمس روی دکمه، سوییچ، ردیف فهرست یا هر ویجت تعاملی breadcrumb ثبت میشود؛ در Web، Android، iOS، macOS، Windows و Linux. هر breadcrumb نوع ویجت، برچسب، ValueKey (اختیاری)، route فعلی و مختصات لمس را ثبت میکند.
// Call once after AbrovaTrace.init() and WidgetsFlutterBinding.ensureInitialized() AbrovaTrace.enableGestureBreadcrumbs();
برای فهرست کامل ویجتهای شناختهشده، ترتیب استخراج برچسب و نکات حریم خصوصی، صفحهی SDK فلاتر را ببینید.
افزودن breadcrumb دستی#
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#
| نوع | توضیح |
|---|---|
BreadcrumbType.user | کارهای کاربر (کلیک، لمس، کشیدن) |
BreadcrumbType.navigation | تغییر صفحه (با observer خودکار) |
BreadcrumbType.http | فراخوانیهای API و درخواستهای شبکه |
BreadcrumbType.state | تغییرات وضعیت اپ |
BreadcrumbType.info | رویدادهای اطلاعاتی عمومی |
BreadcrumbType.error | رویدادهای خطا |
BreadcrumbType.system | رویدادهای SDK و سیستم |
مثال کامل#
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'),
);
}
}دیدن breadcrumbها#
breadcrumbها هنگام دیدن جزئیات هر خطا خودکار در داشبورد نمایش داده میشوند. یک خط زمانی نشان میدهند: رویدادهای ناوبری، کلیکهای کاربر، درخواستهای API و در آخر خود خطا.
بهترین روشها#
پیش از پرداخت، تغییر داده و جریانهای ورود breadcrumb ثبت کنید
«کاربر روی checkout کلیک کرد» بهتر از «دکمه کلیک شد» است
شناسهها، مبالغ و context را اضافه کنید، اما از اطلاعات حساس پرهیز کنید
breadcrumb زیاد میتواند پرسروصدا شود؛ روی رویدادهای معنادار تمرکز کنید