Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to catch Error emitted in componentDidMount #14549

Closed
xobotyi opened this Issue Jan 8, 2019 · 8 comments

Comments

Projects
None yet
4 participants
@xobotyi
Copy link

xobotyi commented Jan 8, 2019

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

This comment has been minimized.

Copy link

charBap commented Jan 19, 2019

Can I take this?

@yanglin5689446

This comment has been minimized.

Copy link

yanglin5689446 commented Jan 19, 2019

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

This comment has been minimized.

Copy link
Author

xobotyi commented Jan 21, 2019

@yanglin5689446 since when componentDidMount triggers on re-renders?

@gaearon

This comment has been minimized.

Copy link
Member

gaearon commented Jan 21, 2019

@charBap Sure, feel free to investigate!

@yanglin5689446

This comment has been minimized.

Copy link

yanglin5689446 commented Jan 22, 2019

@yanglin5689446 since when componentDidMount triggers on re-renders?

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

@gaearon

This comment has been minimized.

Copy link
Member

gaearon commented Feb 8, 2019

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.

@gaearon gaearon closed this Feb 8, 2019

@xobotyi

This comment has been minimized.

Copy link
Author

xobotyi commented Feb 11, 2019

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

This comment has been minimized.

Copy link
Member

gaearon commented Feb 11, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.