Uncaught (in promise) undefined - Vue-router

Based on my experience over the past few days, it is critical to catch errors in the function that calls this.$router.push().

I find two ways are immediately quite viable:

handleSomething() {    this.$router.push({}).catch((err) => {        throw new Error(`Problem handling something: ${err}.`);    });},

and

async handleSomething() {    try {        await this.$router.push({});    } catch (err) {        throw new Error(`Problem handling something: ${err}.`);        }},

At the moment, I prefer against the async/await technique here because of its execution-blocking nature, but the key observation you should make is that the "uncaught in promise" error itself is a known issue in JavaScript often referred to as "a promise being swallowed", and it's caused by a Promise being rejected but that "error" is swallowed because it isn't properly caught. That is to say there is no block of code that catches the error, so your app cannot do anything in response to the error.

This means it is paramount to not swallow the error, which means you need to catch it somewhere. In my two examples, you can see the error will pass through the catch blocks.

Secondary to the error swallowing, is the fact that the error is even thrown to begin with. In my application where I saw this, it was hard to debug, but I can see the nature of the error has something to do with Vue components unloading and loading as the route changes. For example, if you call this.$router.push() in a component and then that component gets destroyed while the route-change is in-progress, it is reasonable that you could see an error like this.

As an extension of this problem, if a route-change occurs and the resultant component tries to read data from the .push() event before the Promise is resolved, it could also throw this error. The await should stop an error like that by instructing your application to wait before reading.

So in short, investigate those two things:

1. are you somehow destroying/creating components while this.$router.push() is executing?
2. is the next component possibly reading data about route parameters before the route-change is completed?

If you discover some of this could be happening, consider your data flow and make sure you solve it by taming the async behaviour, not just by suppressing the error. In my opinion, the error is a symptom of something bigger.

During your debugging, add console.log()s into all your components' created/mounted and destroyed lifecycle methods, and also into the functions related to the route change. You should be able to get a grasp on the way data is flowing.

I suspect the nature of this issue stems from downstream usage of this.$route.params during an in-flight route-change. Add lots of console.logs and/or step through a debugger.

In my case I just needed to add a catch to the router.push method:

router.push({query: newQueryObj)}).catch(e => {})

See this related issue for more details.

I also came across this issue and changing !variable to variable !== in the router did the trick.

else if(from.name && !localStorage.token) {    router.go('/login');}

to

else if(from.name && localStorage.token === '') {    router.go('/login');}