Статья подготовлена для студентов курса «ReactJS/React Native-разработчик» в образовательном проекте OTUS.
В React 16 появилась замечательная вещь, которая называется границы ошибок. Из названия ясно, что речь про компоненты, «отлавливающие» ошибки в дочерних компонентах. Сама идея довольно проста и очень полезна.
Технически всё работает весьма просто: вы создаёте компонент и используете его в качестве родителя каждый раз, когда нужно обработать ошибки. И если в каком-нибудь из дочерних компонентов ошибка обнаружится, для её обработки будут вызваны границы ошибок.
Следует лишь учесть, что границы ошибок определяют только ошибки отображения. То есть императивные ошибки вроде тех, которые возникают в обработчиках событий, нужно отлавливать блоком try/catch.
Для логирования информации об ошибках используется componentDidCatch():
И теперь его можно использовать в качестве обычного компонента:
Правда, если непосредственно в компоненте ErrorBoundary появится ошибка, он её обработать не сможет.
Похожая функция была в React 15 и называлась unstable_handleError(). Теперь данный метод уже не работает, поэтому, начиная с 16-й версии, надо использовать componentDidCatch().
11 сентября состоится открытый вебинар «Знакомство с React.Native».
На открытом вебинаре мы:
- познакомимся с React.Native, узнаем, в каких случаях стоит использовать React.Native, в каких не стоит;
- посмотрим, как React.Native работает на практике - разработаем небольшое мобильное приложение с формой регистрации авторизации;
- рассмотрим базовые компоненты, научимся их стилизовать;
- познакомимся с навигаторами и научимся делать роутинг между страницами.
Преподаватель: Андрей Поляков – ведущий мобильный разработчик в РокетБанк.
ЗАПИСАТЬСЯ