Методы обработки ошибок в React
React предоставляет два ключевых метода жизненного цикла для обработки ошибок, которые происходят во время рендера, в методах жизненного цикла или в конструкторах дочерних компонентов.
Static getDerivedStateFromError()
- Вызывается во время фазы рендера жизненного цикла компонента
- Используется для обновления state на основе выброшенной ошибки
- Должен быть статическим методом, который возвращает объект для обновления state
- Позволяет отображать fallback UI, когда ошибка поймана
- Не имеет доступа к экземпляру компонента
Пример:
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch()
- Вызывается во время фазы commit после того, как ошибка была поймана
- Используется для побочных эффектов, таких как логирование ошибок в сервисы
- Получает два параметра: ошибку и информацию об ошибке
- Имеет доступ к экземпляру компонента (использует
this)
- Полезен для отправки ошибок во внешние инструменты мониторинга
Пример:
componentDidCatch(error, errorInfo) {
logErrorToService(error, errorInfo);
}
Ключевые различия
getDerivedStateFromError() обновляет state UIcomponentDidCatch() обрабатывает побочные эффекты и логирование- Оба метода работают вместе в Error Boundaries для полноценной обработки ошибок
- Error Boundaries должны быть классовыми компонентами, а не функциональными
Когда эти методы вызываются
Эти методы срабатывают, когда ошибки происходят в:
- Методах рендера компонента
- Методах жизненного цикла
- Конструкторах дочерних компонентов
- Обработчиках событий (при правильной обработке ошибок)