Настройка Error Tracking (Bugsnag) для веб-приложения

Ошибки в production — скрытая угроза

Каждый второй инцидент в продакшене связан с ошибками, которые не были обнаружены на этапе тестирования. 60% сбоев не воспроизводятся в тестовой среде, а разработчики тратят часы на отладку без контекста. Мы предлагаем решение — настройка Bugsnag, коммерческой системы error tracking с фокусом на стабильность релизов. Наш опыт — более 10 лет в веб-разработке на стеке Laravel, React, TypeScript. После настройки вы будете получать полный контекст каждой ошибки: окружение, действия пользователя, логи. Прозрачный мониторинг окупается за счёт быстрого выявления регрессий — экономия времени на отладку достигает 50%.

Почему Bugsnag, а не Sentry?

Bugsnag вводит метрику Stability Score — процент сессий без ошибок. Согласно документации Bugsnag, это ключевой показатель здоровья приложения. Для проекта с 100 000 сессий в месяц улучшение Stability Score с 95% до 99% означает на 4 000 меньше проблемных сессий. Bugsnag в 2 раза быстрее выявляет критические регрессии благодаря автоматической приоритизации. Бесплатный план включает 7 500 ошибок в месяц на один проект, а платные — с увеличенными лимитами и приоритетной поддержкой.

Как повысить Stability Score с помощью Bugsnag?

Stability Score — ключевая метрика, отражающая долю сессий без ошибок. Bugsnag автоматически рассчитывает её на основе данных с SDK. Мы поможем настроить приоритизацию ошибок: критичные падения (crash) выносятся вперёд, а малозначимые предупреждения фильтруются. Например, если приложение падает при загрузке корзины для 2% пользователей, Bugsnag подсветит это как регрессию. Настройка уведомлений в Slack позволит команде реагировать за минуты, а не часы. В одном проекте с 500 000 пользователей после внедрения Bugsnag время на поиск и исправление ошибок сократилось на 60%.

Как мы настраиваем Bugsnag

Установка PHP/Laravel

composer require bugsnag/bugsnag-laravel php artisan bugsnag:install your-api-key-here 

В .env добавьте ключ, версию и stage. Config и Handler настраиваются автоматически; исключения отправляются в Bugsnag. Полная документация доступна на официальном сайте.

Установка JavaScript/React

npm install @bugsnag/js @bugsnag/plugin-react 

Инициализация с плагином React и ErrorBoundary:

Bugsnag.start({ apiKey: import.meta.env.VITE_BUGSNAG_API_KEY, plugins: [new BugsnagPluginReact()], releaseStage: import.meta.env.MODE, enabledReleaseStages: ['production', 'staging'], appVersion: import.meta.env.VITE_APP_VERSION, onError: (event) => { const user = getCurrentUser(); if (user) { event.setUser(user.id, user.email, user.name); } if (event.errors[0].errorMessage.includes('ResizeObserver')) { return false; } }, }); 

ErrorBoundary оборачивает корневой компонент, отображая fallback UI при ошибке.

Source Maps и Breadcrumbs

npm install --save-dev @bugsnag/source-maps npx bugsnag-source-maps upload-browser \ --api-key $BUGSNAG_API_KEY \ --app-version $APP_VERSION \ --directory dist/assets \ --base-url https://example.com/assets/ 

Breadcrumbs записываются автоматически (клики, навигация, console.log). Ручные breadcrumbs добавляются методом leaveBreadcrumb.

Bugsnag.leaveBreadcrumb('User pressed checkout', { cartTotal: 129.99, currency: 'USD', });