1
class Counter extends React.Component {
          constructor(props) {
           super(props);
          this.state = { counter: 0 };
     }

      handleClick = () => {
       this.setState(({ counter }) => ({
     counter: counter + 1
      }));
     };

  simError = () => {
     x / 2;
   };

 render() {
   if (this.state.counter === 5) {
     // Simulate a JS error x is not defined
     // this will crash the component `this.simErro()`
     //this.simError()
     // but this will not `setTimeout(this.simError, 0);`
     //setTimeout(this.simError, 0);
  }
     return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
    }
  } 

if you uncomment setTimeout(this.simError, 0); the component will not crash but you'll see the error in the console. link to codepen

0

1 Answer 1

10

Disclaimer: I'm not a React developer, so my answer has nothing to do with the React component part of this code.

Exceptions that are thrown asynchronously (such as in a timeout) do not affect the previous synchronous execution of code, since that code already finished long before the timeout fires.

Consider:

function helloWorld() {
   console.log("Hello");
   try {
      setTimeout(function(){
         throw new Error("Oops!");
      },100);
   }
   catch (err) {
      console.log("Never got here.");
   }
   console.log("World");
}

helloWorld();

This program is going to print "Hello", then "World", then 100ms later an exception "Oops!" will be thrown. But since it's happening asynchronously, helloWorld() has already long since finished, meaning that there's no way it could have known an exception occurred. It certainly couldn't have stopped the "World" from being printed, because the exception hadn't happened yet.

The try..catch won't catch the exception, either, for the same reason. It will be an unhandled exception, and will be caught globally by the JS environment and dumped to the console.

Side note: if you want to catch global unhandled exceptions, you have some options. In the browser, you can set a window.error handler. In Node, set a listener on process for the uncaughtException event.

1
  • Thanks for this explanation :) Firstly: try...catch didn't catch error cause that part of code is synchronous and already done before error occur. Does that mean try..catch can only fetch synchronous errors? Secondly: In this example above, I understand error happens after timeout, but how event listener continued to work even after that? It is clear to me in your example function code is done function is finished, and error happens after that. But in code above event listener continues to work even after error occurred. Is that specific for React or it would work in Vanilla JS also? Jun 18, 2021 at 4:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.