Реалізація Breadcrumbs (послідовність дій до крашу) в мобільному застосунку

Реалізація Breadcrumbs (послідовність дій до краху) у мобільних додатках

Крах без контексту — це строчка у стеку вызовів та запитання «як це відтворити». Breadcrumbs — це хронологічний лог подій, які передували падінню: переходи між екранами, натиснені кнопки, HTTP-запити, кастомні события. Різниця між «NullPointerException у ProductViewModel» та тим же крахом з breadcrumbs — це різниця між годиною пошуку та двома хвилинами до фіксу.

Як Sentry зберігає breadcrumbs

SDK Sentry тримає кільцевий буфер breadcrumbs у пам'яті. За замовчуванням — останні 100 подій. При краху буфер серіалізується та йде з crash report. Буфер не записується на диск між сесіями — тільки для поточного запуску додатку.

Важливо: якщо додаток закрився коректно (backgrounded) та крах відбувся при наступному запуску — breadcrumbs попередньої сесії недоступні.

Автоматичні breadcrumbs

Sentry додає частину breadcrumbs автоматично:

iOS:

SentrySDK.start { options in
    options.dsn = "https://[email protected]/project"
    options.enableAutoBreadcrumbTracking = true
    // Автоматично: UIViewController transitions, HTTP requests (URLSession),
    // System notifications (UIApplicationDidBecomeActiveNotification та ін.)
}

Android:

SentryAndroid.init(this) { options ->
    options.dsn = "https://[email protected]/project"
    options.isEnableActivityLifecycleBreadcrumbs = true  // Activity transitions
    options.isEnableUserInteractionBreadcrumbs = true    // Click events
    options.isEnableNetworkEventBreadcrumbs = true       // Network requests
    options.isEnableAppComponentBreadcrumbs = true       // App lifecycle
}

Автоматичні breadcrumbs охоплюють навігацію та мережу. Все, що вище рівня framework — додаємо вручну.

Кастомні breadcrumbs

// iOS — навігаційна событие у кастомному маршрутизаторі
SentrySDK.addBreadcrumb({
    let crumb = Breadcrumb()
    crumb.category = "navigation"
    crumb.message = "Opened ProductDetail"
    crumb.data = ["product_id": productId, "source": "search"]
    crumb.level = .info
    return crumb
}())

// Android — бізнес-событие
val breadcrumb = Breadcrumb().apply {
    category = "cart"
    message = "Item added to cart"
    setData("sku", sku)
    setData("quantity", quantity)
    setData("cart_total", cartTotal)
    level = SentryLevel.INFO
}
Sentry.addBreadcrumb(breadcrumb)

Структурування breadcrumbs для діагностики

Категорії breadcrumbs визначають їх відображення у Sentry UI. Використовані категорії:

Конкретні дані у data — ключ до швидкої діагностики:

// Добре: видно, що саме відбулося
breadcrumb.setData("screen", "CheckoutStep3")
breadcrumb.setData("payment_method", "card")
breadcrumb.setData("card_type", "visa")

// Погано: незрозуміло без вихідного коду
breadcrumb.setData("step", 3)
breadcrumb.setData("type", "card")

Налаштування буфера

// iOS — збільшити ліміт breadcrumbs
SentrySDK.start { options in
    options.maxBreadcrumbs = 200 // за замовчуванням 100
}

200 подій для активного користувача — це приблизно 2–3 хвилини взаємодії. Для складних flow (реєстрація, оплата) цього достатньо. Більше не потрібно: крах-репорт стає занадто великим, а старі события безкорисні.

Інтеграція з навігаційними фреймворками

React Native Navigation:

// React Navigation v6 — автоматичні breadcrumbs при переходах
import * as Sentry from "@sentry/react-native";
import { useNavigationContainerRef } from "@react-navigation/native";

const navigationRef = useNavigationContainerRef();

function App() {
    return (
        <NavigationContainer
            ref={navigationRef}
            onStateChange={() => {
                const currentRoute = navigationRef.getCurrentRoute();
                Sentry.addBreadcrumb({
                    category: "navigation",
                    message: `Navigated to ${currentRoute?.name}`,
                    level: "info",
                });
            }}
        >

Flutter:

// NavigatorObserver для автоматичних breadcrumbs
class SentryNavigatorObserver extends NavigatorObserver {
    @override
    void didPush(Route route, Route? previousRoute) {
        Sentry.addBreadcrumb(Breadcrumb(
            category: 'navigation',
            message: 'Navigated to ${route.settings.name}',
            level: SentryLevel.info,
        ));
    }
}

// У MaterialApp:
navigatorObservers: [SentryNavigatorObserver()],

Захист від утечки даних

Breadcrumbs можуть містити чутливі дані. Налаштування before-send фільтра:

options.beforeBreadcrumb = { breadcrumb in
    // Не логуємо breadcrumbs з токенами та паролями
    if breadcrumb.category == "http",
       let url = breadcrumb.data?["url"] as? String,
       url.contains("/auth") || url.contains("/payment") {
        return nil // не додавати цей breadcrumb
    }
    return breadcrumb
}

Що ми робимо

• Включаємо автоматичні breadcrumbs для навігації, мережі та lifecycle
• Визначаємо таксономію кастомних категорій під бізнес-логіку
• Додаємо кастомні breadcrumbs у ключові точки: корзина, оплата, авторизація
• Інтегруємо з навігаційними фреймворками (React Navigation, Flutter Navigator)
• Налаштовуємо beforeBreadcrumb фільтр для виключення чутливих даних

Часові оцінки

Базова настройка з автоматичними breadcrumbs: 4–8 годин. Повна інструментація з кастомними категоріями: 2–3 дні. Ціна розраховується індивідуально.