Ошибки встречаются довольно часто при разработке любого приложения. И ваша задача как разработчика - гарантировать, что ни один из них не будет запущен в производство. Но это не всегда возможно. Независимо от того, сколько часов вы потратите на отладку и тестирование, ошибки неизбежны. Поэтому лучшее, что вы можете сделать, - это убедиться, что при возникновении ошибки взаимодействие с пользователем будет минимальным.

Хотя компоненты React try-catchмогут использоваться для обработки ошибок в imperativeкоде, они declarativeпо своей природе. А до React 16 не было правильных способов изящно обрабатывать ошибки внутри них.

Error Boundaries были введены в React 16, которые позволяют выявлять ошибки внутри компонента React и всех его дочерних элементов во время рендеринга и должным образом обрабатывать их с помощью методов жизненного цикла, таких как отображение резервного пользовательского интерфейса, регистрация ошибки и т. д.

Как их использовать?

Компонент класса можно сделать границей ошибки, если он реализует один или оба этих метода.

getDerivedStateFromError() : Статический метод жизненного цикла, который можно использовать для обновления состояния в границах ошибок, чтобы в следующем цикле рендеринга ошибка подтверждалась и вместо этого отображался резервный пользовательский интерфейс.

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

Чтобы использовать границу ошибки на компоненте, просто оберните этот компонент ею, и вуаля! Любая ошибка, возникающая в нем или в его дочерних элементах, будет обработана.

Ограничения границ ошибок -

• Это может быть реализовано только в компонентах класса.
• Он не может отловить ошибки в асинхронном коде и обработчиках событий.
• Он может обнаруживать ошибки в дочерних элементах границы ошибки, но не в самой границе ошибки.

Есть несколько способов использовать эти границы ошибок в приложении. Вот несколько распространенных -

1. Границы глобальных ошибок

2. Границы ошибок на уровне страницы

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

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

3. Границы ошибок на уровне компонентов

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

Если данные, с которыми они имеют дело, не так важны, вы можете полностью скрыть этот компонент, если произойдет ошибка, чтобы поддерживать чистый пользовательский интерфейс.

Какой из этих 3 работает лучше всего?

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

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

Подведение итогов

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

Итак, теперь, когда вы немного узнали о границах ошибок, дайте мне знать в комментариях, как вы подойдете к этой проблеме? :)