Налаштування 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'], });