Nuxt客户端错误仅展示错误布局不跳转错误页面如何解决

问题说明 #

当Nuxt客户端运行时发生未捕获错误（比如created生命周期钩子中调用未定义方法ddd()）时，控制台会抛出如下错误：

client.js:103 ReferenceError: ddd is not defined

默认只会渲染局部错误布局，不会自动跳转专属错误路由，可通过以下方案实现全场景错误自动跳转。

实现步骤 #

• 配置全局错误捕获插件 #

Nuxt3可直接在项目下新建plugins/error.global.ts文件，Nuxt2新建plugins/error.js文件，代码如下：

Nuxt3 代码示例

// plugins/error.global.ts
export default defineNuxtPlugin((nuxtApp) => {
  // 捕获Vue层运行时错误
  nuxtApp.vueApp.config.errorHandler = (err) => {
    console.error('全局捕获Vue错误：', err)
    navigateTo('/error', { replace: true })
  }

  if (process.client) {
    // 捕获window层面普通JS错误
    window.addEventListener('error', (event) => {
      event.preventDefault()
      console.error('全局JS错误：', event.error)
      navigateTo('/error', { replace: true })
    })

    // 捕获未处理的异步Promise错误
    window.addEventListener('unhandledrejection', (event) => {
      event.preventDefault()
      console.error('未处理异步错误：', event.reason)
      navigateTo('/error', { replace: true })
    })
  }
})

Nuxt3中*.global.ts后缀的插件会自动全局注册，无需额外配置。

Nuxt2 代码示例

// plugins/error.js
import Vue from 'vue'

export default ({ app, redirect }) => {
  if (process.client) {
    // 捕获Vue层运行时错误
    Vue.config.errorHandler = (err) => {
      console.error('全局Vue错误：', err)
      redirect('/error')
    }

    // 捕获window层面普通JS错误
    window.addEventListener('error', (event) => {
      event.preventDefault()
      console.error('全局JS错误：', event.error)
      redirect('/error')
    })

    // 捕获未处理的异步Promise错误
    window.addEventListener('unhandledrejection', (event) => {
      event.preventDefault()
      console.error('未处理异步错误：', event.reason)
      redirect('/error')
    })
  }
}

Nuxt2需要在nuxt.config.js中注册插件：

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/error.js'
  ]
}

• 确认错误路由存在 #

确保项目pages目录下存在error.vue文件（Nuxt3也支持放在项目根目录下的error.vue），作为跳转后的错误展示页，可自行自定义UI和错误提示逻辑。

注意事项 #

该配置会覆盖Nuxt默认的错误处理逻辑，所有未捕获的客户端错误都会触发跳转，如果需要保留部分场景的局部错误布局展示，可在全局错误钩子中添加判断逻辑，过滤不需要跳转的错误类型。

内容的提问来源于stack exchange，提问作者mr_robot