Когда мы разрабатываем приложения, ошибки неизбежны. Лучше подготовить устройство защиты на случай ошибки, чем наивно утверждать, что ваше приложение невосприимчиво к ошибкам. При разработке на React JS границы ошибок могут быть созданы, чтобы уловить определенные ошибки и обработать их, чтобы не мешать работе пользователя.
Зачем делать границу ошибок?
Границы ошибок - это просто компоненты, которые созданы для обнаружения ошибок на основе компонентов, возникающих в их дочернем дереве, регистрации их для разработчика и отображения резервного пользовательского интерфейса с сохранением опыта.
Ошибки обнаруживаются в методах конструктора, рендеринга и жизненного цикла. Вместо того, чтобы отказываться от всего вашего приложения из-за ошибки. Ошибка обрабатывается путем размонтирования дерева в компоненте, при этом предоставляя доступ остальной части приложения. Очень похоже на то, как блок catch будет работать в Javascript: выполнить этот блок кода, однако, если возникает ошибка, вот план Б.
Как сделать границу ошибки?
Две вещи, которые делают границу ошибки границей ошибки, - это методы getDerivedStateFromError () и componentDidCatch ().
Метод жизненного цикла getDerivedStateFromError () устанавливает состояние компонента, основанное на ошибке. Это запускает повторную визуализацию компонента, но на этот раз показывает отказоустойчивость вместо сломанного дерева компонентов, вызвавшего ошибку. Этот метод обычно предназначен для визуальной обработки ошибки для пользователя.
Метод componentDidCatch () запускает выполнение определенного блока кода после обнаружения ошибки в любом месте дерева компонентов. Этот метод обычно предназначен для обработки ошибки в консоли разработчика.
Технически любой из этих двух методов жизненного цикла может быть включен в любой компонент и заявлен как граница ошибки. Однако, в соответствии с принципом единой ответственности, хорошей практикой было бы обозначить этот перехват ошибок и обработать один компонент, а не применять его в общих компонентах. Это также сделает их модульными компонентами, которые можно будет применять к различным деревьям компонентов.
Ниже показано, как React определяет структуру компонента границы ошибки.
Теперь вы можете разместить части вашего приложения, для которых вы хотите спланировать отказоустойчивость, в пределах границ вашей ошибки. Как и в демонстрации React, у вас может быть несколько деревьев границ ошибок, чтобы сохранить части вашего приложения, отключая только определенные сломанные части.
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>Как минимум, у вас должен быть хотя бы один в корне вашего приложения. Таким образом, если ошибка возникает из любого места в приложении, вы можете спланировать резервный пользовательский интерфейс для своего пользователя.
А как насчет других ошибок?
Обратите внимание, что компонент границы ошибки предназначен для обнаружения ошибок, связанных с компонентами. Он не будет обнаруживать ошибки внутри самого компонента границы ошибок, обработчиков событий, асинхронных обратных вызовов или рендеринга на стороне сервера.
Подобно тому, как React демонстрирует выдачу ошибки после того, как счетчик достигает 5, пользовательские ошибки можно смоделировать с помощью throw. Вы можете реализовать собственное условное выражение для выдачи ошибки, которая затем может быть перехвачена границами ошибок или другими обработчиками. В приведенном ниже примере ошибка будет иметь вид «team creamy pb.»
if (peanutButter.texture === "crunchy") throw "team creamy pb"
Помимо логики на основе компонентов и ошибок, использование блока try and catch будет делать нечто подобное для обработчиков событий или автономной логики.
try {
// do this block of code
} catch (error) {
// do this with the error recieved
}
Используя обработчики ошибок через компоненты React или простые блоки catch, пользовательский интерфейс остается управляемым независимо от того, какие ошибки возникают. Возможно даже веселее…
