ابرووا
شروع رایگان
☰ فهرست مستندات · Breadcrumbs

Breadcrumbها

ردی از رویدادهایی که به یک خطا رسیده‌اند: ثبت خودکار ناوبری و لمس‌ها، به‌همراه breadcrumbهای دستی برای HTTP، کارهای کاربر و رویدادهای سفارشی.

به‌روزرسانی: ۵ آبان ۱۴۰۵

breadcrumbها ردی از رویدادهایی هستند که پیش از رخ دادن خطا اتفاق افتاده‌اند. کمک می‌کنند بفهمید کاربر وقتی مشکل پیش آمد مشغول چه کاری بود.

نمونه‌ی مسیر کاربر:

کاربر اپ را باز کرد← به /checkout رفت← روی «پرداخت» کلیک کرد← 💥 پرداخت ناموفق بود

Flutter#

ثبت خودکار ناوبری

dart
MaterialApp(
  navigatorObservers: [
    AbrovaTraceNavigatorObserver(), // Tracks all screen changes
  ],
  home: HomePage(),
)

ثبت خودکار لمس‌ها

با یک فراخوانی، برای هر لمس روی دکمه، سوییچ، ردیف فهرست یا هر ویجت تعاملی breadcrumb ثبت می‌شود؛ در Web، Android، iOS، macOS، Windows و Linux. هر breadcrumb نوع ویجت، برچسب، ValueKey (اختیاری)، route فعلی و مختصات لمس را ثبت می‌کند.

dart
// Call once after AbrovaTrace.init() and WidgetsFlutterBinding.ensureInitialized()
AbrovaTrace.enableGestureBreadcrumbs();

برای فهرست کامل ویجت‌های شناخته‌شده، ترتیب استخراج برچسب و نکات حریم خصوصی، صفحه‌ی SDK فلاتر را ببینید.

افزودن breadcrumb دستی#

Flutter

dart
// 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

javascript
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

tsx
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 });
نوعتوضیح
BreadcrumbType.userکارهای کاربر (کلیک، لمس، کشیدن)
BreadcrumbType.navigationتغییر صفحه (با observer خودکار)
BreadcrumbType.httpفراخوانی‌های API و درخواست‌های شبکه
BreadcrumbType.stateتغییرات وضعیت اپ
BreadcrumbType.infoرویدادهای اطلاعاتی عمومی
BreadcrumbType.errorرویدادهای خطا
BreadcrumbType.systemرویدادهای SDK و سیستم

مثال کامل#

dart
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 زیاد می‌تواند پرسروصدا شود؛ روی رویدادهای معنادار تمرکز کنید

این صفحه مفید بود؟
گزارش مشکل