feat: print errors from lazy loading

posva · posva · commit f6db91aaf496 · 2020-09-27T14:30:47.000+02:00
Close #497
diff --git a/__tests__/lazyLoading.spec.ts b/__tests__/lazyLoading.spec.ts
@@ -4,6 +4,7 @@ import { RouterOptions } from '../src/router'
 import { RouteComponent } from '../src/types'
 import { ticks } from './utils'
 import { FunctionalComponent, h } from 'vue'
+import { mockWarn } from 'jest-mock-warn'
 
 function newRouter(options: Partial<RouterOptions> = {}) {
   let history = createMemoryHistory()
@@ -24,6 +25,7 @@ function createLazyComponent() {
 }
 
 describe('Lazy Loading', () => {
+  mockWarn()
   it('works', async () => {
     const { component, resolve } = createLazyComponent()
     const { router } = newRouter({
@@ -240,6 +242,26 @@ describe('Lazy Loading', () => {
     expect(spy).toHaveBeenCalledTimes(1)
   })
 
+  it('prints the error when lazy load fails', async () => {
+    const { component, reject } = createLazyComponent()
+    const { router } = newRouter({
+      routes: [{ path: '/foo', component }],
+    })
+
+    const spy = jest.fn()
+
+    reject(new Error('fail'))
+    await router.push('/foo').catch(spy)
+
+    expect(spy).toHaveBeenCalled()
+    expect('fail').toHaveBeenWarned()
+
+    expect(router.currentRoute.value).toMatchObject({
+      path: '/',
+      matched: [],
+    })
+  })
+
   it('aborts the navigation if async fails', async () => {
     const { component, reject } = createLazyComponent()
     const { router } = newRouter({
diff --git a/src/navigationGuards.ts b/src/navigationGuards.ts
@@ -245,25 +245,28 @@ export function extractComponentsGuards(
         guard && guards.push(guardToPromiseFn(guard, to, from, record, name))
       } else {
         // start requesting the chunk already
-        let componentPromise: Promise<RouteComponent | null> = (rawComponent as Lazy<
-          RouteComponent
-        >)()
+        let componentPromise: Promise<
+          RouteComponent | null | undefined | void
+        > = (rawComponent as Lazy<RouteComponent>)()
 
         if (__DEV__ && !('catch' in componentPromise)) {
           warn(
             `Component "${name}" in record with path "${record.path}" is a function that does not return a Promise. If you were passing a functional component, make sure to add a "displayName" to the component. This will break in production if not fixed.`
           )
           componentPromise = Promise.resolve(componentPromise as RouteComponent)
         } else {
-          componentPromise = componentPromise.catch(() => null)
+          // display the error if any
+          componentPromise = componentPromise.catch(
+            __DEV__ ? err => err && warn(err) : console.error
+          )
         }
 
         guards.push(() =>
           componentPromise.then(resolved => {
             if (!resolved)
               return Promise.reject(
                 new Error(
-                  `Couldn't resolve component "${name}" for the following record with path "${record.path}"`
+                  `Couldn't resolve component "${name}" at "${record.path}"`
                 )
               )
             const resolvedComponent = isESModule(resolved)
