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

Курсы

Программирование
iOS Developer. Professional Kotlin Backend Developer Flutter Mobile Developer Symfony Framework C++ Developer. Basic Unity Game Developer. Basic Java Developer. Professional
-35%
Highload Architect Unity Game Developer. Professional React.js Developer Специализация Java-разработчик
-25%
Алгоритмы и структуры данных
-16%
Scala-разработчик C# Developer. Professional
-23%
Разработчик голосовых ассистентов и чат-ботов Team Lead Архитектура и шаблоны проектирования NoSQL Web-разработчик на Python Golang Developer. Professional PostgreSQL Vue.js разработчик Супер-практикум по использованию и настройке GIT Разработчик IoT Подготовка к сертификации Oracle Java Programmer (OCAJP) Программист С HTML/CSS
Инфраструктура
Инфраструктурная платформа на основе Kubernetes Microservice Architecture Базы данных Highload Architect Reverse-Engineering. Professional
-8%
Network engineer. Basic Administrator Linux.Basic MongoDB Infrastructure as a code MS SQL Server Developer Cloud Solution Architecture Мониторинг и логирование: Zabbix, Prometheus, ELK Супер-практикум по использованию и настройке GIT Разработчик IoT Экcпресс-курс «ELK» Супер-интенсив "Tarantool" Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes» Экспресс-курс «Введение в непрерывную поставку на базе Docker»
Корпоративные курсы
Безопасность веб-приложений Экосистема Hadoop, Spark, Hive Пентест. Практика тестирования на проникновение Node.js Developer Java QA Engineer. Basic
-18%
Reverse-Engineering. Professional
-8%
DevOps практики и инструменты NoSQL Reverse-Engineering. Basic Cloud Solution Architecture Внедрение и работа в DevSecOps Супер-практикум по работе с протоколом BGP Game QA Engineer Супер - интенсив по Kubernetes Дизайн сетей ЦОД Экспресс-курс «IaC Ansible» Экспресс-курс по управлению миграциями (DBVC) Экспресс-курс "Версионирование и командная работа с помощью Git" Основы Windows Server
Специализации Курсы в разработке Подготовительные курсы Подписка
+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 комментариев
Для комментирования необходимо авторизоваться