Nuxt 3 全局服务器错误处理

Aug 27·1 min
AI 生成的摘要
本文介绍了在开发 Nuxt 3 应用时，如何使用 Nitro 插件实现全局服务器错误处理，特别是针对 API 路由的错误。全局错误处理的优势包括统一错误响应格式、简化错误处理逻辑、提高应用的可维护性和可靠性。文章提供了具体的实现代码，展示了如何通过 Nitro 插件捕获和处理全局服务器错误，同时不影响 Nuxt 的 Error Page 设置。

在开发 Nuxt 3 应用时，处理服务器端错误是非常重要的。本文将介绍如何使用 Nitro 插件来实现全局服务器错误处理，特别是针对 API 路由的错误。

为什么需要全局错误处理？

全局错误处理可以帮助我们：

  1. 统一处理各种类型的服务器错误
  2. 提供一致的错误响应格式
  3. 简化错误处理逻辑，避免在每个路由中重复编写错误处理代码
  4. 提高应用的可维护性和可靠性

实现方法

我们可以通过创建一个 Nitro 插件来捕获和处理全局服务器错误。以下是实现代码：

server/plugins/error.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook("error", (error, { event }) => {
    if (event && event?.node?.req?.url?.startsWith("/api")) {
      setResponseHeader(event, "Content-Type", "application/json");
      // new Error or H3Error(createError)
      const isCommonError = error.cause instanceof Error;
      const errorObj = isCommonError
        ? {
            statusCode: event.node.res.statusCode,
            message: error.message,
          }
        : error.cause;
      return send(event, JSON.stringify(errorObj));
    }
  });
});

这种实现方式，不会影响 createError 抛出的错误，也不会影响Nuxt的Error Page的设置

参考资料

nitro-app-hooks-runtime-server-side

cd ..