Проверяет опыт работы с обработкой ошибок в React.
componentDidCatch — это метод класса React для перехвата ошибок в дочерних компонентах. Он используется в Error Boundaries (границах ошибок), чтобы показать запасной UI вместо падения всего приложения.
componentDidCatch — это метод класса React для перехвата ошибок в дочерних компонентах. Он используется в Error Boundaries (границах ошибок), чтобы показать запасной UI вместо падения всего приложения.
Где применяется:
Только в классовых компонентах (в функциональных аналога — пока нет).
Не ловит ошибки в обработчиках событий, асинхронном коде (например, setTimeout) или SSR.
Пример:
class ErrorBoundary extends React.Component {
state = { hasError: false };
componentDidCatch(error, errorInfo) {
this.setState({ hasError: true });
console.error("Ошибка:", error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Что-то пошло не так.</h1>;
}
return this.props.children;
}
}
// Использование:
<ErrorBoundary>
<BuggyComponent />
</ErrorBoundary>Пока React не поддерживает componentDidCatch в хуках, можно:
Использовать библиотеки типа react-error-boundary.
Обернуть код в try/catch для синхронных операций.
Практическое применение:
Показ пользователю сообщения об ошибке вместо "белого экрана".
Отправка логов ошибок на сервер (например, в Sentry).