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 разів. Зв'яжіться з нами — оцінимо строки безкоштовно. Отримайте консультацію з інтеграції та скоротите бюджет на налагодження вже сьогодні.