Границы ошибок в React | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
iOS Developer. Professional
-8%
Базы данных
-12%
Agile Project Manager
-5%
Python Developer. Basic
-10%
Java Developer. Professional
-7%
JavaScript Developer. Professional
-3%
MS SQL Server Developer
-8%
Scala-разработчик
-8%
Java Developer. Basic
-8%
Алгоритмы и структуры данных
-9%
Разработчик IoT
-13%
PostgreSQL
-8%
Подготовка к сертификации Oracle Java Programmer (OCAJP) Python Developer. Professional Golang Developer. Professional Разработчик программных роботов (RPA) на базе UiPath и PIX Unity Game Developer. Basic Разработчик голосовых ассистентов и чат-ботов C# ASP.NET Core разработчик VOIP инженер NoSQL Flutter Mobile Developer Супер - интенсив по Kubernetes iOS Developer. Basic Супер-интенсив «СУБД в высоконагруженных системах» Супер-интенсив "Tarantool"
Инфраструктура
Базы данных
-12%
Network engineer. Basic
-10%
Network engineer
-4%
Инфраструктурная платформа на основе Kubernetes
-6%
Экспресс-курс по управлению миграциями (DBVC)
-10%
Экспресс-курс «Введение в непрерывную поставку на базе Docker»
-10%
Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes»
-30%
Дизайн сетей ЦОД
-13%
PostgreSQL
-8%
DevOps практики и инструменты Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов VOIP инженер Супер-практикум по работе с протоколом BGP NoSQL Супер-практикум по использованию и настройке GIT Супер-интенсив «СУБД в высоконагруженных системах» Экспресс-курс «IaC Ansible»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Границы ошибок в React

React_deep_9.9-5020-956dd2.png

В React 16 появилась замечательная вещь, которая называется границы ошибок. Из названия ясно, что речь про компоненты, «отлавливающие» ошибки в дочерних компонентах. Сама идея довольно проста и очень полезна.

Технически всё работает весьма просто: вы создаёте компонент и используете его в качестве родителя каждый раз, когда нужно обработать ошибки. И если в каком-нибудь из дочерних компонентов ошибка обнаружится, для её обработки будут вызваны границы ошибок.

Следует лишь учесть, что границы ошибок определяют только ошибки отображения. То есть императивные ошибки вроде тех, которые возникают в обработчиках событий, нужно отлавливать блоком try/catch.

Для логирования информации об ошибках используется componentDidCatch():

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    static getDerivedStateFromError(error) {
        // Обновляем состояние, чтобы следующее отображение
        // показало интерфейс на случай ошибок
        return { hasError: true };
     }
    componentDidCatch(error, info) {
        // Также можно залогировать ошибку
        logErrorToMyService(error, info);
    }
    render() {
        if (this.state.hasError) {
            // Можно отобразить любой интерфейс на случай ошибок
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children; 
    }   
}

И теперь его можно использовать в качестве обычного компонента:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Правда, если непосредственно в компоненте ErrorBoundary появится ошибка, он её обработать не сможет.

Похожая функция была в React 15 и называлась unstable_handleError(). Теперь данный метод уже не работает, поэтому, начиная с 16-й версии, надо использовать componentDidCatch().

Источник

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться