Налаштування Error Tracking (Sentry) для веб-застосунку

Налаштування Error Tracking (Sentry) для веб-застосунку

Sentry — стандарт de facto для відстеження помилок. Але 90% розробників обмежуються встановленням SDK, забуваючи про source maps, release tracking та фільтрацію шуму. Результат: тони хибних спрацьовувань, втрата критичних помилок та години на їх пошук. Ми налаштовуємо Sentry під ключ — від інтеграції з Laravel (PHP 8.3) та React 18 до алертів у Telegram та автоматичного прив'язування комітів через CI/CD. Досвід роботи над 15+ проєктами з навантаженням до 10k RPS гарантує, що ви не потонете в шумі, а кожна помилка буде вчасно помічена.

Нещодавно на проєкті з Laravel та React ми зіткнулися з ситуацією: помилка в production проявлялася лише у 1% користувачів. Без Sentry її не могли відтворити декілька днів. Після налаштування знайшли причину за 10 хвилин — проблема зі станом гонки в Redux. Така діагностика недоступна при простому логуванні.

Чому Sentry краще простого логування?

Sentry не просто зберігає помилки — групує їх за стеком, показує частоту, контекст (змінні оточення, breadcrumbs) та історію змін. На відміну від логів, ви одразу бачите, яка помилка критична, хто її викликав та в якому релізі вона з'явилася. Це скорочує час пошуку причин на 70% — з годин до хвилин. Sentry працює в 10 разів швидше традиційних систем моніторингу при виявленні регресій.

Дані Sentry показують, що налаштування source maps прискорює налагодження на 70%. Типова економія від скорочення часу на налагодження становить $200–500 на місяць для середнього проєкту.

Порівняння варіантів розгортання

Як налаштувати Sentry за 4 кроки?

1. Встановлення SDK: на backend (Laravel) та frontend (React).
2. Налаштування source maps: для читабельних стеків у браузері.
3. Фільтрація шуму: виключення ботів, очікуваних помилок та розширень.
4. Алерти та release tracking: сповіщення в Telegram та прив'язка комітів.

Встановлення SDK

Backend PHP/Laravel:

composer require sentry/sentry-laravel php artisan sentry:publish --dsn=https://[email protected]/project-id 

У .env додайте SENTRY_LARAVEL_DSN та SENTRY_TRACES_SAMPLE_RATE=0.1. SDK реєструється автоматично. Frontend React/Next.js:

npm install @sentry/react 

Ініціалізація:

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
  tracesSampleRate: 0.1,
  replaysSessionSampleRate: 0.05,
  replaysOnErrorSampleRate: 1.0,
});

Як налаштувати source maps для налагодження?

Без source maps стек викликів — мініфікований код. Встановіть плагін @sentry/vite-plugin, потім налаштуйте:

import { sentryVitePlugin } from '@sentry/vite-plugin';
export default defineConfig({
  build: {
    sourcemap: true
  },
  plugins: [
    react(),
    sentryVitePlugin({
      org: 'your-org',
      project: 'your-project',
      authToken: process.env.SENTRY_AUTH_TOKEN,
      sourcemaps: {
        assets: './dist/**',
        ignore: ['node_modules'],
        filesToDeleteAfterUpload: ['./dist/**/*.map']
      }
    })
  ]
});

Source maps завантажуються при збірці та видаляються з публічної директорії — користувачі їх не побачать. Детальніше про налаштування source maps читайте в документації Sentry.

Фільтрація шуму

За замовчуванням Sentry ловить все: ботів, 404, помилки розширень. Налаштовуємо фільтри:

// config/sentry.php
'before_send' => function (\Sentry\Event $event, ?\Sentry\EventHint $hint): ?\Sentry\Event {
    $exception = $hint?->exception;
    if ($exception instanceof \Illuminate\Auth\AuthenticationException) return null;
    if ($exception instanceof \Symfony\Component\HttpKernel\Exception\NotFoundHttpException) return null;
    $userAgent = request()->header('User-Agent', '');
    if (str_contains(strtolower($userAgent), 'bot')) return null;
    return $event;
},

Sentry.init({
  denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i],
  ignoreErrors: ['ResizeObserver loop limit exceeded', 'Non-Error promise rejection captured'],
});