Nuxt 3全局错误处理器未捕获网络错误，求排查方案

问题根源 #

• nuxtApp.vueApp.config.errorHandler仅负责捕获Vue组件生命周期内的运行时错误，而useAsyncData中抛出的createError属于Nuxt框架层面的异步数据/页面错误，不会被Vue的错误处理器捕获。
• 你的useAsyncData写法不符合API规范：第一个参数必须是唯一缓存key，第二个参数需是返回Promise的函数，直接传入$fetch结果会导致错误处理逻辑异常。

修正步骤 #

1. 修复useAsyncData的写法 #

确保参数格式正确，同时无需手动JSON.stringify请求体（$fetch会自动处理）：

try {
  const response = await useAsyncData(
    'login', // 唯一缓存key
    () => $fetch(`${baseUrl}/login`, {
      method: "POST",
      body: {
        username: username.value,
        password: password.value,
      },
    }),
  );
  data = response.data;
} catch (error) {
  throw createError({
    statusCode: error.statusCode || 500,
    message: "登录过程中发生错误",
    cause: error,
  });
}

2. 扩展Nuxt插件的错误处理逻辑 #

在插件中同时监听Nuxt框架错误钩子，覆盖Vue组件错误和Nuxt层面的错误：

export default defineNuxtPlugin((nuxtApp) => {
  // 处理Vue组件运行时错误
  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    console.log("Vue组件错误处理器:", error, instance, info);
    // 可添加错误上报、弹窗提示等逻辑
  };

  // 处理Nuxt框架层面的错误（包括createError、页面加载错误等）
  nuxtApp.hook('app:error', (error) => {
    console.log("Nuxt全局错误处理器:", error);
    // 统一处理错误逻辑
  });

  // 捕获客户端未处理的Promise拒绝（可选）
  if (process.client) {
    window.addEventListener('unhandledrejection', (event) => {
      console.log("未处理的Promise错误:", event.reason);
      event.preventDefault(); // 阻止默认控制台报错
    });
  }
});

3. 可选：配置全局错误页面 #

在项目根目录创建~/error.vue，自定义错误展示页面的同时也能处理错误：

<template>
  <div class="error-page">
    <h1>出错了</h1>
    <p>{{ error.message }}</p>
    <button @click="clearError">返回首页</button>
  </div>
</template>

<script setup>
const error = useError();
const clearError = useClearError();
</script>

验证 #

修改后，登录API出错时，nuxtApp.hook('app:error')会捕获到你抛出的createError实例，控制台会打印完整错误信息；Vue组件内的错误也会被errorHandler处理，实现全场景的全局错误捕获。

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