fix(nuxt): call app:error in SSR before rendering error page (#20511)

nuxt · Apr 26, 2023 · 197de3e · 197de3e
1 parent dd0d13d
commit 197de3e
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 7 deletions.
diff --git a/docs/1.getting-started/8.error-handling.md b/docs/1.getting-started/8.error-handling.md
@@ -41,6 +41,7 @@ This includes:
 
 * running Nuxt plugins
 * processing `app:created` and `app:beforeMount` hooks
+* rendering your Vue app to HTML (on the server)
 * mounting the app (on client-side), though you should handle this case with `onErrorCaptured` or with `vue:error`
 * processing the `app:mounted` hook
 

diff --git a/packages/nuxt/src/app/composables/cookie.ts b/packages/nuxt/src/app/composables/cookie.ts
@@ -48,11 +48,12 @@ export function useCookie <T = string | null | undefined> (name: string, _opts?:
       }
     }
     const unhook = nuxtApp.hooks.hookOnce('app:rendered', writeFinalCookieValue)
-    nuxtApp.hooks.hookOnce('app:redirected', () => {
-      // don't write cookie subsequently when app:rendered is called
-      unhook()
+    const writeAndUnhook = () => {
+      unhook() // don't write cookie subsequently when app:rendered is called
       return writeFinalCookieValue()
-    })
+    }
+    nuxtApp.hooks.hookOnce('app:error', writeAndUnhook)
+    nuxtApp.hooks.hookOnce('app:redirected', writeAndUnhook)
   }
 
   return cookie as CookieRef<T>

diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts
@@ -244,9 +244,11 @@ export default defineRenderHandler(async (event) => {
     writeEarlyHints(event, link)
   }
 
-  const _rendered = await renderer.renderToString(ssrContext).catch((error) => {
+  const _rendered = await renderer.renderToString(ssrContext).catch(async (error) => {
     // Use explicitly thrown error in preference to subsequent rendering errors
-    throw (!ssrError && ssrContext.payload?.error) || error
+    const _err = (!ssrError && ssrContext.payload?.error) || error
+    await ssrContext.nuxt?.hooks.callHook('app:error', _err)
+    throw _err
   })
   await ssrContext.nuxt?.hooks.callHook('app:rendered', { ssrContext })
 

diff --git a/test/basic.test.ts b/test/basic.test.ts
@@ -571,6 +571,7 @@ describe('errors', () => {
 
   it('should render a HTML error page', async () => {
     const res = await fetch('/error')
+    expect(res.headers.get('Set-Cookie')).toBe('some-error=was%20set; Path=/')
     expect(await res.text()).toContain('This is a custom error')
   })
 

diff --git a/test/bundle.test.ts b/test/bundle.test.ts
@@ -45,7 +45,7 @@ describe.skipIf(isWindows || process.env.TEST_BUILDER === 'webpack' || process.e
 
   it('default server bundle size', async () => {
     stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect(roundToKilobytes(stats.server.totalBytes)).toMatchInlineSnapshot('"67.2k"')
+    expect(roundToKilobytes(stats.server.totalBytes)).toMatchInlineSnapshot('"67.3k"')
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"2657k"')

diff --git a/test/fixtures/basic/pages/error.vue b/test/fixtures/basic/pages/error.vue
@@ -11,6 +11,7 @@ const { data, error } = await useAsyncData(() => {
 }, { server: true })
 
 if (error.value) {
+  useCookie('some-error').value = 'was set'
   throw createError({ statusCode: 422, fatal: true, statusMessage: 'This is a custom error' })
 }