Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to define error boundaries in React. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Define error boundaries

In Javascript, we all use try/catch to catch possible exceptions and handle errors in catch. For example:

Function getFromLocalStorage (key, value) {try {const data = window.localStorage.get (key) return JSON.parse (data)} catch (error) {console.error}}

In this way, even if something goes wrong, our application will not crash the white screen.

In the final analysis, React is also Javascript, which is essentially no different, so there is no problem with using try/catch in the same way.

However, due to the React implementation mechanism, Javascript errors that occur within the component can break the internal state, and render will generate errors:

Https://github.com/facebook/react/issues/4026

For the above reasons, the React team introduced Error Boundaries:

Https://reactjs.org/docs/error-boundaries.html

Error boundaries is actually a React component, and you can find a component to handle any error messages it catches.

When the component tree crashes, you can also display your custom UI as a fallback.

Look at the official example provided by React: https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

Class ErrorBoundary extends React.Component {constructor (props) {super (props) this.state = {hasError: false}} static getDerivedStateFromError (error) {/ / Update state so the next render will show the fallback UI. Return {hasError: true}} componentDidCatch (error, errorInfo) {/ / You can also log the error to an error reporting service logErrorToMyService (error, errorInfo)} render () {if (this.state.hasError) {/ / You can render any custom fallback UI return Something went wrong. } return this.props.children}}

Mode of use:

This is the end of the article on "how React defines error boundaries". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.