如何捕获异步函数中的 javascript 错误

Question

How do I catch simple js errors in async functions? In the following code the function "errorfkt" is not available. If I remove the "async" keyword in front of the function "testfkt" I see the reference error in the console. With the "async" keyword no error is visible.

document.querySelector('#btnTest').addEventListener('click', testfkt)

async function testfkt() {
  errorfkt();
  console.log('test');
}

https://codepen.io/Jochen99/pen/NWrEWgb?editors=1111

During development I often see very obvious errors in async functions because the browser does not complain. Is there a way to handle this?

Greetings, Jochen

Answer 1

Exceptions in Promises are available in catch methods.

addEventListener('click', (event) => {
    testfkt(event).catch(error => {
        console.log(error);
    });
})

You can also use try/catch with async / await syntax:

addEventListener('click', async (event) => {
    try {
        await testfkt(event)
    } catch(error) {
        console.log(error);
    }
})

Answer 2

You can use a try catch block in the function

async function testfkt() {
  try {
    await errorfkt();
    console.log('test');
  } catch(e) {
    console.log(e);
  }
}