Не позволяйте вашему приложению больше зависать!

Обработка ошибок — это проблема, с которой сталкивается каждый разработчик. Фронтенд, бэкенд, мы всегда будем сталкиваться с фатальным сбоем!

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

Попробуйте/поймать в React

Поскольку компонент React — это всего лишь некоторый код javascript, возвращающий некоторый HTML (JSX). Там можно поставить try/catch.

Теперь, если мы используем этот компонент и установим shouldError в true. Все приложение будет резко падать.

Мы абсолютно хотим этого избежать.

Один из способов — поместить проблемный код в try/catch.

Это прекрасно работает, и вы увидите это в своем пользовательском интерфейсеsomething bad happened, но, к сожалению, это шаблон.

Другой метод дан командой React в их документации.

Однако здесь используется компонент класса, и нам это не нравится в 2023 году!

Документация React также содержит стороннюю библиотеку: react-error-boundary, которая все еще поддерживается по состоянию на август 2023 года!



Этот пакет очень прост в использовании. Просто оберните свой потенциально ошибочный компонент внутри компонента <ReactErrorBoundary> и укажите резервный компонент, используя свойство fallback.