Detailed explanation of React Exception Handling and react Exception Handling in React 16

Source: Internet
Author: User

Detailed explanation of React Exception Handling and react Exception Handling in React 16

Exception Handling in React 16

Exception Handling

In React 15.x and earlier versions, exceptions in the component may affect the internal status of React, leading to unknown errors during the next rendering. Exceptions in these components are often thrown by the application code itself. In earlier versions, React is more entrusted to developers for handling, however, it does not provide a good way to handle these exceptions elegantly in components. In React 16.x, the so-called Error Boundary concept is introduced to ensure that errors on the UI Layer are not chained and the entire application crashes; exceptions that are not captured by any exception boundary may cause the entire React component tree to be uninstalled. The so-called exception boundary refers to an exception thrown by a child element that can capture it (including nested child elements), and is elegantly degraded based on user configuration to display it, rather than causing the entire component tree to crash. Exception boundary can capture the exceptions thrown by the rendering function, lifecycle callback, and constructor of the entire component tree.

We can add a new componentDidCatch (error, info) lifecycle callback for a component to change it to the exception boundary:

class ErrorBoundary extends React.Component { constructor(props) {super(props);this.state = { hasError: false }; } componentDidCatch(error, info) {  // Display fallback UIthis.setState({ hasError: true });  // You can also log the error to an error reporting service  logErrorToMyService(error, info); } render() {if (this.state.hasError) {   // You can render any custom fallback UIreturn 

Then we can use this component as usual:

<ErrorBoundary><MyWidget /></ErrorBoundary>

The componentDidCatch () method is like the catch {} code block targeting the component. However, the try/catch mode in JavaScript is more oriented to imperative code, while the React component itself is declarative, therefore, it is more suitable to use the mode of the specified rendering object. Note that only a Class component can be an exception boundary. In actual development and development, we often declare a single exception boundary and use it in all components that may throw exceptions. It is also worth mentioning that the exception boundary does not capture its own exceptions. If the exception boundary component itself throws an exception, it will be passed to the nearest exception boundary on the previous layer by bubbling.

In actual application development, some developers also directly display the broken interface to developers. However, for example, in a chat interface, if the interface is still displayed directly to the user in case of an exception, it may cause the user to send the information to the wrong recipient; or in some payment applications, the user amount is displayed incorrectly. Therefore, if we upgrade the application to React 16.x, we need to package the exceptions that were not handled in the original application into the exception boundary. For example, an application may be divided into several different modules, such as the sidebar, information panel, session interface, and Information Input. We can wrap these modules into different error boundaries; in this way, if a component crashes, it will be caught by its direct exception boundary to ensure that the remaining parts are still available. Similarly, we can add service interfaces such as error feedback to the exception boundary, report exceptions in the production environment, and fix them. The complete application code is as follows:

class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { error: null, errorInfo: null }; } componentDidCatch(error, errorInfo) {  // Catch errors in any components below and re-render with error messagethis.setState({   error: error,   errorInfo: errorInfo  })  // You can also log error messages to an error reporting service here } render() {if (this.state.errorInfo) {   // Error pathreturn (    <div>     

The above is a detailed explanation of the exception handling materials in React 16. If you have any questions, please leave a message or go to the community on this site for discussion. Thank you for reading this article and hope to help you. Thank you for your support for this site!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.