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

Question

Accepted Answer

Код выполняется на тысячах чужих устройств — без мониторинга вы узнаете об ошибках от пользователей. Нужны: сбор ошибок (Sentry и аналоги) с source maps, чтобы видеть исходный код, контекстом (браузер, маршрут, действия до ошибки) и группировкой; метрики реальных пользователей (Core Web Vitals, время загрузки); алерты на рост ошибок после выкатки; связь с версией сборки. Source maps загружают в систему мониторинга, но не раздают публично Глобальные обработчики: window.onerror, unhandledrejection, границы ошибок React Шум от расширений браузера и старых браузеров фильтруют Привязка ошибок к релизу позволяет быстро понять, какая выкатка всё сломала Что собирать: - необработанные исключения и отклонённые промисы; - ошибки сетевых запросов к API (коды, время); - ошибки рендеринга (границы ошибок); - хлебные крошки: клики, переходы, запросы перед ошибкой; - версия сборки, пользователь (без персональных данных), окружение. Практика: - алерт на рост новых ошибок в первые часы после выкатки; - еженедельный разбор топа ошибок; - сэмплирование трассировки производительности, чтобы не платить за всё; - маскирование персональных данных в отчётах.

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

Подробно

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

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

Подсказки на собеседовании — в реальном времени