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

Короткий ответ

Обработка ошибок в React строится на нескольких уровнях: error boundaries для классовых компонентов, try/catch в асинхронных операциях и обработчиках событий, глобальный перехват через window.onerror и unhandledrejection, а также логирование ошибок через сервисы типа Sentry. Для функциональных компонентов error boundaries реализуются через HOC или пользовательский хук. Важно разделять ошибки рендера, асинхронные ошибки и ошибки в эффектах.

Подробное объяснение

В React ошибки делятся на три категории: ошибки во время рендера (синхронные), ошибки в асинхронных операциях (fetch, setTimeout) и ошибки в обработчиках событий (onClick, onChange). Для каждой категории нужен свой подход.

Error boundaries - это классовые компоненты, которые ловят ошибки рендера в своем дочернем дереве. Они используют методы componentDidCatch и getDerivedStateFromError. Error boundaries не ловят ошибки в асинхронном коде, серверном рендеринге и собственных событиях.

Для асинхронных операций используется try/catch внутри async функций или .catch() у промисов. В функциональных компонентах можно создать хук useErrorHandler, который оборачивает логику в try/catch и передает ошибку в ближайший error boundary через throw.

Глобальный перехват через window.addEventListener('error') и window.addEventListener('unhandledrejection') нужен для логирования необработанных ошибок, но не для восстановления UI.

На практике

В продакшене типичная архитектура включает:

• корневой error boundary для всего приложения с fallback UI
• вложенные error boundaries для критических виджетов (чтобы падение одного не ломало всё)
• логирование ошибок в Sentry или аналоги
• для асинхронных запросов - централизованный обработчик ошибок в API-слое
• для React Query или SWR - встроенные механизмы retry и error handling

Важно не злоупотреблять error boundaries - они не должны заменять валидацию данных и корректную обработку состояний. Также стоит помнить, что error boundaries ловят только ошибки рендера, поэтому для асинхронных операций нужно явно пробрасывать ошибки в состояние.

Пример кода

JSX
// Error boundary компонент
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error, errorInfo);
    // Отправка в Sentry
    Sentry.captureException(error, { extra: errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <h1>Что-то пошло не так</h1>;
    }
    return this.props.children;
  }
}

// Хук для обработки асинхронных ошибок
function useAsyncError() {
  const [, setError] = useState(null);
  
  const handleAsyncError = useCallback(async (asyncFn) => {
    try {
      return await asyncFn();
    } catch (error) {
      setError(() => { throw error; });
    }
  }, []);

  return handleAsyncError;
}

// Использование
function UserProfile({ userId }) {
  const handleAsync = useAsyncError();
  const [user, setUser] = useState(null);

  useEffect(() => {
    handleAsync(async () => {
      const data = await fetchUser(userId);
      setUser(data);
    });
  }, [userId]);

  return <div>{user?.name}</div>;
}

// Глобальный перехват
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
  Sentry.captureException(event.reason);
});

Как отвечать на собеседовании

Начни с разделения типов ошибок и соответствующих механизмов. Упомяни error boundaries как основной инструмент для ошибок рендера, но сразу отметь их ограничения. Покажи понимание разницы между синхронными и асинхронными ошибками. Расскажи про практические паттерны: fallback UI, логирование, восстановление после ошибки. Если спросят про React 18 - упомяни, что error boundaries работают и с concurrent features, но требуют осторожности с Suspense.

Что проверяет интервьюер

• Понимание жизненного цикла React и механизма error boundaries
• Умение различать типы ошибок и выбирать правильный инструмент
• Знание ограничений error boundaries (асинхронный код, события)
• Практический опыт с мониторингом и логированием ошибок
• Понимание trade-off между изоляцией ошибок и сложностью кода

Типичные ошибки

• Попытка использовать error boundaries в функциональных компонентах напрямую (нужен HOC или класс)
• Ожидание, что error boundaries поймают ошибки в асинхронном коде
• Игнорирование глобального перехвата unhandledrejection
• Слишком много вложенных error boundaries, усложняющих отладку
• Отсутствие fallback UI или показ технической информации пользователю
• Неправильная обработка ошибок в useEffect без cleanup