feat(errors): expose isRouterError

Author: posva

docs/guide/advanced/navigation-failures.md

@@ -10,22 +10,26 @@ When using a regular `router-link`, **none of these failures will log an error**
 
 ## Detecting Navigation Failures
 
-_Navigation Failures_ are `Error` instances with a few extra properties. Among them, you can find a `type` property. This will allow you to check the type of the navigation failure:
+_Navigation Failures_ are `Error` instances with a few extra properties. To check if an error comes from the Router, use the `isRouterError` function:
 
 ```js
-import { NavigationFailureType } from 'vue-router'
+import { NavigationFailureType, isRouterError } from 'vue-router'
 
-// trying to access an admin-only route
+// trying to access the admin page
 router.push('/admin').catch(failure => {
   if (failure) {
-    if (failure.type === NavigationFailureType.redirected) {
+    if (isRouterError(failure, NavigationFailureType.redirected)) {
       // show a small notification to the user
       showToast('Login in order to access the admin panel')
     }
   }
 })
 ```
 
+::: tip
+If you omit the second parameter: `isRouterError(failure)`, it will only check if the error comes from the Router.
+:::
+
 ## `NavigationFailureType`
 
 `NavigationFailureType` exposes the following properties to differentiate _Navigation Failures_:
@@ -40,10 +44,10 @@ router.push('/admin').catch(failure => {
 Apart from exposing a `type` property, all navigation failures expose `to` and `from` properties to reflect the current location as well as the target location for the navigation that failed:
 
 ```js
-// given we are at `/`
+// trying to access the admin page
 router.push('/admin').catch(failure => {
   if (failure) {
-    if (failure.type === NavigationFailureType.redirected) {
+    if (isRouterError(failure, NavigationFailureType.redirected)) {
       failure.to.path // '/admin'
       failure.from.path // '/'
     }

src/history/abstract.js

@@ -2,8 +2,7 @@
 
 import type Router from '../index'
 import { History } from './base'
-import { isRouterError } from '../util/warn'
-import { NavigationFailureType } from '../util/errors'
+import { NavigationFailureType, isRouterError } from '../util/errors'
 
 export class AbstractHistory extends History {
   index: number

src/history/base.js

@@ -4,7 +4,7 @@ import { _Vue } from '../install'
 import type Router from '../index'
 import { inBrowser } from '../util/dom'
 import { runQueue } from '../util/async'
-import { warn, isError, isRouterError } from '../util/warn'
+import { warn } from '../util/warn'
 import { START, isSameRoute } from '../util/route'
 import {
   flatten,
@@ -15,7 +15,9 @@ import {
   createNavigationDuplicatedError,
   createNavigationCancelledError,
   createNavigationRedirectedError,
-  createNavigationAbortedError
+  createNavigationAbortedError,
+  isError,
+  isRouterError
 } from '../util/errors'
 
 export class History {

src/index.js

@@ -15,22 +15,24 @@ import { AbstractHistory } from './history/abstract'
 
 import type { Matcher } from './create-matcher'
 
+import { isRouterError, NavigationFailureType } from './util/errors'
+
 export default class VueRouter {
-  static install: () => void;
-  static version: string;
-
-  app: any;
-  apps: Array<any>;
-  ready: boolean;
-  readyCbs: Array<Function>;
-  options: RouterOptions;
-  mode: string;
-  history: HashHistory | HTML5History | AbstractHistory;
-  matcher: Matcher;
-  fallback: boolean;
-  beforeHooks: Array<?NavigationGuard>;
-  resolveHooks: Array<?NavigationGuard>;
-  afterHooks: Array<?AfterNavigationHook>;
+  static install: () => void
+  static version: string
+
+  app: any
+  apps: Array<any>
+  ready: boolean
+  readyCbs: Array<Function>
+  options: RouterOptions
+  mode: string
+  history: HashHistory | HTML5History | AbstractHistory
+  matcher: Matcher
+  fallback: boolean
+  beforeHooks: Array<?NavigationGuard>
+  resolveHooks: Array<?NavigationGuard>
+  afterHooks: Array<?AfterNavigationHook>
 
   constructor (options: RouterOptions = {}) {
     this.app = null
@@ -42,7 +44,8 @@ export default class VueRouter {
     this.matcher = createMatcher(options.routes || [], this)
 
     let mode = options.mode || 'hash'
-    this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
+    this.fallback =
+      mode === 'history' && !supportsPushState && options.fallback !== false
     if (this.fallback) {
       mode = 'hash'
     }
@@ -68,11 +71,7 @@ export default class VueRouter {
     }
   }
 
-  match (
-    raw: RawLocation,
-    current?: Route,
-    redirectedFrom?: Location
-  ): Route {
+  match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route {
     return this.matcher.match(raw, current, redirectedFrom)
   }
 
@@ -81,11 +80,12 @@ export default class VueRouter {
   }
 
   init (app: any /* Vue component instance */) {
-    process.env.NODE_ENV !== 'production' && assert(
-      install.installed,
-      `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
-      `before creating root instance.`
-    )
+    process.env.NODE_ENV !== 'production' &&
+      assert(
+        install.installed,
+        `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
+          `before creating root instance.`
+      )
 
     this.apps.push(app)
 
@@ -120,11 +120,15 @@ export default class VueRouter {
       const setupListeners = () => {
         history.setupListeners()
       }
-      history.transitionTo(history.getCurrentLocation(), setupListeners, setupListeners)
+      history.transitionTo(
+        history.getCurrentLocation(),
+        setupListeners,
+        setupListeners
+      )
     }
 
     history.listen(route => {
-      this.apps.forEach((app) => {
+      this.apps.forEach(app => {
         app._route = route
       })
     })
@@ -193,11 +197,14 @@ export default class VueRouter {
     if (!route) {
       return []
     }
-    return [].concat.apply([], route.matched.map(m => {
-      return Object.keys(m.components).map(key => {
-        return m.components[key]
+    return [].concat.apply(
+      [],
+      route.matched.map(m => {
+        return Object.keys(m.components).map(key => {
+          return m.components[key]
+        })
       })
-    }))
+    )
   }
 
   resolve (
@@ -213,12 +220,7 @@ export default class VueRouter {
     resolved: Route
   } {
     current = current || this.history.current
-    const location = normalizeLocation(
-      to,
-      current,
-      append,
-      this
-    )
+    const location = normalizeLocation(to, current, append, this)
     const route = this.match(location, current)
     const fullPath = route.redirectedFrom || route.fullPath
     const base = this.history.base
@@ -256,6 +258,8 @@ function createHref (base: string, fullPath: string, mode) {
 
 VueRouter.install = install
 VueRouter.version = '__VERSION__'
+VueRouter.isRouterError = isRouterError
+VueRouter.NavigationFailureType = NavigationFailureType
 
 if (inBrowser && window.Vue) {
   window.Vue.use(VueRouter)

src/util/errors.js

@@ -71,3 +71,11 @@ function stringifyRoute (to) {
   })
   return JSON.stringify(location, null, 2)
 }
+
+export function isError (err) {
+  return Object.prototype.toString.call(err).indexOf('Error') > -1
+}
+
+export function isRouterError (err, errorType) {
+  return isError(err) && err._isRouter && (errorType == null || err.type === errorType)
+}

src/util/resolve-components.js

@@ -1,7 +1,8 @@
 /* @flow */
 
 import { _Vue } from '../install'
-import { warn, isError } from './warn'
+import { warn } from './warn'
+import { isError } from '../util/errors'
 
 export function resolveAsyncComponents (matched: Array<RouteRecord>): Function {
   return (to, from, next) => {

src/util/warn.js

@@ -12,10 +12,3 @@ export function warn (condition: any, message: string) {
   }
 }
 
-export function isError (err: any): boolean {
-  return Object.prototype.toString.call(err).indexOf('Error') > -1
-}
-
-export function isRouterError (err: any, errorType: ?string): boolean {
-  return isError(err) && err._isRouter && (errorType == null || err.type === errorType)
-}