如何在 Nuxt 3 中使用全局错误处理程序捕获网络错误

Question

我正在尝试登录 API，并希望如果存在 任何** 类型的错误，它们应该由插件中定义的全局错误处理程序捕获。

我在 Vue+Nuxt 3 中的登录代码如下所示 - 所以这里我抛出一个自定义错误，以便它到达全局处理程序

try {
    const response = await useAsyncData(
      $fetch(`${baseUrl}/login`, {
        method: "POST",
        body: JSON.stringify({
          username: username.value,
          password: password.value,
        }),
      }),
    );
    data = response.data;
  } catch (error) {
    // console.error("An error occurred:", error);
    throw createError({
      statusCode: 500,
      message: "An error occurred while trying to log in.sss",
      cause: error,
    });
  }
};

但是我看到控制台中的错误是-

An error occurred while trying to log in.sss

我的插件看起来像这样 -

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    // handle error, e.g. report to a service
    console.log("in nuxtApp.vueApp error handler", error, instance, info);
  };
});

我希望它可以用于应用程序出现的任何类型的错误，而不仅仅是 vue+nuxt3 特定的错误。

我在这里做错了什么？任何指导都将受到欢迎。

Answer 1

我按照 Nuxt 网站上提前错误处理部分提到的官方示例进行操作：https://nuxt.com/docs/examples/advanced/error-handling

所以，现在我不再使用

createError

，而是在 catch bock 中使用简单的

throw Error()

或

throw new Error()

，如下所示，这按预期工作。

try {
    const response = await useAsyncData(
      $fetch(`${baseUrl}/login`, {
        method: "POST",
        body: JSON.stringify({
          username: username.value,
          password: password.value,
        }),
      }).catch((error) => {}),
    );
    data = response.data;
  } catch (error) {
    throw Error("manually triggered error");
  }