Вопрос с собеседования · Frontend

Как мониторить ошибки и производительность фронтенда в продакшене?

MiddleВыкатка и эксплуатация
Ещё спрашивают так:
  • Зачем фронтенду Sentry?
  • Как узнать, что у пользователей сломалась страница?
Коротко

Код выполняется на тысячах чужих устройств — без мониторинга вы узнаете об ошибках от пользователей. Нужны: сбор ошибок (Sentry и аналоги) с source maps, чтобы видеть исходный код, контекстом (браузер, маршрут, действия до ошибки) и группировкой; метрики реальных пользователей (Core Web Vitals, время загрузки); алерты на рост ошибок после выкатки; связь с версией сборки.

  • Source maps загружают в систему мониторинга, но не раздают публично
  • Глобальные обработчики: window.onerror, unhandledrejection, границы ошибок React
  • Шум от расширений браузера и старых браузеров фильтруют

А ещё Привязка ошибок к релизу позволяет быстро понять, какая выкатка всё сломала

Подробно

Что собирать:

  • необработанные исключения и отклонённые промисы;
  • ошибки сетевых запросов к API (коды, время);
  • ошибки рендеринга (границы ошибок);
  • хлебные крошки: клики, переходы, запросы перед ошибкой;
  • версия сборки, пользователь (без персональных данных), окружение.

Практика:

  • алерт на рост новых ошибок в первые часы после выкатки;
  • еженедельный разбор топа ошибок;
  • сэмплирование трассировки производительности, чтобы не платить за всё;
  • маскирование персональных данных в отчётах.

Что хотят услышать

  • Сбор ошибок с source maps и контекстом.
  • Метрики реальных пользователей.
  • Привязка к релизам и алерты.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Мониторинг фронтенда — это только Lighthouse перед релизом
  • ✗Source maps не нужны для разбора ошибок
  • ✓Сбор ошибок с source maps и контекстом, метрики реальных пользователей и алерты
  • ✗Достаточно логов сервера — ошибки браузера туда попадут сами вместе со стеком и контекстом

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования