0

I ran into a problem in using async functions. I didn't realize that classList.add('') is illegal. So, when I was running my code in Firefox it stopped running my function, but no error appeared because it was async (Chrome shows the error). This was hard to track down because in the original program the function with the classList.add was two function calls away. What is going here and how do I avoid it in the future (besides having to check the error logs in two different browsers)? PS bonus if you can give explain the reason why async errors don't actually halt execution.

async function error1(){
  console.log('Fn async error: before')
  let a=undefined
  a.b=1
  console.log('after')
}
async function error2(){
  console.log('Fn async noError: before')
  document.body.classList.add('')
  console.log('after')

}
function error3(){
  console.log('Fn: before')
  document.body.classList.add('')
  console.log('after')
}


//Stops execution of function but not program
//Throws an error in Chrome and Firefox
error1()
//Stops execution of function but not program
//Throws an error in Chrome but not Firefox
error2()
//Errors and stops program
error3()
qw3n
  • 5,558
  • 4
  • 28
  • 58
  • 2
    *why async errors don't actually halt execution* You didn't await it – gurvinder372 Apr 27 '18 at 12:57
  • 1
    Possible duplicate of [Can I catch an error from async without using await?](https://stackoverflow.com/questions/30649994/can-i-catch-an-error-from-async-without-using-await) – NineBerry Apr 27 '18 at 12:59

1 Answers1

0

You should await the execution which makes it possible to catch possible errors. This is because the promise that is created internally from your async block behaves as a promise should behave - in case of any errors, the promise resolves as rejected and passes the exception the pipeline to the continuation you attach to the rejecting path.

Two ways:

First - add explicit then to your promise:

    async function error1(){
      console.log('Fn async error: before')
      let a=undefined
      a.b=1
      console.log('after')
    }

    error1().catch( e => {
        console.log( 'error: ' + e);
    } );

Second - make a try-catch block around await 

async function error1(){
  console.log('Fn async error: before')
  let a=undefined
  a.b=1
  console.log('after')
}

(async function() {
   try {
      await error1();  
   }
   catch (e) {
       console.log( 'error: ' + e);
   }
}());
Wiktor Zychla
  • 44,107
  • 6
  • 65
  • 91
  • Ok but why didn't Firefox even show an error on the second example? Also in my original code I do have awaits, but it seems counterintuitive to me if errors don't halt the execution like they do with non async functions. – qw3n Apr 27 '18 at 13:14
  • If you don't use await then the order of execution of the different statements is not defined. The statements following the call to the async function without using await will be executed while or even before the async function is execued. – NineBerry Apr 27 '18 at 13:25