This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

background

Errors are very common in our everyday coding

For example, writing JavaScript code errors in the React project will cause the react internal state to be corrupted and the entire application to crash, which should not happen

As a framework, React also has its own solutions for handling errors

How to catch errors

To address the problem of an error causing an entire application to crash, Act 16 introduces the new concept of error boundaries

The error boundary is a React component that catches JavaScript errors that occur anywhere in the child component tree and prints those errors while displaying the degraded UI without rendering the child component tree that crashed

Error bounds catch errors during rendering, in lifecycle methods, and in constructors throughout the component tree

Two conditions form the error boundary component:

  • Static getDerivedStateFromError() is used
  • Use the componentDidCatch ()

After an error is thrown, render the standby UI using static getDerivedStateFromError() and print the error message with componentDidCatch() as follows:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so that the next rendering can display the degraded UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also report error logs to the server
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can customize the degraded UI and render it
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; }}Copy the code

You can then treat its own component as a child of the error boundary, as follows:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>
Copy the code

Exceptions cannot be caught in the following cases:

  • The event processing
  • Asynchronous code
  • Server side rendering
  • Mistakes made by oneself

After react 16, all errors that occur during rendering are printed to the console

In addition to error messages and JavaScript stacks, React 16 also provides component stack tracking. Now you can see exactly what error messages occur in the component tree:

You can see that there is a stack of components in the text below the error message so that we can trace the error

Exceptions that cannot be caught by error bounds, such as a problem during event processing, are not caught because they are not triggered during rendering and do not cause render-time problems

In this case you can use js try… catch… Syntax, as follows:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    try {
      // Perform the operation and throw if there is an error
    } catch (error) {
      this.setState({ error }); }}render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <button onClick={this.handleClick}>Click Me</button>}}Copy the code

You can also do this by listening for onError events

window.addEventListener('error'.function(event) {... })Copy the code