> Как обработать ошибки в React приложении (React, JavaScript)

Обработка ошибок в React-приложении строится на нескольких уровнях.

1. Error Boundaries (границы ошибок) Классовый компонент, который ловит ошибки в дочернем дереве во время рендеринга, в lifecycle-методах и в конструкторах. Используйте static getDerivedStateFromError() для обновления состояния и componentDidCatch() для логирования.

JSX
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.error(error, info);
  }
  render() {
    if (this.state.hasError) {
      return <h1>Что-то пошло не так.</h1>;
    }
    return this.props.children;
  }
}

2. Обработка асинхронных ошибок (сетевые запросы) Error Boundaries не ловят ошибки в асинхронном коде (например, в fetch или axios). Используйте try/catch внутри обработчиков событий или хуков:

JSX
const fetchData = async () => {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Ошибка загрузки');
    const data = await res.json();
    setData(data);
  } catch (err) {
    setError(err.message);
  }
};

3. Глобальная обработка (на уровне приложения) Для неперехваченных ошибок используйте window.onerror и обработчик rejected промисов (window.addEventListener('unhandledrejection', ...)). Это полезно для логирования в Sentry или аналогичные сервисы.

4. React Query / SWR (для данных) Библиотеки для работы с серверным состоянием предоставляют встроенные механизмы: isError, error, onError колбэки. Это упрощает обработку ошибок запросов без ручного try/catch.

5. UI-фидбек Показывайте пользователю понятные сообщения об ошибках (тосты, алерты, fallback UI). Не выводите технические детали в продакшене - логируйте их отдельно.

Важно: Error Boundaries не ловят ошибки в событиях (onClick, setTimeout), серверном рендеринге и самом Error Boundary. Для них используйте try/catch или глобальные обработчики.