Мониторинг сетевых ошибок в мобильном приложении: настройка 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 недели. Стоимость рассчитывается индивидуально в зависимости от сложности и стека. Хотите защитить своё приложение? Заполните форму обратной связи — мы свяжемся в течение дня.