Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про React: ошибки

Использовал ли didCatch в React?

Проверяет опыт работы с обработкой ошибок в 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).

Уровень

  • Рейтинг:

    3

  • Сложность:

    5

Навыки

  • React

    React

Ключевые слова

#ошибки

Подпишись на React Developer в телеграм