Граница ошибки — это новая функция React 16. Эта функция введена для обработки ошибки резервного копирования пользовательского интерфейса. >try..catch для обработки ошибки.
В случае возникновения ошибки все приложение вылетает из строя, а в браузере отображается белое пустое окно или экран. Error Boundary добавляется для реагирования на жизненный цикл рендеринга компонента, и он будет обнаруживать ошибки и генерировать информацию об ошибках, поэтому мы можем использовать его для создания службы отчетов об ошибках для нашего приложения.
Границы ошибок не перехватывают ошибки для обработчиков событий, асинхронного кода (например, обратных вызовов setTimeout или requestAnimationFrame), рендеринга на стороне сервера и ошибок, возникающих в самой границе ошибки.
Как работает Error Boundary в жизненном цикле реактивного компонента
В реакции компонент класса становится ошибкой, если разработчик использует эти два метода с именами static getDerivedStateFromError() или componentDidCatch() . Также разработчик может использовать обе функции вместе, чтобы реализовать ограничение ошибки в реагирующем компоненте.
static getDerivedStateFromError()использовать для обработки отката пользовательского интерфейса после возникновения ошибки.componentDidCatch()может использовать для регистрации или отображенияerrorинформацию.
Или разработчик может использовать только метод componentDidCatch() для обработки резервного варианта пользовательского интерфейса и регистрации или создания отчетов об ошибках для приложения.
Реализовать простую границу ошибки в компоненте React
- Установите пакет
create-react-appnpm, если этот пакет недоступен локально на вашем компьютере.
> npm install -g create-react-app
2. Создайте проект с именем react-error-handling из командной строки и перейдите в эту папку.
> create-react-app react-error-handling > cd react-error-handling
3. Создайте папку с именем components в папке src в приложении react-error-handling.
4. Создайте файл в src/components/Home.js, который содержит пример кода для обработки ошибок.
In line 3...10, I add the constructor and call the super(props), which will give access to use state for react component.
hasError: This state will use for handle error block in render function, to make change hasError state value to true in getDerivedStateFromError() function in line 12...14 which will execute after execption occured. which is then use in render()
function to check error in line 21...23.
In line 16...19,
componentDidCatch(error, info) function, which return error and info during error or execption happen.
we can also change the state of hasError in this function.(e.g: this.setState({
hasError: true
});
so we do not need to use getDerivedStateFormError()
function to change hasError state.
Error Boundary works with chield component. those two function should be declare in HOC (Higher Order Component)
In line 40...44, for testing purpose,I added the chield component named <TestElement/>, which is then use for testing Error bounday in <Home /> component.
In line 42, using the function named toString() with props.name attribute. which is then create execptions if props.name is undefined.
5. Скопируйте и вставьте приведенный ниже код в App.js путиsrc/App.js вашего приложения.
In line 2, Import the Home component to App component Then In line 9, Add the Home Component to App component as chield.
6. Затем перейдите к terminal или cmd и выполните эту команду ниже
> npm start
На самом деле
create-react-appимеет встроенную систему отчетов об ошибках. На этапеdevelopmentграница ошибок и отчеты об ошибках отображаются во время выполнения. Но в производственной сборке отображается только граница ошибки, если произошла какая-либо ошибка.
После выполнения команды In react-creact-app перекрывает выходные данные error-bounday собственным макетом отчетов об ошибках.
Нажмите крестообразную кнопку, чтобы удалитьcreate-react-app макет отчетов по умолчанию. показывает фактический результат Error Boundary на рисунке ниже.
Если вы используете только react js без пакета using
create-react-appnpm или есть шаблон без инструментов отчетов об ошибках . Вы можете получить последний вывод непосредственно при запуске командыnpm start.
Если вы хотите видеть только отчеты об ошибках, вам нужно создать производственную сборку для create-react-app , которая автоматически удалит макет отчетов об ошибках из приложения, показывает только Error Bounday .
- Сначала вам нужно установить пакет
servenpm для запуска вывода рабочей сборки в браузер.
> npm install -g serve
2. Затем создайте производственную сборку с помощью npm или yarn.
> npm run build or > yarn build
3. Чтобы показать производственную сборку в браузере, выполните следующую команду:
> server -s build
Откройте браузер по ссылке, вы увидите границу ошибки в вашем приложении в браузере.
Создать компонент высшего порядка границы ошибки (HOC)
2. Создайте файл ErrorBoundary для компонента более высокого порядка src/components/ErrorBoundary.js (HOC).
In line 7...9, I have added the state named hasError , which will then use in line 12...14 function named getDerivedStateFromError()to change the state when error occured in chield element. In line 16...23,I can also change hasError state here. No need to use getDerivedStateFromError() if we change state from in componentDidCatch() function. You can also send the error information to your custom error reporting service application. to solve the error in production. In line 25...50, add the custom react component, which is then render to applicaiton, when error occured in any chield component. In line 37...43, I have added the image for error bounday to beautify the error component. In line 50...52,I have added the this.props.children. which will return all the react elements or objects or properties between <ErrorBounday> start tag to end tag. For example, if any developer want to create the Header for any application. developer may use this.props.children to solve this problem. this children property helps to wrap any component within it named Higher Order Component(HOC).
Пример данных для проверки границы ошибки
- Создайте файл JSON с именем
user.jsonв папкеsrc/components. Вы можете скачать файл по этой ссылке. В этом файле вы можете получить массив json или пользователя, снимок экрана которого представлен ниже.
В массиве Json есть объект, у которого нет атрибута website. он может создавать любые типы ошибок javascript во время рендеринга.
Поэтому нам нужно создать границу ошибки для user list., которая может отображать сообщение об ошибке с неработающей информацией в рабочей среде без предоставления какой-либо резервной информации пользовательского интерфейса.
Применение компонента Error Bounday к компоненту React JS
Теперь мы можем создать компонент UserList, который содержит компонент User и добавить Error Bounday , который затем обрабатывает ошибку в производстве и предоставляет пользовательское сообщение об ошибке с помощью компонента <ErrorBoundary /> HOC.
In line 2,I have import user.json file to get the array of user to render in <UserList /> component using <User /> component. In line 3, I have import <ErrorBoundary /> component to wrap the error or execption of <UserList /> component. In line 5...28, I have added the <User /> Component which will show the user information from json file. In line 24, I use toString() function to the website field in User Object. If website field is not available at user object, this function create execption. Without using Error Boundary, whole app will crash and show white blank page. In line 35...41, I add the iteration to User Array which is saved in user.json file. In line 37...39, I wrap the <User /> component with <ErrorBounday /> component. If any error happend in <User /> component, that error will handled by <ErrorBoundary /> HOC component. show the formated error which is designed for.
Наши выводы кода примера пользовательской границы ошибок
Вы можете найти ссылку Весь код из Github
