JavaScript async/await error handling

[BanksySan]

The Problem

When an error is thrown in from a promise or an async function we can’t use try-catch-finally to handle catch and handle it. The JavaScript engine has already passed/disposed of the catching block when the error bubbles up.

Currently we have a lot of try-catch-finally blocks failing to catch errors in async methods. The main example of this is errors thrown by Axios when an HTTP call fails. This causes null reference exceptions and promise not finished exceptions to be thrown further down the line.

For Discussion

All errors must be handled so that only system-level errors bubble (i.e. out of memory, a volcano has erupted, the cleaner unplugged the server).

PR Reviewers need to know about this in order to look for it when reviewing.

We need to agree on a standard pattern(s) that we can advise PR authors use in place of try-catch-finally.

We need to review the existing code and re-write parts that are incorrectly using try-catch-finally.

Examples:

• PoC demonstrating behaviour.
• Calls to axios in f-checkout's Checkout.vue wrapped in try-catch-finally.

[SachaZvetelman]

@BanksySan, I'm struggling to fully understand the issue you are experiencing based on the PoC you shared. Could you please simplify that example a bit and maybe add some comments explaining what's expected and the actual result you're seeing? Maybe extracting the example from Checkout would be even better 😄

[BanksySan]

I'll make them more user friendly and put details about Checkout in the description.

[gareththackeray]

Isn't this only an issue if the code inside the Promise isn't wrapped in a try-catch and rejecting in the catch? You would expect axios to be rejecting its Promises. An exception thrown from directly within an async method is caught, so long as the call is awaited.

If we do this:

  async function throwAfterAwait(){
    await new Promise(r => setTimeout(r, 100));

    throw new Error("Thrown after await");
  }

  async function call(){
    try {
      await throwAfterAwait();
    } catch (error) {
      console.log('caught');
    }
  }

  call();

we get caught logged, as expected.

I've just compared this to your example and it's the doThrowImmediateErrorPromise() example. The catch isn't entered because you are already passing an error handler to the then. If you remove the error handler in the then or called using await and wrapped in a try-catch instead of using then, you'd get the "bang" message logged as expected.

[BanksySan]

You have a point there. It seems that the try-catch-finally works fine it the error is thrown in the returned promise and not bubbling up from a sub-promise.

async function throwImmediate() {
    console.log('Call throwImmediate');
    throw new Error("Error throwImmediate thrown");
}

(async () => {
    try {
        await throwImmediate();
    } catch (e) {
        console.log(`throwImmediate  Caught: "${e.message}"`);
    } finally {
        console.log('throwImmediate  Finally');
    }
    console.log('throwImmediate  Finished');
})();

Call throwImmediate
throwImmediate  Caught: "Error throwImmediate thrown"
throwImmediate  Finally
throwImmediate  Finished

async function throwInPromise() {
    console.log('Call throwInPromise');
    return new Promise((_req, _rej) => {
        throw new Error("Error throwInPromise thrown");
    });
}

(async () => {
    try {
        await throwInPromise();
    } catch (e) {
        console.log(`throwInPromise  Caught: "${e.message}"`);
    } finally {
        console.log('throwInPromise Finally');
    }
    console.log('throwInPromise  Finished');
})();

Call throwInPromise
throwInPromise  Caught: "Error throwInPromise thrown"
throwInPromise Finally
throwInPromise  Finished

However, when the error is thrown in setTimeout the try-catch-finally block doesn't catch it.

async function throwInPromiseTimeout() {
    return new Promise((_, ___) => {
        setTimeout(() => {
            throw new Error("Throw throwInPromiseTimeout error");
        }, 1000);
    });
}

(async () => {
    try {
        await throwInPromiseTimeout();
    } catch (e) {
        console.log(`throwInPromiseTimeout  Caught: "${e.message}"`);
    } finally {
        console.log('throwInPromiseTimeout  Finally');
    }
    console.log('throwInPromiseTimeout  Finished');
})();

Error: Throw throwInPromiseTimeout error

[BanksySan]

@SachaZvetelman @gareththackeray

[gareththackeray]

And that's because you are neither resolving or rejecting the promise. I think the first line of your issue description is incorrect. Instead of:

When an error is thrown from a promise or an async function we can’t use try-catch-finally to handle catch and handle it.

it should really be

When an error is thrown in a promise constructor it won't be caught by a try-catch-finally when awaiting the promise.

Which is much less of an issue. And the guidance, if any, just basically needs to be: "Always ensure you explicitly resolve or reject any promises you create." !

As an aside, I would posit that if you couldn't catch errors thrown from an async function it would render the whole async-await concept pretty much useless 😄

[BanksySan]

That's actually the point I was making. We can't let exception in async methods bubble up, we need to catch them and gracefully handle them with the reject method.

WRT the async/await being useless without a try-catch solution, it's only in recent versions that .NET has been able to handle them like that. Exceptions thrown off the main thread would bring the whole application down. I've had websites shut down because of that.

[gareththackeray]

You're conflating "async methods" with "promise constructors". Async methods are fine to throw errors; promise constructors are not. To elaborate slightly, throwing an exception in an async method automatically rejects the returned promise.

With .net I think you might be thinking of async void methods, whose use is strongly discouraged.