handle error while collecting loaders

Author: minht11

src/data-loaders/navigation-guard.spec.ts

@@ -203,6 +203,38 @@ describe('navigation-guard', () => {
     }
   })
 
+  it('collects all loaders from lazy loaded pages when first navigation fails', async () => {
+    setupApp({ isSSR: false })
+    const router = getRouter()
+
+    let first = true
+    router.addRoute({
+      name: '_test',
+      path: '/fetch',
+      component: async () => {
+        if (first) {
+          first = false
+
+          throw new Error('Failed to load component')
+        }
+
+        return import('../../tests/data-loaders/ComponentWithLoader.vue')
+      },
+    })
+
+    const firstNavPromise = router.push('/fetch')
+    await expect(firstNavPromise).rejects.toThrow(Error)
+
+    await router.push('/fetch')
+
+    const set = router.currentRoute.value.meta[LOADER_SET_KEY]
+    expect([...set!]).toEqual([useDataOne, useDataTwo])
+
+    for (const record of router.currentRoute.value.matched) {
+      expect(record.meta[LOADER_SET_PROMISES_KEY]).toBeUndefined()
+    }
+  })
+
   it('awaits for all loaders to be resolved', async () => {
     setupApp({ isSSR: false })
     const router = getRouter()

src/data-loaders/navigation-guard.ts

@@ -157,18 +157,29 @@ export function setupLoaderGuard({
       }
     }
 
-    return Promise.all(lazyLoadingPromises).then(() => {
-      // group all the loaders in a single set
-      for (const record of to.matched) {
-        // merge the whole set of loaders
-        for (const loader of record.meta[LOADER_SET_KEY]!) {
-          to.meta[LOADER_SET_KEY]!.add(loader)
+    return Promise.all(lazyLoadingPromises)
+      .then(() => {
+        // group all the loaders in a single set
+        for (const record of to.matched) {
+          // merge the whole set of loaders
+          for (const loader of record.meta[LOADER_SET_KEY]!) {
+            to.meta[LOADER_SET_KEY]!.add(loader)
+          }
+          record.meta[LOADER_SET_PROMISES_KEY] = undefined
         }
-        record.meta[LOADER_SET_PROMISES_KEY] = undefined
-      }
-      // we return nothing to remove the value to allow the navigation
-      // same as return true
-    })
+        // we return nothing to remove the value to allow the navigation
+        // same as return true
+      })
+      .catch((error) => {
+        // If error happens while collecting loaders, reset them
+        // so on next navigation we can try again
+        for (const record of to.matched) {
+          record.meta[LOADER_SET_KEY] = undefined
+          record.meta[LOADER_SET_PROMISES_KEY] = undefined
+        }
+
+        throw error
+      })
   })
 
   const removeDataLoaderGuard = router.beforeResolve((to, from) => {