Если вы какое-то время работали с React, вы могли столкнуться с сообщением, которое гласит: «Рассмотрите возможность добавления границы ошибки в ваше дерево, чтобы настроить поведение обработки ошибок». Возможно, вы видели это в консоли браузера всякий раз, когда ваши компоненты крушение.
React рекомендует использовать границу ошибки, чтобы обеспечить лучший пользовательский интерфейс при возникновении ошибки.
Что такое граничный класс ошибок в React?
Границы ошибок работают как блок try/catch в ванильном JavaScript. Разница в том, что они перехватывают ошибки, возникающие в компонентах React. Если в компоненте пользовательского интерфейса возникает ошибка, React размонтирует дерево внутри этого компонента и заменит его резервным пользовательским интерфейсом, который вы определили. Это означает, что ошибка влияет только на компонент, в котором она возникает, а остальная часть приложения работает должным образом.
Согласно Реагировать на документацию, граничные классы ошибок не перехватывают ошибки в:
- Обработчики событий.
- Асинхронный код.
- Серверный код.
- Ошибки возникают в самой границе ошибки (а не в ее дочерних элементах).
Для вышеуказанных ошибок вы можете использовать блок try/catch.
Например, чтобы отловить ошибку, возникающую в обработчик события, используйте следующий код:
функциякомпонент события() {
константа [ошибка, setError] = useState(нулевой)константа дескрипторклик = () => {
пытаться {
// Сделай что-нибудь
} ловить (ошибка) {
setError (ошибка)
}
}
возвращаться (
<>
<див>{ошибка? ошибка: ""}див>
<кнопкапо щелчку={handleClick}>Кнопкакнопка>
)
}
Используйте границы ошибок, чтобы перехватывать ошибки только в компонентах React.
Создание граничного класса ошибок
Вы можете создать границу ошибки, определив класс, который содержит один или оба следующих метода:
- статический getDerivedStateFromError()
- компонентДидКэтч()
Функция getDerivedStateFromError() обновляет состояние компонента после обнаружения ошибки, в то время как вы можете использовать componentDidCatch() для регистрации информации об ошибке на консоли. Вы также можете отправить ошибки в службу отчетов об ошибках.
Ниже приведен пример, показывающий, как создать простой граничный класс ошибок.
сортErrorBoundaryрасширяетРеагировать.Компонент{
конструктор(реквизит) {
супер(реквизит);
этот.состояние = { ошибка: ЛОЖЬ };
}статическийполучитьдериведстатефромеррор(ошибка){
// Обновить состояние, чтобы при следующем рендеринге отображался резервный пользовательский интерфейс.
возвращаться { ошибка: ошибка };
}componentDidCatch (ошибка, errorInfo) {
// Зарегистрировать ошибку в службе отчетов об ошибках
}оказывать() {
если (этот.состояние.ошибка) {
// Здесь создайте собственный резервный пользовательский интерфейс
возвращаться<h1>Кажется, есть проблема.h1>;
}
возвращатьсяэтот.реквизиты.дети;
}
}
экспортпо умолчанию Граница ошибки;
При возникновении ошибки getDerivedStateFromError() обновит состояние и, следовательно, вызовет повторную визуализацию, которая отобразит резервный пользовательский интерфейс.
Если вы не хотите создавать граничный класс ошибок с нуля, используйте Пакет NPM с границей реакции на ошибку. Этот пакет предоставляет компонент ErrorBoundary, который охватывает компоненты, которые, по вашему мнению, могут вызывать ошибки.
Использование граничного класса ошибки
Для обработки ошибок оберните компоненты компонентом класса границы ошибок. Вы можете обернуть компонент верхнего уровня или отдельные компоненты.
Если вы обернете компонент верхнего уровня, класс границы ошибок будет обрабатывать ошибки, выдаваемые всеми компонентами в приложении React.
<ErrorBoundary>
<Приложение/>
ErrorBoundary>
Если вы обернете отдельный компонент ErrorBoundary, ошибка в этом компоненте не повлияет на отрисовку другого компонента.
<ErrorBoundary>
<Профиль/>
ErrorBoundary>
Например, ошибка в компоненте профиля не повлияет на отрисовку другого компонента, такого как компонент Hero. Хотя компонент профиля может дать сбой, остальная часть приложения будет работать нормально. Это намного лучше, чем рендеринг общего белого резервного экрана, предоставляемого React.
Обработка ошибок в JavaScript
Ошибки программирования могут разочаровать разработчиков и пользователей. Неспособность обрабатывать ошибки может привести к тому, что ваши пользователи увидят уродливый пользовательский интерфейс с трудными для понимания сообщениями об ошибках.
При создании компонента React создайте класс границы ошибки либо с нуля, либо с помощью пакета react-error-boundary для отображения удобных для пользователя сообщений об ошибках.
