fix(nuxt): wait for suspense to resolve before handling NuxtErrorBoundary error (#31791)

Author: DamianGlowala

packages/nuxt/src/app/components/nuxt-error-boundary.ts

@@ -1,5 +1,6 @@
 import { defineComponent, onErrorCaptured, ref } from 'vue'
 import { useNuxtApp } from '../nuxt'
+import { onNuxtReady } from '../composables/ready'
 
 export default defineComponent({
   name: 'NuxtErrorBoundary',
@@ -11,16 +12,27 @@ export default defineComponent({
   },
   setup (_props, { slots, emit }) {
     const error = ref<Error | null>(null)
-    const nuxtApp = useNuxtApp()
 
     if (import.meta.client) {
-      onErrorCaptured((err, target, info) => {
-        if (!nuxtApp.isHydrating || !nuxtApp.payload.serverRendered) {
-          emit('error', err)
-          nuxtApp.hooks.callHook('vue:error', err, target, info)
-          error.value = err
-          return false
+      const nuxtApp = useNuxtApp()
+
+      function handleError (...args: Parameters<Parameters<typeof onErrorCaptured>[0]>) {
+        const [err, instance, info] = args
+        emit('error', err)
+
+        nuxtApp.hooks.callHook('vue:error', err, instance, info)
+
+        error.value = err as Error
+      }
+
+      onErrorCaptured((err, instance, info) => {
+        if (!nuxtApp.isHydrating) {
+          handleError(err, instance, info)
+        } else {
+          onNuxtReady(() => handleError(err, instance, info))
         }
+
+        return false
       })
     }
 

test/basic.test.ts

@@ -1241,6 +1241,14 @@ describe('errors', () => {
 
     await page.close()
   })
+
+  it('should allow catching errors within error boundaries', async () => {
+    const { page } = await renderPage('/error/error-boundary')
+    await page.getByText('This is the error rendering')
+    await page.close()
+
+    await expectNoClientErrors('/error/error-boundary')
+  })
 })
 
 describe('navigate external', () => {

test/fixtures/basic/pages/error/error-boundary.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <NuxtErrorBoundary>
+      <template #default>
+        <MyBrokenComponent />
+      </template>
+      <template #error>
+        <p>This is the error rendering</p>
+      </template>
+    </NuxtErrorBoundary>
+  </div>
+</template>
+
+<script setup lang="ts">
+const MyBrokenComponent = defineComponent({
+  setup () {
+    onMounted(() => {
+      throw new Error('This is broken')
+    })
+
+    return () => h('div', 'This is a broken component')
+  },
+})
+</script>