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

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!