fix(nuxt): stop loading indicator on vue errors

[xanderbarkhatov]

🔗 Linked issue

#15788

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

• Stop loading indicator when there is an error while navigating
• Call vue:error hook from NuxtErrorBoundary to signal that there was an error

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[danielroe]

My main question about calling it here is that we explicitly say this will only be called when errors propagate up:

nuxt/docs/1.getting-started/8.error-handling.md

Line 22 in 5781cf1

In addition, Nuxt provides a `vue:error` hook that will be called if any errors propagate up to the top level.

I think the concept here is that the error boundary establishes a different kind of error handling. But I'm open to discussion.

[xanderbarkhatov]

Yes, it makes sense.

The problem is that when error occurs inside an error boundary neither page:finish nor vue:error are called, so not only loading indicator remains active, but view transitions are not finished or aborted either.

[xanderbarkhatov]

What about something like this? It works but I'm not sure. Feels wrong calling page:finish in case of an error.

Maybe we do need something like page:error hook, as it was suggested in the original issue?

Or am I going in the wrong direction?

[danielroe]

I think we could use page:finish there 👍

The page: hooks are really about suspense rather than changing route. (They won't run if a page does not have an async setup or async dependencies, for example.)

[xanderbarkhatov]

I'm pretty sure they're called even with a sync setup, because every page is wrapped with a Suspense.

And in that case page:finish gets called twice with my solution 😢

[xanderbarkhatov]

So, to recap

// /nuxt/src/pages/runtime/page.ts

setup (props, { attrs }) {
  const nuxtApp = useNuxtApp()

  const done = nuxtApp.deferHydration()

  onErrorCaptured(() => {
    nuxtApp.callHook('page:finish').finally(done)
  })

It works, but for sync components page:finish gets called twice, because onResolve from Suspense also gets called