Report Vue Router navigation failures in the console and on Sentry
The Vue 3 migration has implied the switch from Vue Router 3 to 4. The migration guide only lists breaking changes, with the definition of breaking meaning everything is on fire and not something is very slightly bent and you won't notice until it's too late. This issue is the latter case.
Vue Router 3 reports NavigationDuplicated
errors in the dev console, and they are caught by Sentry. The latest NavigationDuplicated
we had was too long ago, so Sentry deleted it, but we have some GitLab issues where we fixed them after they got reported, such as #631 (closed).
Vue Router 4 introduces a concept of "navigation failures", which regroups NavigationDuplicated
errors with two other error types: aborts (when a router guard denies the navigation using return false
, which we never do), and cancellations, which are documented through an epic demonstration of English:
A cancelled navigation is a navigation that failed because a more recent navigation finished started (not necessarily finished).
We really want duplicated navigations to be reported because we are certain they are bugs. Aborted navigations are usually intended behavior, since you need to explicitly return false
, so we don't care about those. We should report cancellations too; in theory, they can be generated by a user with a very slow connection, some very fast clicks, and in very specific circumstances, but it's pretty safe to say that that's uncommon enough that a bug is more likely.
The problem is, Vue Router 4 does not report any of those failures by default. You have to do it yourself. :|
The isNavigationFailure
docs show how a failure
can be found in the global afterEach
guard. We can use this to report errors through console.error
and restore a relative amount of sanity in Vue Router.