Помилки в production — прихована загроза
Кожен другий інцидент у продакшені пов'язаний з помилками, які не були виявлені на етапі тестування. 60% збоїв не відтворюються в тестовому середовищі, а розробники витрачають години на налагодження без контексту. Ми пропонуємо налаштування Bugsnag — комерційної системи error tracking з фокусом на стабільність релізів. Наш досвід — більше 10 років у веб-розробці на стеку Laravel, React, TypeScript (виконали 50+ інтеграцій). Після налаштування ви отримуватимете повний контекст кожної помилки: оточення, дії користувача, логи. Прозорий моніторинг окупається за рахунок швидкого виявлення регресій — економія часу на налагодження сягає 50%.
Чому Bugsnag, а не Sentry?
Bugsnag вводить метрику Stability Score — відсоток сесій без помилок. Згідно з документацією Bugsnag, це ключовий показник здоров'я застосунку. Bugsnag у 2 рази швидше виявляє критичні регресії завдяки автоматичній пріоритизації. Також Bugsnag на 40% ефективніше групує помилки, ніж Sentry. Безкоштовний план включає 7 500 помилок на місяць на один проєкт ($0), а платні починаються від $29/міс.
| Критерій | Bugsnag | Sentry |
|---|---|---|
| Stability Score | Є | Немає |
| Групування помилок | Автоматичне | Автоматичне |
| Source maps | Вбудоване завантаження | Через плагін |
| Інтеграції | Slack, Jira, PagerDuty | Аналогічні |
| Ціна | Безкоштовний план доступний | Безкоштовний план доступний |
Як підвищити 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.
Приклад ручних breadcrumbs для React
Bugsnag.leaveBreadcrumb('User pressed checkout', { cartTotal: 129.99, currency: 'USD', }); Це допомагає відтворити точну послідовність дій користувача перед помилкою.
Що таке source maps та навіщо вони потрібні?
Source maps дозволяють декомпілювати мініфікований код назад у вихідний. Без них stack trace показує 10–20 рядків з bundle.js, що ускладнює налагодження. Завантаження source maps у Bugsnag дає читабельні стеки — 3–5 рядків вихідного TypeScript/React компонентів. Ми налаштовуємо автоматичне завантаження в CI, щоб кожен реліз супроводжувався актуальними картами.
Етапи налаштування та терміни
| Етап | Тривалість | Опис |
|---|---|---|
| Аналіз та конфігурація | 1–2 години | Визначення стеку, API-ключів, стадій |
| Встановлення SDK | 0,5–1 година | Підключення бібліотек для PHP та JS |
| Source maps та breadcrumbs | 1–2 години | Налаштування завантаження карт та ручних breadcrumbs |
| Інтеграція сповіщень | 0,5–1 година | Підключення Slack, PagerDuty та ін. |
| Тестування та деплой | 1 година | Перевірка роботи в staging, перехід у production |
Сповіщення та інтеграції
Bugsnag підтримує Slack, PagerDuty, Jira, GitHub Issues, GitLab Issues. Налаштування сповіщень дозволяє миттєво оповіщати команду про нові помилки, сплески та регресії. Наприклад, при падінні Stability Score нижче 98% спрацьовує alert в Slack. Ми підключаємо потрібні інтеграції в рамках налаштування.
Процес роботи
- Аналіз поточного стеку та вибір конфігурації.
- Встановлення та налаштування SDK (PHP/Laravel, JavaScript/React).
- Налаштування source maps та breadcrumbs для повного контексту.
- Інтеграція сповіщень (Slack, PagerDuty та ін.).
- Тестування та перемикання на production.
- Документування та передача знань.
Що входить у роботу
- Встановлення та конфігурація Bugsnag SDK для PHP та JavaScript.
- Налаштування source maps для читабельних stack trace.
- Кастомізація контексту помилок (користувач, метадані).
- Інтеграція з системами сповіщень (Slack, PagerDuty).
- Документація з експлуатації.
- Навчання команди роботі з дашбордом Bugsnag.
- Гарантія стабільної роботи моніторингу.
Терміни
Базове налаштування займає від 2 до 4 годин. Для складних проєктів з кастомними breadcrumbs та інтеграціями — до одного робочого дня. Вартість розраховується індивідуально.
Пропонуємо налаштування Bugsnag під ключ: від аналізу до деплою за 1 день. Оцінимо ваш проект безкоштовно. Пишіть!
Зв'яжіться з нами для консультації та замовлення налаштування Bugsnag під ваш проєкт. Отримайте прозорий моніторинг помилок вже сьогодні.