Как обрабатываешь ошибки в React?

Обработка ошибок в React строится по слоям: ошибки рендера ловят Error Boundaries, ошибки данных — на уровне запросов, ошибки обработчиков — обычным try/catch.

Ошибки рендера: Error Boundaries

Исключение в рендере без границы ошибок размонтирует всё приложение (React 16+). Error Boundary — классовый компонент, перехватывающий ошибки своего поддерева:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error, info) { Sentry.captureException(error); }
  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

На практике — библиотека react-error-boundary (fallback-рендер, reset, onError). Границы ставят по смысловым зонам: вокруг маршрутов, независимых виджетов, чтобы падал виджет, а не страница.

Error Boundary НЕ ловит: ошибки в обработчиках событий, async-коде, SSR и в самой границе.

Ошибки запросов

• TanStack Query / RTK Query: у запроса есть isError/error — рендерим состояние ошибки, настраиваем retry; throwOnError пробрасывает ошибку в ближайший Error Boundary.
• Вручную: try/catch в эффекте + state { data, error, loading }.
• HTTP-слой: интерцепторы (axios) для общих случаев — 401 → логаут/refresh, 5xx → тост.

Ошибки в обработчиках и async-коде

Обычный try/catch с осмысленной реакцией: тост, откат оптимистичного обновления, повтор.

const handleSave = async () => {
  try { await api.save(draft); }
  catch (e) { toast.error('Не сохранилось'); report(e); }
};

Мониторинг

Sentry (или аналог) с интеграцией Error Boundary + window.onerror/unhandledrejection — ошибки пользователей должны быть видны команде.

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

Три слоя: Error Boundaries по зонам приложения для ошибок рендера (классовый компонент или react-error-boundary), состояния ошибок и retry на уровне запросов (React Query, интерцепторы), try/catch с UX-реакцией в обработчиках. Плюс отправка всего в мониторинг (Sentry).