Мониторинг сетевых ошибок в мобильном приложении: настройка Sentry

Мониторинг сетевых ошибок в мобильном приложении

Представьте: 3:00 ночи, бэкенд отвечает 502. 8% пользователей видят пустой экран, часть из них удаляет приложение. Мы сталкиваемся с этим каждый день — продакшн без мониторинга сетевых ошибок теряет аудиторию. С помощью Sentry перехватываем такие сценарии на раннем этапе, группируем ошибки по fingerprint и настраиваем алерты, чтобы не пропустить ни одного сбоя.

Сетевые ошибки бывают разными: от потери соединения до парсинга ответа. Каждая категория требует своей стратегии мониторинга. Ниже — классификация с приоритетами, основанная на опыте десятков проектов.

Почему Sentry лучше кастомного логирования?

Кастомное логирование часто создаёт тысячи дублирующихся тикетов. Sentry группирует их по fingerprint — это сокращает время анализа в 5–10 раз. Кроме того, Sentry предоставляет контекст: устройство, версия ОС, трейсы запросов. Согласно документации Sentry, правильная настройка группировки снижает количество инцидентов на 70%. Мы используем Sentry не первый год — это проверенное решение для продакшна. За 5 лет на рынке мы настроили мониторинг для десятков проектов: от финтеха до e-commerce.

Как перехватить сетевые запросы в React Native?

@sentry/react-native автоматически патчит fetch и XMLHttpRequest. По умолчанию включает Performance трейсы, но ошибки не логирует автоматически. Вот конфигурация:

import * as Sentry from '@sentry/react-native'; Sentry.init({ dsn: 'https://[email protected]/yyy', tracesSampleRate: 0.1, // 10% запросов трейсим для Performance integrations: [ new Sentry.ReactNativeTracing({ traceFetch: true, traceXHR: true, // Не включать sensitive endpoints в трейсы tracingOrigins: ['api.yourapp.com', 'cdn.yourapp.com'], }), ], }); 

Для явного логирования сетевых ошибок — обёртка над fetch:

export async function monitoredFetch( url: string, options?: RequestInit ): Promise<Response> { const startTime = Date.now(); try { const response = await fetch(url, options); const duration = Date.now() - startTime; if (!response.ok) { Sentry.captureMessage(`HTTP ${response.status}: ${url}`, { level: response.status >= 500 ? 'error' : 'warning', extra: { status: response.status, duration, method: options?.method ?? 'GET', endpoint: new URL(url).pathname, }, fingerprint: [`http-${response.status}`, new URL(url).pathname], }); } return response; } catch (error) { Sentry.captureException(error, { extra: { url, duration: Date.now() - startTime }, tags: { error_type: 'network_connectivity' }, }); throw error; } } 

fingerprint — критически важен. Без него Sentry создаёт отдельный ишью для каждого URL с ошибкой. С fingerprint ['http-500', '/api/orders'] все 500-е ошибки на /api/orders группируются в один ишью.

Как настроить fingerprint для группировки?

В приведённом коде мы используем статус ответа и путь эндпоинта. Если нужно объединить ошибки по другому признаку — измените массив. Например, для аутентификационных ошибок: ['auth-4xx'].

Breadcrumbs: контекст перед ошибкой

Breadcrumbs показывают, что происходило до сетевой ошибки: какие экраны открывал пользователь, какие действия совершал. По умолчанию хранятся последние 100 breadcrumbs — этого достаточно для длинных сессий. Вот как добавить breadcrumb при навигации:

// Добавляем breadcrumb при навигации navigation.addListener('state', (e) => { Sentry.addBreadcrumb({ category: 'navigation', message: `Navigate to ${e.data.state.routes[e.data.state.index].name}`, level: 'info', }); }); 

Благодаря breadcrumbs время на локализацию проблемы сокращается с часов до минут: вы видите не просто ошибку, а последовательность действий пользователя.

Как отделить offline-ошибки от серверных?

Offline-ошибки нужно отличать от серверных. Пользователь в метро — не проблема бэкенда:

import NetInfo from '@react-native-community/netinfo'; let isConnected = true; NetInfo.addEventListener(state => { isConnected = state.isConnected ?? true; }); // В monitoredFetch, при catch: if (!isConnected) { // Не отправляем в Sentry — это ожидаемый offline throw new OfflineError('No network connection'); } // Иначе — реальная ошибка, логируем Sentry.captureException(error, { tags: { connectivity: 'online' } }); 

Сравнение подходов к алертингу

Как настроить алерты в Sentry?

Sentry Alerts по условию: count(event) > 50 per 5min для http-500 → Slack/PagerDuty. Error rate выше baseline → alert. Для продакшн это должно работать 24/7. Вот пошаговая инструкция:

1. Откройте раздел Alerts → Create Alert.
2. Выберите тип: Issues (количество ошибок).
3. Задайте критерий: фильтр по уровню (error), тегам (endpoint).
4. Укажите порог: например, 50 событий за 5 минут.
5. Настройте канал: Slack, PagerDuty, email.
6. Укажите интервал silence (чтобы избежать спама).

Готово. Алерты будут автоматически уведомлять команду о всплесках ошибок.

Что входит в настройку под ключ?

Мы гарантируем корректную настройку мониторинга. В работу входит:

• Интеграция Sentry в приложение (любой стек: React Native, Flutter, нативный).
• Настройка fingerprint для всех эндпоинтов.
• Добавление offline-детектирования и breadcrumbs.
• Разработка правил алертинга и интеграция с вашим мессенджером.
• Документация для разработчиков.
• Обучение команды (1–2 созвона).
• Поддержка в течение месяца после запуска.

Более 5 лет мы настраиваем мониторинг для продакшн-приложений. Среди наших клиентов — финтех, e-commerce и SaaS. Оценим ваш проект бесплатно — напишите нам. Свяжитесь с нами для консультации или закажите настройку прямо сейчас.

Оценка

Настройка Sentry с монитором сетевых запросов, fingerprinting, offline-детектом и алертами: 1–2 недели. Стоимость рассчитывается индивидуально в зависимости от сложности и стека. Хотите защитить своё приложение? Заполните форму обратной связи — мы свяжемся в течение дня.