Моніторинг мережевих помилок у мобільному додатку: Sentry

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 створює окремий issue для кожного URL з помилкою. З fingerprint ['http-500', '/api/orders'] всі 500-ті помилки на /api/orders групуються в один issue.

Як налаштувати fingerprint для групування?

У наведеному коді ми використовуємо статус відповіді та шлях endpoint. Якщо потрібно об'єднати помилки за іншою ознакою — змініть масив. Наприклад, для аутентифікаційних помилок: ['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 для всіх endpoint.
• Додавання offline-детектування та breadcrumbs.
• Розробка правил алертингу та інтеграція з вашим месенджером.
• Документація для розробників.
• Навчання команди (1–2 дзвінки).
• Підтримка протягом місяця після запуску.

Ми налаштовуємо моніторинг для продакшн-додатків вже 5+ років. Серед наших клієнтів — фінтех, e-commerce та SaaS (50+ проєктів). Вартість налаштування від $2,000, окупається за 1–2 місяці. Оцінимо ваш проєкт — напишіть нам.

Оцінка

Налаштування Sentry з монітором мережевих запитів, fingerprinting, offline-детектом та алертами: 1–2 тижні. Вартість розраховується індивідуально. Хочете захистити свій додаток? Заповніть форму зворотного зв'язку — ми зв'яжемося протягом дня.