Error Boundary — перехват ошибок рендера

Задача

Реализовать Error Boundary — компонент, который перехватывает ошибки рендера в дочернем дереве и показывает запасной UI вместо «белого экрана». Объяснить, почему это только class-компонент.

Пример

<ErrorBoundary fallback={<p>Что-то пошло не так</p>}>
    <BuggyComponent />
</ErrorBoundary>

Решение

Оптимальное решение

class ErrorBoundary extends React.Component {
    state = { hasError: false };
 
    // 1) вызывается при ошибке в потомке → обновляем state для рендера fallback
    static getDerivedStateFromError(error) {
        return { hasError: true };
    }
 
    // 2) сайд-эффект: логирование в сервис мониторинга
    componentDidCatch(error, info) {
        console.error('Caught:', error, info.componentStack);
        // logErrorToService(error, info);
    }
 
    render() {
        if (this.state.hasError) {
            return this.props.fallback;
        }
        return this.props.children;
    }
}

Почему только class-компонент

Механизм границы ошибок завязан на два метода жизненного цикла: static getDerivedStateFromError (рендер fallback) и componentDidCatch (сайд-эффект). У хуков нет эквивалентов этих методов, поэтому функциональный компонент не может быть Error Boundary. На практике используют готовый пакет react-error-boundary или пишут один class-компонент и переиспользуют его.

Что Error Boundary НЕ ловит

• ошибки в обработчиках событий (там обычный try/catch);
• ошибки в асинхронном коде (setTimeout, промисы);
• ошибки в SSR;
• ошибки в самом Error Boundary (их ловит граница уровнем выше).

См. также

• fix-useeffect-deps
• implement-use-fetch