Handle Promise rejection in guards

[posva]

Version

3.0.3

Reproduction link

https://jsfiddle.net/orzwg537/

Steps to reproduce

Run the fiddle and look in console

What is expected?

a message saying error caught

What is actually happening?

There is an Unhandled Promise rejection instead

---

Currently, errors thrown in guards are caught by router.onError but Promises rejections (or error thrown in an async function) are not caught. This should be handled in all the other guards as well. To handle them right now it is possible by passing the error to next:

try {
  await fetchdata()
} catch (error) {
  next(error)
}

[berniegp]

From what I traced in the code while trying to debug this, I think my issue is related to this issue. Note that in my case no error is thrown in a guard or elsewhere, but the promise is still rejected.

Version

3.1.3

Reproduction link

https://jsfiddle.net/asu3qnry/

Steps to reproduce

To trigger the uncaught promise rejection, click on "/home" and then the button.

What is expected?

No error in console

What is actually happening?

Console reports Uncaught (in promise) undefined

---

Using a router-link instead of the initial $router.push() call removes the error.

[posva]

@berniegp unfortunately, this feature request will do nothing to help you with that. It's is related to the new promise api and errors are stil being improved (there were not before). You can find more at https://github.com/vuejs/vue-router/issues/2881#issuecomment-520864374

[fairking]

Got uncaught promise rejection as well. I assume it is because we don't handle it here:

VueRouter.prototype.push = function push (location, onComplete, onAbort) {
    var this$1 = this;

  // $flow-disable-line
  if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
    return new Promise(function (resolve, reject) {
      this$1.history.push(location, resolve, reject);
    })
  } else {
    this.history.push(location, onComplete, onAbort);
  }
};

The only change helped me to get rid of that error is to add rejection handler:

router.push("/login", null, function(error) { console.log("Error: " + error); });

which puts into the console Error: undefined.

[posva]

@denis-pujdak-adm-it yeah, it's not related. There is more information about the Uncaught Promise you are experiencing on the comment above. This feature request is to handle explicit rejections in the guard

[fairking]

@denis-pujdak-adm-it yeah, it's not related. There is more information about the Uncaught Promise you are experiencing on the comment above. This feature request is to handle explicit rejections in the guard

Ok. Thanks. I assume this is the solution: @berniegp Using a router-link instead of the initial $router.push() call removes the error..