Настройка 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'], });