PassFront
  1. PassFront
  2. База знаний
  3. Ошибки и отладка

Сравни способы отслеживания и обработки ошибок и объясни, когда выбирать каждый вариант.

Ошибки и отладка

Ошибки отслеживают и обрабатывают через `try/catch` (синхронно и с async/await), `.catch()` у промисов, глобальные обработчики, Error Boundary в React и сервисы мониторинга. Выбор зависит от контекста.

Способы обработки

try/catch (синхронно и async/await)

try {
  const data = await fetchData();
} catch (e) {
  handleError(e);
}

Для синхронного кода и await.

.catch() у промисов

fetchData().then(process).catch(handleError);

Для промис-цепочек.

Глобальные обработчики

window.addEventListener('error', handler);              // синхронные ошибки
window.addEventListener('unhandledrejection', handler); // необработанные промисы

Ловят то, что упустили; хорошо для логирования.

React Error Boundary

Компонент, ловящий ошибки рендера дочерних и показывающий запасной UI (не ловит асинхронные/обработчики).

Сервисы мониторинга

Sentry и подобные — сбор ошибок в проде с контекстом и стектрейсами.

Как выбирать

  • Локальная обработка запроса → try/catch / .catch.
  • Ошибки рендера React → Error Boundary.
  • Ловля всего необработанного, логи → глобальные обработчики.
  • Прод-мониторинг → Sentry.

Хорошие практики

  • Не «глотать» ошибки молча.
  • Различать ожидаемые (валидация) и неожиданные.
  • Показывать пользователю понятное сообщение, логировать детали.

Коротко для собеседования

Обработка ошибок: try/catch (sync и async/await), .catch() (промисы), глобальные error/unhandledrejection (ловля необработанного, логи), React Error Boundary (ошибки рендера), Sentry (прод-мониторинг). Не глотать ошибки, показывать понятное сообщение, логировать детали.

Другие вопросы раздела