No stacktrace on NavigationDuplicated error uncaught in promise

[rchl]

Version

3.1.1

Reproduction link

https://jsfiddle.net/Lom7hxn5/

Steps to reproduce

1. Call $router.replace or $router.push twice with same path

What is expected?

Error object provides stacktrace (stack property)

What is actually happening?

No stack trace in the error object

---

When NavigationDuplicated error is thrown, there is no stack trace in the error itself so when error is reported through error reporting service like Sentry, there is absolutely no context to go with the error and so it's hard to figure out where that error originated.

Transpiled code for the NavigationDuplicated class looks like this:

vue-router/dist/vue-router.common.js

Lines 1935 to 1946 in 5141def

	var NavigationDuplicated = /*@__PURE__*/(function (Error) {
	function NavigationDuplicated () {
	Error.call(this, 'Navigating to current location is not allowed');
	this.name = this._name = 'NavigationDuplicated';
	}
	if ( Error ) NavigationDuplicated.__proto__ = Error;
	NavigationDuplicated.prototype = Object.create( Error && Error.prototype );
	NavigationDuplicated.prototype.constructor = NavigationDuplicated;
	return NavigationDuplicated;
	}(Error));

which is problematic because instantiating such function won't create a stacktrace. It would work fine with non-transpiled code (although I'm not suggesting to not transpile it):

vue-router/src/history/errors.js

Line 1 in 44c63a9

export class NavigationDuplicated extends Error {

One possible solution would be to manually set stack trace with:

this.stack = (new Error()).stack;

but I'm not sure how that would be done if transpilation is done by webpack/babel...

There is also one extra bug in that code. The line that instantiates error passes a route object to the error:

vue-router/src/history/base.js

Line 125 in fc42d9c

return abort(new NavigationDuplicated(route))

but error doesn't do anything with it:

vue-router/src/history/errors.js

Line 2 in 44c63a9

constructor () {

Saving route properties on the error object would also help in deciphering source of the error.

[posva]

@rchl what navigator are you seeing this on? There are some limitations regarding error stacktraces that may lead to errors being uncomplete in browsers like IE9

[rchl]

I'm seeing this on every browser as it's not specific to a browser but to transpiled variant of the code. Instantiating such transpiled "class" is not gonna produce a stack trace as inheritance of Error is "faked" in that case (or at least not considered as proper subclass of Error by engines).

[posva]

Weird, I do get a stack trace on Safari, Chrome and Firefox. IE is a bit of a different story

What are you expecting to see? Adding the stack manually or using Error.captureStackTrace yield the same stacktrace

[francoisromain]

I updated to vue-router from 3.0.7 to 3.1.2 and got this error. What does it mean? The current stack trace points to the internals of vue-router and vue.runtime and does not help. Thank you

edit: revert to 3.0.7 removed the error

[posva]

@francoisromain see #2872 (comment) about the promise rejection

[rchl]

After many iterations I've created better testcase at https://jsfiddle.net/Lom7hxn5/ (also updated original comment).

Notice that in your screenshot you have two chevrons to expand. The one you've expanded is not actually the error object itself but something else (I think promise rejection exception). The error itself doesn't have a stack trace.

My new testcase just catches promise rejection and console.log's the error. That should also show stack trace but doesn't currently. Note: If using console.error instead of console.log, there will again be second chevron with stack trace but that's not from the error object itself.

[rchl]

Also here is a version using esm version of VueRouter (in browsers that support ES modules): https://jsfiddle.net/L8wykjns/5/

You can see that logged error actually has stack trace in this one.

I’m just wondering.. am I supposed to guard every route to prevent clicks if the route matches the current route? — Or is this just an issue with router?

[ashtonian]

upgraded to most recent and I now I get this exception. This was introduced as part of the 3.1 new promise api. This seems to be a breaking change as I have to change code to accommodate for the new version to keep the same behavior as before. Because the exception makes the router or page act erratic, this would seem to break semvers "add functionality in a backwards compatible manner".

Related:
#2880
#2878
#2872

Api change - #2873

[shayneo]

Same issue. Don't want to guard every route to prevent an error that feels mostly cosmetic. For short term, might setup a global onError to swallow it, but that feels messy 😿

[evgeniy-legkun]

How to handle "NavigationDuplicated" error globally? I could not swallow this error using onError hook.
I use push (replace) function in lots of places and I would not want to guard every route too.