React 16 Error Boundary component (using component

Question

I started an app using create-react-app, and I have this Error Boundary component:

import React from 'react'

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

  componentDidCatch(error, info) {
    console.log('shouldnt I see this logged??')

    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

and I use it in this App component:

import React from 'react'
import ErrorBoundary from './ErrorBoundary'


class App extends React.Component {
  render() {
    return (
      <ErrorBoundary>
        <div>
          <button onClick={() => { throw new Error('lets throw an error') }}>
            Click to throw error
          </button>
        </div>
      </ErrorBoundary>
    );
  }
}

export default App;

I am expecting that if I click the button in App, the thrown error should be caught and I should see this logged from ErrorBoundary: "shouldnt I see this logged??". But I don't see that logged and it breaks the app:

Am I misunderstanding something?

Answer 1

The reason why nothing happens is that this is an error in an event handler, and these aren't caught by error boundaries. The error-handling blog post clarifies which errors are caught:

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Without error boundaries, those errors would be very tricky to catch (and in React 16, even lifecycle-method errors will make your entire app rendering disappear.)

EDIT: The actual docs are even more clear about which errors are caught. Also note that create-react-app uses the react-error-overlay package, which on dev-server builds replaces the entire rendering with an error screen after a brief moment. To better see your errors getting caught, you can run a production build.

Answer 2

Error boundaries do not catch errors for:

1. List item
2. Event handlers
3. Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
4. Server side rendering
5. Errors thrown in the error boundary itself (rather than its children)