Unable to catch Error emitted in componentDidMount

[xobotyi]

Do you want to request a feature or report a bug?
Bug report.

What is the current behavior?
Error boundary handles Error emitted in componentDidMount and somewhy rethrows it.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {error: null, errorInfo: null};
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
  }

  render() {
    if (this.state.errorInfo) {
    	return (
      	    <div>Ive handled an error!</div>
        );
    }

    return this.props.children;
  }
}

class MyComponent extends React.Component {
  componentDidMount(){
  	this.setState(()=>{
    	    throw new Error('This error somewhy was rethrown!')
        });
  }

  render() {
    return (
    	<div>This component is awesome</div>
    );
  }
}

ReactDOM.render((<ErrorBoundary><MyComponent/></ErrorBoundary>), document.getElementById('AppRoot'));

https://jsfiddle.net/xobotyi/96eqo8zp/

What is the expected behavior?
It should not rethrow the error.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React: 16.7.0
OS: Win 10 x64
Browser: Chromium 71.0.3578

[charBap]

Can I take this?

[yanglin5689446]

in first render, <MyComponent /> being rendered and mounted, causes componentDidMount to raise a new error, which then be caught by componentDidCatch of <ErrorBoundary />.
componentDidCatch then calls setState to change the state of <ErrorBoundary />, which triggers re-render (state change), so <MyComponent /> gets re-rendered, too, thus triggers componentDidMount to throw a new error, but this time the state of <ErrorBoundary /> not changed(already set), so it won't re-render again, So I don't regard it as an unexpected behavior.

it seems that I missed some point and not thought it clearly , please discard this paragraph.

[xobotyi]

@yanglin5689446 since when componentDidMount triggers on re-renders?

[gaearon]

@charBap Sure, feel free to investigate!

[yanglin5689446]

@yanglin5689446 since when componentDidMount triggers on re-renders?

oops your are right, I didn't think the scenario clearly, forget what I said.

[gaearon]

The error is not rethrown. You see an error message in the console because React does a special trick to ensure all errors are logged. But the error was successfully handled by an error boundary.

[xobotyi]

The error is not rethrown. You see an error message in the console because React does a special trick to ensure all errors are logged. But the error was successfully handled by an error boundary.

But how should i catch it?
That error happens asynchroniously, so try/catch won't work.

I need to make a tests that will ensure that component thrown an error at componentDidMount stage, but there is no way to do it, cause test fails due to error output to console.

[gaearon]

Sorry, I don't quite understand what you're asking. In either case, that appears to be a question — please use the community resources for help. We use the issue tracker for bug reports.

https://reactjs.org/community/support.html