Nuxt自定义错误页无法捕获未处理服务端异常加载问题

核心原因 #

服务端渲染时的致命错误（比如组件导入失败）会直接触发Nuxt的兜底错误处理，默认不会走自定义layouts/error.vue——因为此时应用实例可能已无法正常初始化。

通用解决方法 #

1. 配置Nuxt错误处理钩子 #

在nuxt.config.js中通过钩子捕获服务端错误，手动引导至自定义错误页：

// nuxt.config.js
export default {
  hooks: {
    'render:error'(err) {
      err.fatal = false // 标记为非致命错误，允许加载自定义错误页
      err.statusCode = 500
    }
  }
}

2. 包装动态导入逻辑 #

给动态导入添加错误捕获，避免服务端抛出未处理异常：

<script>
export default {
  computed: {
    component() {
      return () => import(`./non-existent-component.vue`).catch(err => {
        console.error('组件导入失败:', err)
        // 返回兜底提示组件，或直接触发错误页逻辑
        return import('./components/ErrorFallback.vue')
      })
    },
  }
}
</script>

3. 确保自定义错误页服务端可正常渲染 #

避免layouts/error.vue自身依赖可能出错的资源，简化服务端渲染逻辑：

<!-- layouts/error.vue -->
<template>
  <div class="error-page">
    <h1>自定义错误页 {{ error.statusCode }}</h1>
    <p>{{ error.message || '服务器发生未知错误' }}</p>
  </div>
</template>

<script>
export default {
  props: ['error'],
  asyncData({ error }) {
    return { error }
  }
}
</script>

4. 生产环境强制替换兜底错误页 #

在nuxt.config.js中自定义服务端错误响应逻辑，直接返回自定义错误页内容：

// nuxt.config.js
export default {
  server: {
    errorHandler: (err, req, res) => {
      res.statusCode = err.statusCode || 500
      res.end(`
        <!DOCTYPE html>
        <html>
          <head><title>服务器错误</title></head>
          <body style="text-align:center; margin-top:100px;">
            <h1>自定义500错误页</h1>
            <p>抱歉，服务器出现问题，请稍后再试</p>
          </body>
        </html>
      `)
    }
  }
}

内容的提问来源于stack exchange，提问作者d-_-b