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

Рассмотрим следующее приложение React, которое отображает компонент DisplayName , отображающий имя в соответствии с входными данными.

Компонент DisplayName просто отображает имя из переданного объекта имени.

Браузер отобразит что-то вроде этого.

Если возникнут какие-либо ошибки при рендеринге любого из компонентов, произойдет сбой всего приложения, а в производственной сборке будет отображаться пустая страница. Было бы трудно найти и отладить ошибку. Например, следующий код приведет к сбою приложения, поскольку реквизит name не передается одному из компонентов.

Внедрение границ ошибок

Границы ошибок работают как блок JavaScript catch {}, но для компонентов. Границы ошибок перехватывают ошибки во время рендеринга, в методах жизненного цикла и в конструкторах всего дерева под ними. Границы ошибок на самом деле являются компонентами класса, но будут иметь два метода жизненного цикла static getDerivedStateFromError и/или componentDidCatch(). Компоненты, подверженные ошибкам, могут передаваться как их дочерние элементы.

static getDerivedStateFromError() можно использовать для отображения резервного пользовательского интерфейса после возникновения ошибки, а componentDidCatch() можно использовать для регистрации информации об ошибках.

Как выглядит передача компонентов в качестве дочерних элементов ErrorBoundary

Браузер отобразит вывод как

Вместо сбоя всего приложения.

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

Где границы ошибок не будут работать в React

  • Обработчики событий
  • Асинхронный код (например, обратные вызовы setTimeout или requestAnimationFrame)
  • Рендеринг на стороне сервера
  • Ошибки, возникающие в самой границе ошибки (а не в ее дочерних элементах)

Как насчет обработчиков событий?

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

Если вам нужно поймать ошибку внутри обработчика событий, используйте обычный оператор JavaScript try/catch.