Nuxt 3 SSR全局错误处理：仅404显示error.vue，其他错误弹模态框

问题分析 #

你的代码核心问题是app:error钩子调用时机太晚——当该钩子触发时，Nuxt已经准备渲染error.vue页面，此时调用clearError()无法阻止页面跳转。另外，默认的clearError()会尝试重定向，需要显式配置阻止重定向行为。

修正后的全局错误处理插件代码 #

替换你现有的./plugins/errorHandling.ts为以下代码：

export default defineNuxtPlugin((nuxtApp) => {
  const storeModals = useStoreModals();

  // Vue全局错误捕获：在错误传递给Nuxt之前拦截处理
  nuxtApp.vueApp.config.errorHandler = (err: any) => {
    const nuxtError = err as NuxtError<unknown>;

    // 404错误交给Nuxt默认处理，显示error.vue
    if (nuxtError?.statusCode === 404) {
      return;
    }

    console.error('全局捕获错误:', nuxtError);
    storeModals.alert500(); // 弹出错误模态框

    // 阻止错误继续向上传播，避免Nuxt触发error.vue渲染
  };

  // 兜底处理Nuxt应用级错误（比如服务器端未捕获的错误）
  nuxtApp.hook('app:error', (error: NuxtError<unknown> | null | undefined) => {
    if (!error || error.statusCode === 404) return;

    console.error('应用级兜底错误:', error);
    // 仅在客户端弹出模态框，避免服务器端无意义调用
    if (process.client) {
      storeModals.alert500();
      // 清除错误并阻止重定向到error.vue
      clearError({ redirect: false });
    }
  });
});

关键注意点 #

1. Vue全局错误处理器优先级更高：通过vueApp.config.errorHandler可以在错误被Nuxt处理前拦截，直接阻止错误触发error.vue渲染。
2. clearError需配置redirect: false：默认情况下clearError()会尝试重定向到首页，加上这个参数才能保持当前页面并清除错误状态。
3. 组件抛出错误时注意fatal参数：如果通过createError抛出错误，不要设置fatal: true（这会强制Nuxt渲染error.vue），示例：

   throw createError({
     statusCode: 500,
     message: '请求处理失败',
     fatal: false // 允许全局处理器接管错误
   });
   

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