Nuxt 3 全局服务器错误处理
Aug 27·1 min
AI 生成的摘要
本文介绍了在开发 Nuxt 3 应用时,如何使用 Nitro 插件实现全局服务器错误处理,特别是针对 API 路由的错误。全局错误处理的优势包括统一错误响应格式、简化错误处理逻辑、提高应用的可维护性和可靠性。文章提供了具体的实现代码,展示了如何通过 Nitro 插件捕获和处理全局服务器错误,同时不影响 Nuxt 的 Error Page 设置。
在开发 Nuxt 3 应用时,处理服务器端错误是非常重要的。本文将介绍如何使用 Nitro 插件来实现全局服务器错误处理,特别是针对 API 路由的错误。
为什么需要全局错误处理?
全局错误处理可以帮助我们:
- 统一处理各种类型的服务器错误
- 提供一致的错误响应格式
- 简化错误处理逻辑,避免在每个路由中重复编写错误处理代码
- 提高应用的可维护性和可靠性
实现方法
我们可以通过创建一个 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的设置