fix(nuxt): don't override payload error if it is present (#7290)

packages/nuxt/src/core/runtime/nitro/renderer.ts

@@ -124,7 +124,8 @@ export default defineRenderHandler(async (event) => {
   const renderer = (process.env.NUXT_NO_SSR || ssrContext.noSSR) ? await getSPARenderer() : await getSSRRenderer()
   const _rendered = await renderer.renderToString(ssrContext).catch((err) => {
     if (!ssrError) {
-      throw err
+      // Use explicitly thrown error in preference to subsequent rendering errors
+      throw ssrContext.payload?.error || err
     }
   })
   await ssrContext.nuxt?.hooks.callHook('app:rendered', { ssrContext })

test/basic.test.ts

@@ -202,30 +202,6 @@ describe('navigate external', () => {
   })
 })
 
-describe('errors', () => {
-  it('should render a JSON error page', async () => {
-    const res = await fetch('/error', {
-      headers: {
-        accept: 'application/json'
-      }
-    })
-    expect(res.status).toBe(500)
-    const error = await res.json()
-    delete error.stack
-    expect(error).toMatchObject({
-      message: 'This is a custom error',
-      statusCode: 500,
-      statusMessage: 'Internal Server Error',
-      url: '/error'
-    })
-  })
-
-  it('should render a HTML error page', async () => {
-    const res = await fetch('/error')
-    expect(await res.text()).toContain('This is a custom error')
-  })
-})
-
 describe('middlewares', () => {
   it('should redirect to index with global middleware', async () => {
     const html = await $fetch('/redirect/')
@@ -592,3 +568,28 @@ describe('useAsyncData', () => {
     await expectNoClientErrors('/useAsyncData/promise-all')
   })
 })
+
+// TODO: Move back up after https://github.com/vuejs/core/issues/6110 is resolved
+describe('errors', () => {
+  it('should render a JSON error page', async () => {
+    const res = await fetch('/error', {
+      headers: {
+        accept: 'application/json'
+      }
+    })
+    expect(res.status).toBe(422)
+    const error = await res.json()
+    delete error.stack
+    expect(error).toMatchObject({
+      message: 'This is a custom error',
+      statusCode: 422,
+      statusMessage: 'This is a custom error',
+      url: '/error'
+    })
+  })
+
+  it('should render a HTML error page', async () => {
+    const res = await fetch('/error')
+    expect(await res.text()).toContain('This is a custom error')
+  })
+})

test/fixtures/basic/pages/error.vue

@@ -1,7 +1,18 @@
 <template>
-  <div />
+  <div>
+    {{ state.attr }}
+    {{ data.something }}
+  </div>
 </template>
 
 <script setup>
-throw new Error('This is a custom error')
+const { data, error } = await useAsyncData(() => {
+  throw new Error('some error')
+}, { server: true })
+
+if (error.value) {
+  throw createError({ statusCode: 422, fatal: true, statusMessage: 'This is a custom error' })
+}
+
+const state = ref({ attr: 'Hello World' })
 </script>