Vue-loader: Try catch not catching an error in Vue method from async function

[PierBover]

Version

15.0.0

Reproduction link

https://github.com/PierBover/vue-loader-bug
To see the error in action just open the index.html and the console. I've included the build.js in the repo.

Steps to reproduce

1. Call an async method from a component method
2. Throw an error from the async method
3. Try to catch the error with try/catch

What is expected?

The error should be caught in the try/catch

What is actually happening?

The error is not being caught

---

We have moved all our logic from promises to async/await and try/catch.

At first I suspected a Babel problem, but everything works as expected in our .js modules. The problem only happens in Vue components hence why I'm reporting the bug in vue-loder.

This also happens with version 14.2.2 of vue-loder.

Here is the JS code:

async function someAsyncFunction () {
    throw 'There was an error!';
}

export default {
    mounted () {
        this.catchWithTryCatch();
        this.catchWithPromise();
    },
    methods: {
        // using a promise catches the error
        catchWithPromise () {
            someAsyncFunction().catch((error) => {
                console.log('promise');
                console.log(error);
            });
        },
        // using async with try/catch does not catch the error
        catchWithTryCatch () {
            try {
                someAsyncFunction();
            } catch (error) {
                console.log('try catch');
                console.log(error);
            }
        }
    }
};

[JounQin]

It's just how JavaScript works...
You need add async/await in your try/catch expression like following:

async catchWithTryCatch () {
    try {
        await someAsyncFunction();
    } catch (error) {
        console.log('try catch');
        console.log(error);
    }
}

[PierBover]

Thanks @JounQin I completely missed that.