feat: print errors from lazy loading

Close #497

diff --git a/__tests__/lazyLoading.spec.ts b/__tests__/lazyLoading.spec.ts
index f28f2cc8e6169433caee31137183d66e54978d1f..62a4c3b928067100b9f658b35131a2a825618883 100644 (file)
--- 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
index 90fd35feb23181a07d1d5dcffa8044b2e85d1670..0ffb9e088004c902dac87a85477e85bf57b34661 100644 (file)
--- a/src/navigationGuards.ts
+++ b/src/navigationGuards.ts
@@ -245,9 +245,9 @@ 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(
@@ -255,7 +255,10 @@ export function extractComponentsGuards(
           )
           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(() =>
@@ -263,7 +266,7 @@ export function extractComponentsGuards(
             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)