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

Интеграция API в мобильное приложение: с чего начать

Запрос уходит, ответ не приходит, timeout — 30 секунд. Пользователь смотрит на спиннер. Сети нет — мобильная карта в метро. Или сеть есть, но сервер вернул 200 с HTML-страницей ошибки вместо JSON — и приложение крашит при JSONDecoder.decode(). Мы видим такие кейсы на каждом втором проекте. Поэтому интеграция API в мобильное приложение — это не просто вызов endpoint'а, а проектирование надёжного сетевого слоя: обработка ошибок, кэширование, offline-режим, certificate pinning. Закажите аудит текущего сетевого слоя — оценим проект за 1 день.

Почему стандартные библиотеки недостаточны? URLSession и OkHttp предоставляют базовый HTTP-клиент, но для production нужны retry с exponential backoff, валидация статус-кодов, типизированная десериализация и мониторинг состояния сети. Без этого приложение теряет данные и пользователей. Мы уже 5 лет занимаемся мобильной разработкой и реализовали более 30 проектов с интеграцией API на iOS, Android и Flutter — от стартапов до enterprise-решений.

Как выбрать протокол для интеграции API?

REST остаётся стандартом для большинства проектов. Но когда на экране профиля нужно 5 полей из 40, GraphQL исключает over-fetching и сокращает трафик на 30–60%. gRPC оправдан при тысячах запросов в минуту (trading, IoT) — бинарная сериализация в 3–5 раз быстрее JSON. WebSocket — единственный выбор для real-time без polling (сообщения, уведомления).

Пример из практики: для финтех-приложения мы заменили REST (40 полей) на GraphQL — размер ответа сократился с 12 КБ до 2,5 КБ, время рендера экрана упало на 70%. Экономия трафика составила около 15 000 ₽ в месяц при 100 000 активных пользователей.

Как обеспечить надёжность соединения и offline-first

Пользователи теряют сеть в метро, лифте, тоннеле. Мобильное приложение обязано работать без интернета — хотя бы в read-only режиме. Мы внедряем паттерн offline-first:

1. При открытии экрана сначала показываем данные из локального кеша (Core Data / Room).
2. Параллельно выполняем сетевой запрос, обновляем UI после ответа.
3. Если сеть недоступна — показываем кешированные данные и метку «нет соединения».
4. При восстановлении сети автоматически синхронизируем изменения.

Для кэширования HTTP-ответов используем URLCache (iOS) и OkHttp Cache (Android) с поддержкой Cache-Control. Для структурированных данных — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback отслеживают состояние сети и триггерят обновление.

REST и выбор клиентской библиотеки

Alamofire (iOS) — де-факто стандарт для Swift-проектов. Поверх URLSession добавляет request chaining, response validation, automatic retry, certificate pinning через ServerTrustManager. AF.request() с .validate() возвращает ошибку для любого статус-кода вне 200–299. Без .validate() Alamofire считает 404 и 500 успешными ответами. С Swift Concurrency — async-версия через serializingDecodable.

Retrofit (Android) — аннотационный HTTP-клиент поверх OkHttp. Интерфейс с аннотациями компилируется в реализацию. @GET, @POST, @Path, @Query, @Body — декларативное описание API. OkHttp под капотом: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — логирование в debug-сборке. Authenticator — автоматический refresh токена при 401.

Ktor (KMM/Flutter) — мультиплатформенный HTTP-клиент. На iOS работает через Darwin engine (URLSession), на Android — через OkHttp. Единый код для обеих платформ при KMM-архитектуре.

GraphQL: когда REST не справляется

REST возвращает фиксированную структуру. Экран профиля требует name, avatar, email — сервер отдаёт 40 полей. Over-fetching. GraphQL решает это: клиент запрашивает ровно нужные поля. Это критично для мобайла, где трафик и время парсинга — реальные ограничения. Apollo iOS и Apollo Kotlin генерируют типизированные классы по схеме: schema.graphql + query-файлы → строгие типы на этапе компиляции. Subscriptions через WebSocket — real-time без polling. Ограничение: GraphQL сложнее кешировать на уровне HTTP. Apollo использует нормализованный in-memory кеш InMemoryNormalizedCache — запросы с пересекающимися данными обновляют кеш без дублирования. Apollo GraphQL Documentation

WebSocket: real-time без лишнего трафика

Polling (setInterval каждые 5 секунд) — трата батареи и трафика. WebSocket — постоянное двунаправленное соединение. iOS: URLSessionWebSocketTask (нативный, iOS 13+). Android: OkHttp WebSocket. Обязательная обработка reconnect: при onFailure — экспоненциальный backoff (1с → 2с → 4с → 8с → максимум 60с). Socket.IO — надстройка с автоматическим reconnect, но для новых проектов предпочтительнее нативный WebSocket (меньше зависимостей).

gRPC: для высоконагруженных сервисов

gRPC с protobuf — бинарная сериализация: меньше размер, быстрее парсинг. grpc-swift для iOS, grpc-kotlin для Android. Protobuf-схема компилируется в типизированные классы. Streaming (server-side, client-side, bidirectional) — нативная возможность. Порог применения: высокая частота запросов (trading, IoT) или критичная latency. Для обычного CRUD REST проще в дебаге и мониторинге.

Certificate Pinning и безопасность

Корпоративный proxy может перехватить HTTPS через подмену сертификата. Certificate pinning предотвращает это: приложение принимает только конкретный сертификат или публичный ключ. Alamofire: ServerTrustManager с PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner с SHA-256 хешем. Операционная сложность: при ротации сертификата старые версии приложения перестают работать. Решение — pinning на публичный ключ CA или поддержка нескольких пинов с grace period. Подробнее о certificate pinning на Wikipedia

Что входит в работу

Мы передаём: исходный код сетевого слоя, документацию по используемым библиотекам, инструкцию по ротации сертификатов, поддержку в течение 2 недель после сдачи.

Сроки и стоимость

Реализация сетевого слоя с REST, retry, кэшированием и offline-режимом — 1–2 недели. Добавление GraphQL или WebSocket — ещё 1–2 недели. gRPC — 2–3 недели, включая кодогенерацию. Стоимость рассчитывается индивидуально после анализа API и требований к offline-поведению. Оценим проект за 1 день — свяжитесь для консультации.