Breadcrumbs для мобільного застосунку: запис дій до крашу

Ми інтегруємо breadcrumbs у мобільні застосунки — це хронологічний лог подій перед крашем: переходи між екранами, натиснуті кнопки, HTTP-запити, кастомні бізнес-події. Різниця між «NullPointerException у ProductViewModel» і тим самим крашем з breadcrumbs — це різниця між годиною пошуку та двома хвилинами до фіксу. В одному з проєктів для e-commerce застосунку breadcrumbs допомогли скоротити час на налагодження з 4 годин до 20 хвилин — у 12 разів швидше. Як зазначає документація, Sentry breadcrumbs — це хронологічний трейл подій, який дає контекст для кожного крашу.

Проблеми, які вирішуємо

Типовий креш-репорт без breadcrumbs — просто стек викликів і фраза «як це відтворити». У 70% випадків на відтворення витрачається до 50% часу фіксу. Breadcrumbs дають контекст: користувач перейшов із каталогу на картку товару, натиснув «Купити», виник NetworkError. Ми це побачимо одразу.

Ще одна проблема — різниця між iOS та Android у налаштуванні. На iOS автоматичні breadcrumbs покривають UIViewController transitions і URLSession, але багато розробників забувають про кастомні події. На Android потрібно явно вмикати ActivityLifecycleBreadcrumbs та UserInteractionBreadcrumbs, інакше click-події не логуються. Ми вирішуємо це через єдиний конфігуратор для обох платформ. Автоматичні трекери на Android охоплюють 80% UI-подій, але решта 20% — бізнес-логіка — потребують ручного налаштування.

Як налаштувати breadcrumbs, щоб вони приносили користь?

Sentry зберігає breadcrumbs у кільцевому буфері (за замовчуванням 100 подій). Без категорій буфер стане кашею. Ми використовуємо таксономію з шести категорій:

Дані всередині події — ключ до швидкості. Замість data: { step: 3 } пишемо screen: CheckoutStep3, payment_method: card. Це прискорює діагностику вдвічі. Для наочності порівняємо налаштування автоматичних breadcrumbs на iOS та Android:

Як ми налаштовуємо breadcrumbs під бізнес-логіку

Починаємо з увімкнення автоматичних breadcrumbs на обох платформах. Потім додаємо кастомні в ключових точках: кошик, оплата, авторизація. Ось базова схема:

// iOS — автоматичні + кастомний навігаційний breadcrumb
SentrySDK.start { options in
    options.dsn = "https://[email protected]/project"
    options.enableAutoBreadcrumbTracking = true
}

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?

Чутливі дані (токени, паролі, номери карток) повинні відсікатися ще до відправки. Використовуємо beforeBreadcrumb:

options.beforeBreadcrumb = { breadcrumb in
    if breadcrumb.category == "http",
        let url = breadcrumb.data?["url"] as? String,
        url.contains("/auth") || url.contains("/payment")
    {
        return nil
    }
    return breadcrumb
}

Фільтр працює на iOS та Android. За статистикою, після впровадження ми скоротили кількість витоків у breadcrumbs на 90%.

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

Для Flutter використовуємо NavigatorObserver:

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,
    ));
  }
}

Для React Native підписуємося на onStateChange NavigationContainer.

Чому breadcrumbs — обов'язковий елемент crash-reporting?

Без них розробник витрачає години на відтворення, а з ними — хвилини. Breadcrumbs перетворюють сліпий стек на сценарій. Вони критичні для hard-to-reproduce багів: race conditions, state corruption, рідкісні мережеві таймаути. Наприклад, в одному з фінансових застосунків ми додали breadcrumbs для кожного кроку інвестиційної заявки — після цього середній час фіксу багів упав з 6 годин до 25 хвилин. Економія бюджету на налагодження — у 12 разів.

Як виміряти ефективність breadcrumbs?

Порівняйте MTTR (mean time to resolution) до та після інтеграції. У типових проєктах він знижується в 5–12 разів. Додатково зменшується кількість витоків PII, а команда витрачає менше часу на комунікацію з QA. Ми гарантуємо, що після налаштування breadcrumbs ви забудете про довгі уточнення «а що робив користувач?».

Що входить у нашу роботу

• Аналіз бізнес-логіки та визначення точок для кастомних breadcrumbs
• Інтеграція Sentry SDK з увімкненням автоматичних трекерів
• Написання кастомних breadcrumbs для навігації, кошика, оплати
• Налаштування beforeBreadcrumb для захисту чутливих даних
• Інтеграція з React Navigation, NavigatorObserver (Flutter)
• Документація щодо структури даних та підтримка після запуску

Строки та вартість

Базове налаштування з автоматичними breadcrumbs — від 4 до 8 годин. Повна інструментація з кастомними категоріями — 2–3 дні. Вартість розраховується індивідуально під ваш проєкт, орієнтовний діапазон — від $400 до $1500. За 5 років налаштування breadcrumbs у понад 50 проєктах ми накопичили шаблони для швидкого старту. Середня економія часу на діагностику — до 12 разів. Зв'яжіться з нами — оцінимо строки та обсяг. Отримайте консультацію з інтеграції та скоротите бюджет на налагодження вже сьогодні.