#Vue 异常处理

线上出 bug 了？你需要这套组合拳

Vue 项目里，错误处理主要分这几个层次：

#1. 全局错误捕获

在 main.ts 里配置：

app.config.errorHandler = (err, instance, info) => {
  // 组件渲染、生命周期、Watcher 里的错误都能抓到
  console.error("出错了:", err);
  uploadErrorLog(err, info); // 上报到监控平台
};

这个是兜底的，所有没被处理的错误都会跑到这里。

#2. 组件级错误处理

用 onErrorCaptured 钩子，可以捕获后代组件的错误：

<script setup>
import { onErrorCaptured } from "vue";

onErrorCaptured((err, instance, info) => {
  console.error("子组件错了:", err);
  // return false 会阻止错误继续往上冒泡
  return false;
});
</script>

#3. 路由和异步错误

#路由错误

router.onError((error) => {
  console.error("路由加载失败:", error);
});

#Promise 没 catch 的错误

Vue 的 errorHandler 抓不到 Promise reject 的错误，得用原生的事件监听：

window.addEventListener("unhandledrejection", (event) => {
  console.error("Promise .reject 没处理:", event.reason);
  // 记得上报！
});

#最佳实践

1. 上报监控：用 Sentry、LogRocket 这些工具，别光 console.log
2. 错误边界：顶层组件做个"系统繁忙"页面，出了错不至于白屏
3. try/catch：API 请求这些容易挂的操作，一定要包上 try/catch

搞定！记住这套组合拳：全局捕获 + 组件级捕获 + 路由 + promise + 监控上报。