Как устроена обработка ошибок в React?

Что такое Error Boundary?

Error Boundary — это React-компонент, который перехватывает ошибки JavaScript в любом месте дочернего дерева компонентов, логирует их и отображает запасной интерфейс вместо упавшего компонента. Это аналог try/catch для React-дерева.

Как создать Error Boundary?

Error Boundary создается с помощью методов жизненного цикла static getDerivedStateFromError() и componentDidCatch(). Первый обновляет состояние для отображения fallback UI, второй — для логирования ошибки.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Где Error Boundaries не работают?

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

Современный подход

С React 16+ Error Boundaries — стандартный способ. Для функциональных компонентов нет прямого аналога, но можно использовать библиотеки типа react-error-boundary.

Вывод: Error Boundaries обязательны для production-приложений, чтобы предотвратить полное падение UI и улучшить пользовательский опыт. Для асинхронных операций и событий используйте try/catch или библиотеки-обертки.