0Pricing
Vue Academy · 课时

使用 app.config.errorHandler 处理全局错误

全局错误处理器、将日志记录到 Sentry/Datadog，以及根据环境显示错误

使用 app.config.errorHandler 处理全局错误 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

全局错误处理器

Vue 提供了 app.config.errorHandler，这是一个可以捕获应用中任何位置、且未在本地处理的错误的单一函数。它是您的最后一道防线。

处理器签名

它接收与 onErrorCaptured 相同的三个参数：错误、组件实例和信息字符串。

app.config.errorHandler = (err, instance, info) => {
  // global handling
};

进行设置

在入口文件中、挂载之前，在应用实例上配置它。

const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
  console.error(err, info);
};
app.mount("#app");

捕获未处理的错误

它可以捕获整个应用中组件渲染、生命周期钩子、侦听器和事件处理器产生的错误，包括那些越过本地 onErrorCaptured 钩子继续传播的错误。

在生产环境中报告到 Sentry

在生产环境中，将错误转发到 Sentry 之类的监控服务，这样您就能了解用户遇到的故障。

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) {
    Sentry.captureException(err, { extra: { info } });
  }
};

开发环境中的详细日志记录

在开发过程中，将更丰富的详细信息记录到控制台，以便快速调试。

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.DEV) {
    console.group("Vue error");
    console.error(err);
    console.log("info:", info, "instance:", instance);
    console.groupEnd();
  }
};

根据环境分支处理

健壮的处理器会在一个函数中同时完成两件事：在生产环境中报告错误，在开发环境中记录详细日志。

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) Sentry.captureException(err);
  else console.error("[Vue]", err, info);
};

异步错误

全局处理器也会捕获异步生命周期钩子和侦听器内部抛出的错误。对于 Vue 外部原始的未处理 Promise 拒绝，也应添加一个 window 侦听器。

window.addEventListener("unhandledrejection", (e) => {
  Sentry.captureException(e.reason);
});

与边界的关系

本地边界和 onErrorCaptured 会在错误发生附近处理并控制错误；全局处理器则是所有逃逸错误的安全网。请结合使用二者。

不要静默吞掉错误

避免使用隐藏错误的空处理器。至少要始终记录或报告错误——静默失败会让错误变得不可见，也极难追踪。

添加上下文

在报告中加入当前路由、用户 ID 或应用版本，这样可以更快地排查生产环境中的错误。

Sentry.captureException(err, {
  tags: { info },
  user: { id: currentUserId }
});

快速检查

app.config.errorHandler 处理什么？

回顾

您了解到，app.config.errorHandler = (err, instance, info) => {} 是全局的兜底处理器：在生产环境中将错误报告到 Sentry，在开发过程中记录详细日志，并与本地边界配合，实现分层且具有韧性的错误处理。

常见问题解答

「使用 app.config.errorHandler 处理全局错误」课时是免费的吗？

是的 — 「使用 app.config.errorHandler 处理全局错误」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「使用 app.config.errorHandler 处理全局错误」这节课中我会学到什么？

全局错误处理器、将日志记录到 Sentry/Datadog，以及根据环境显示错误 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「使用 app.config.errorHandler 处理全局错误」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. onErrorCaptured 生命周期钩子
  2. 错误边界组件
  3. 使用 app.config.errorHandler 处理全局错误
  4. 组合式函数中的异步错误处理
← 返回 Vue Academy