fix(nuxt): clear errors after navigation (nuxt#4839)

husayt · May 6, 2022 · 27d6736 · 27d6736
1 parent 3e57982
commit 27d6736
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/packages/nuxt/src/app/components/nuxt-error-page.vue b/packages/nuxt/src/app/components/nuxt-error-page.vue
@@ -34,7 +34,7 @@ const stacktrace = (error.stack || '')
 const statusCode = String(error.statusCode || 500)
 const is404 = statusCode === '404'
 
-const statusMessage = error.statusMessage ?? is404 ? 'Page Not Found' : 'Internal Server Error'
+const statusMessage = error.statusMessage ?? (is404 ? 'Page Not Found' : 'Internal Server Error')
 const description = error.message || error.toString()
 const stack = process.dev && !is404 ? error.description || `<pre>${stacktrace}</pre>` : undefined
 

diff --git a/packages/nuxt/src/app/plugins/router.ts b/packages/nuxt/src/app/plugins/router.ts
@@ -107,11 +107,6 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>((nuxtApp) => {
       // Resolve route
       const to = getRouteFromPath(url)
 
-      if (process.client && !nuxtApp.isHydrating) {
-      // Clear any existing errors
-        await callWithNuxt(nuxtApp, clearError)
-      }
-
       // Run beforeEach hooks
       for (const middleware of hooks['navigate:before']) {
         const result = await middleware(to, route)
@@ -128,6 +123,10 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>((nuxtApp) => {
       Object.assign(route, to)
       if (process.client) {
         window.history[replace ? 'replaceState' : 'pushState']({}, '', url)
+        if (!nuxtApp.isHydrating) {
+          // Clear any existing errors
+          await callWithNuxt(nuxtApp, clearError)
+        }
       }
       // Run afterEach hooks
       for (const middleware of hooks['navigate:after']) {

diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/router.ts
@@ -9,7 +9,7 @@ import {
 import { createError } from 'h3'
 import { withoutBase } from 'ufo'
 import NuxtPage from './page'
-import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig, throwError, clearError, navigateTo } from '#app'
+import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig, throwError, clearError, navigateTo, useError } from '#app'
 // @ts-ignore
 import routes from '#build/routes'
 // @ts-ignore
@@ -107,7 +107,12 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     named: {}
   }
 
-  router.afterEach((to) => {
+  const error = useError()
+  router.afterEach(async (to) => {
+    if (process.client && !nuxtApp.isHydrating && error.value) {
+      // Clear any existing errors
+      await callWithNuxt(nuxtApp, clearError)
+    }
     if (to.matched.length === 0) {
       callWithNuxt(nuxtApp, throwError, [createError({
         statusCode: 404,
@@ -147,11 +152,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       }
     }
 
-    if (process.client && !nuxtApp.isHydrating) {
-      // Clear any existing errors
-      await callWithNuxt(nuxtApp, clearError)
-    }
-
     for (const entry of middlewareEntries) {
       const middleware = typeof entry === 'string' ? nuxtApp._middleware.named[entry] || await namedMiddleware[entry]?.().then(r => r.default || r) : entry