handle error while collecting loaders

improve tests

handle error while collecting loaders

Author: minht11

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

@@ -182,17 +182,65 @@ describe('navigation-guard', () => {
   it('collects all loaders from lazy loaded pages with repeated navigation', async () => {
     setupApp({ isSSR: false })
     const router = getRouter()
+
+    const { promise, resolve } = Promise.withResolvers<void>()
+
     router.addRoute({
       name: '_test',
       path: '/fetch',
-      component: () =>
-        import('../../tests/data-loaders/ComponentWithLoader.vue'),
+      component: async () => {
+        await promise
+
+        return import('../../tests/data-loaders/ComponentWithLoader.vue')
+      },
     })
 
     void router.push('/fetch')
 
-    // simulate repeated navigation while the async component is loading
+    // wait a tick to ensure first navigation is started
     await Promise.resolve()
+
+    const secondNavPromise = router.push('/fetch')
+    resolve()
+    await secondNavPromise
+
+    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('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)
+
+    // Verify loaders collection cleanup after failure
+    const rec = getRouter()
+      .getRoutes()
+      .find((r) => r.name === '_test')!
+    expect(rec.meta[LOADER_SET_KEY]).toBeUndefined()
+    expect(rec.meta[LOADER_SET_PROMISES_KEY]).toBeUndefined()
+
     await router.push('/fetch')
 
     const set = router.currentRoute.value.meta[LOADER_SET_KEY]

src/data-loaders/navigation-guard.ts

@@ -151,25 +151,35 @@ export function setupLoaderGuard({
           lazyLoadingPromises.push(promise)
         }
       } else if (record.meta[LOADER_SET_PROMISES_KEY]) {
-        console.log('REUSE', record.path)
         // When repeated navigation happen on the same route, loaders might still be
         // loading from async components, so we need to wait for them to resolve.
         lazyLoadingPromises.push(...record.meta[LOADER_SET_PROMISES_KEY])
       }
     }
 
-    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) => {