javascript - React 16 Error Boundary component (using componentDidCatch) shows uncaught error - Stack Overflow

admin管理员组

文章数量:1310043

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

import React from 'react'

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

  ponentDidCatch(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 ponent:

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?

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

import React from 'react'

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

  ponentDidCatch(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 ponent:

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?

• javascript
• reactjs
• create-react-app

Share Improve this question Follow edited Nov 28, 2019 at 3:10 Emile Bergeron 17.4k55 gold badges8585 silver badges131131 bronze badges asked Oct 19, 2017 at 17:12 chevin99chevin99 5,08877 gold badges2626 silver badges3333 bronze badges 2

• 1 Heh, what you did looks right to me, and I just tested and it failed. So I'm also interested in an answer :) – Alex Guerra Commented Oct 19, 2017 at 18:02
• I am using this library js.jsnlog. that catches all errors (even in error handlers). This is how my error Boundary ponent looks like pastebin./aBFtD7DB – Juan Solano Commented May 7, 2018 at 23:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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.

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)

本文标签： javascriptReact 16 Error Boundary component (using componentDidCatch) shows uncaught errorStack Overflow