Что такое границы ошибок

Границы ошибок были введены в React v16 как способ обнаружения сложных ошибок, возникающих на этапе рендеринга. В прошлом это привело бы к полному отключению приложения, и пользователь увидел бы пустую веб-страницу, что не идеально!

Вы можете узнать больше о Границах ошибок React с помощью фрагментов кода и интерактивных демонстраций.

Давайте начнем

В этой статье мы создадим реагирующее приложение с нуля и проведем вас через границы ошибок.

Предпосылки

Создать реагирующее приложение

Давайте создадим простое приложение для реагирования, используя следующую команду. Откройте терминал в каталоге вашего проекта и запустите эту команду.

npx create-react-app client

Давайте откроем файл нашего проекта с кодом Visual Studio.

cd client
code .

Ваше здоровье! На данный момент структура вашей папки может выглядеть примерно так.

Обнаружение ошибок без границ ошибки

Ожидается неожиданное. Мы неизбежно будем совершать неожиданные ошибки в наших приложениях при разработке, тестировании и даже в производстве. Возможно, вы пытаетесь пройтись по несуществующей ошибке или можете попытаться получить доступ к свойству вложенного объекта, которое в данный момент не заполнено. Большую часть времени вы контролируете поведение своего приложения, но иногда нет.

Смоделируйте ошибку

Давайте создадим имя файла BugDemo.js. Следующий фрагмент кода поможет вам понять, что обычно происходит без какой-либо границы ошибки в реагирующих приложениях.

Если вы импортируете компонент в файл App.js и запускаете приложение с помощью команды npm start или yarn start, вы можете увидеть экран ниже.

Когда мы постоянно нажимаем кнопку «плюс», значение счетчика кнопки компонента будет увеличиваться. Но что произойдет, когда значение счетчика достигнет 5?

Да! Мы видим пустой экран, который может удивить конечного пользователя. Иногда может произойти сбой всего приложения. Из-за этого очень важно использовать границы ошибок.

Решение проблемы с границами ошибок

Создайте новый файл в каталоге component/ и вставьте приведенный ниже код.

Теперь давайте обернем наш импортированный компонент BugDemo этой вновь созданной границей ошибки в App.js, вот так;

Момент истины

Давайте проверим, что теперь происходит, когда пользователь достигает значения счетчика 5. Пустых экранов больше нет.

Точно так же вы можете показать пользователю сообщение об ошибке или повторить задачу, которая раньше не удалась, если это возможно.

Заключение

С развитием React 16+ границы ошибок стали доступны для использования. Наиболее распространенным стандартом является использование по крайней мере одной границы ошибки в корне вашего приложения. Это улучшит взаимодействие с пользователем (UX) вашего приложения и предотвратит появление пустых или поврежденных страниц в вашем приложении.