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

Что такое source maps и зачем они нужны?

Source maps позволяют декомпилировать минифицированный код обратно в исходный. Без них stack trace показывает 10–20 строк из bundle.js, что усложняет отладку. Загрузка source maps в Bugsnag даёт читаемые стеки — 3–5 строк исходного TypeScript/React компонентов. Мы настраиваем автоматическую загрузку в CI, чтобы каждый релиз сопровождался актуальными картами.

Этапы настройки и сроки

Закажите настройку сегодня — и начните отслеживать ошибки в production.

Уведомления и интеграции

Bugsnag поддерживает Slack, PagerDuty, Jira, GitHub Issues, GitLab Issues. Настройка уведомлений позволяет мгновенно оповещать команду о новых ошибках, всплесках и регрессиях. Например, при падении Stability Score ниже 98% срабатывает alert в Slack. Мы подключаем нужные интеграции в рамках настройки. Получите консультацию по настройке Bugsnag — оставьте заявку на сайте.

Процесс работы

1. Анализ текущего стека и выбор конфигурации.
2. Установка и настройка SDK (PHP/Laravel, JavaScript/React).
3. Настройка source maps и breadcrumbs для полного контекста.
4. Интеграция уведомлений (Slack, PagerDuty и др.).
5. Тестирование и переключение на production.
6. Документирование и передача знаний.

Что входит в работу

• Установка и конфигурация Bugsnag SDK для PHP и JavaScript.
• Настройка source maps для читаемых stack trace.
• Кастомизация контекста ошибок (пользователь, метаданные).
• Интеграция с системами уведомлений (Slack, PagerDuty).
• Документация по эксплуатации.
• Обучение команды работе с дашбордом Bugsnag.
• Гарантия стабильной работы мониторинга.

Сроки

Базовая настройка занимает от 2 до 4 часов. Для сложных проектов с кастомными breadcrumbs и интеграциями — до одного рабочего дня. Стоимость рассчитывается индивидуально.

Свяжитесь с нами для консультации и заказа настройки Bugsnag под ваш проект. Получите прозрачный мониторинг ошибок уже сегодня.

Настройка веб-аналитики: GA4, GTM, Яндекс.Метрика и Amplitude

Мы часто видим: конверсия 1.2 %, трафик растёт, а конверсия стоит. Маркетолог смотрит в Google Analytics и говорит: «пользователи уходят с шага 2 оформления заказа». Разработчик открывает тот же шаг — ошибок нет, в Sentry тишина. Значит, дело не в JS-баге, а в UX или в кривых данных, которые показывает аналитика. Аналитика ломается незаметно: событие перестало трекаться после редеплоя — никто не заметил; GTM-тег стреляет дважды — данные задвоились; фильтр GA4 исключает бота, который на самом деле — реальный трафик с корпоративного прокси. Закажите аудит текущих тегов — мы найдём причину за неделю.

После правильной настройки экономия рекламного бюджета может достигать 150 000 ₽ в месяц — это реальный кейс интернет-магазина с 50 000 сессий в день, где дедупликация purchase вернула 20 % неверно приписанных конверсий.

Почему события GA4 дублируются и как это исправить?

Universal Analytics закрыт, его место заняла событийная модель GA4. В ней нет фиксированных хитов страниц и транзакций — только события с параметрами. Это гибче, но требует правильного дизайна событий.

Автоматические события GA4 собирает сам: page_view, scroll, click, session_start. Рекомендуемые события нужно реализовать самостоятельно: purchase, add_to_cart, begin_checkout, view_item. Google ожидает конкретную схему параметров — если передать product_id вместо item_id, данные попадут в GA4, но не в стандартные отчёты e-commerce. Кастомные события для специфики проекта: filter_applied, video_progress, form_step_completed. Кастомные параметры необходимо зарегистрировать в GA4 Admin → Custom definitions, иначе они не будут доступны в отчётах.

Частая ошибка — событие purchase с дублями. Причина: тег срабатывает на странице /thank-you, пользователь обновляет страницу — второй purchase уходит в GA4. Решение: на бэкенде генерируем уникальный transaction_id и передаём в событие. GA4 de-duplicates по нему (в теории — проверяйте через DebugView). Правильная атрибуция экономит до 20 % рекламного бюджета, который раньше уходил на неверно приписанные конверсии.

Как настроить data layer, чтобы не потерять данные?

GTM — инструмент для управления тегами без деплоя кода. Но «без кода» не значит «без архитектуры». Data Layer — основа всего. Передаём данные из приложения в GTM через dataLayer.push(). Структура: event + контекстные данные. Для e-commerce: перед открытием страницы продукта — push с данными товара. GTM-тег читает из dataLayer, не из DOM.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Название товара',
      price: 1990.00,
      currency: 'RUB'
    }]
  }
});

Плохая практика: GTM-тег парсит DOM — ищет цену в span.price, название в h1. Это ломается при любом изменении верстки. Хорошая практика: всегда dataLayer. Используем Preview Mode для отладки и GTM Server-Side для чувствительных данных — отправка с сервера, не с браузера, обходит блокировщики рекламы, не теряет данные.

Как Яндекс.Метрика дополняет веб-аналитику?

Для российской аудитории Метрика обязательна — особенно Вебвизор. Запись сессии пользователя, который бросил корзину, часто даёт ответ быстрее, чем неделя анализа воронки. Цели в Метрике: событийные (через ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) или автоматические (клик по кнопке, посещение страницы). Связка с CRM через Метрика Плюс — передача офлайн-конверсий. Наш опыт: в 8 из 10 проектов после настройки Метрики находили скрытые баги в UX, которые не показывали другие системы.

Что даёт product analytics в Amplitude?

Amplitude — продуктовый инструмент, в отличие от маркетинговых GA4 и Метрики. Он заточен под анализ поведения пользователей внутри продукта: воронки, ретеншн, user paths. Amplitude подходит для SaaS-продуктов, мобильных приложений и любых сервисов с зарегистрированными пользователями, где важно понять, как проходят онбординг, на каком шаге уходят, какие фичи используют чаще. Ключевые концепции: identify (связать анонимного пользователя с userId после авторизации), group (аккаунт в B2B SaaS), когорты для удержания. Amplitude Chart — воронка шагов за последние 30 дней с разбивкой по источнику.

Мониторинг качества данных

Аналитика без мониторинга — чёрный ящик. Настраиваем:

• GA4 Realtime — проверяем после каждого деплоя, что ключевые события приходят
• Alerting в GA4 — аномалия в количестве событий purchase (резкое падение = что-то сломалось)
• GTM Preview в staging-окружении перед продакшеном
• Ручные тесты воронок раз в неделю — просто пройти путь покупателя и проверить, что всё трекается

Что проверяем после каждого деплоя

• Все ли рекомендуемые события присутствуют в DebugView
• Нет ли задвоений (считаем количество purchase на 100 сессий)
• Не изменилась ли структура dataLayer после обновления фронтенда

Что входит в работу

Процесс и сроки

1. Аудит текущих тегов и данных (2 дня)
2. Дизайн событийной схемы (2 дня)
3. Разработка Data Layer и настройка тегов (3–5 дней)
4. QA в Preview Mode и на staging (2 дня)
5. Деплой и настройка дашбордов (1 день)

Стоимость рассчитывается индивидуально. Получите консультацию по настройке веб-аналитики для вашего проекта — мы оценим объём работ за один день. Свяжитесь с нами, чтобы начать.

Wikipedia: Веб-аналитика — подробнее о методах и метриках. Официальная документация по событийной модели GA4 доступна в Google Analytics 4.