Vue应用稳定需分层捕获异常:1. Vue.config.errorHandler捕获组件内未兜底运行时错误;2. window.onerror与unhandledrejection补全全局JS及Promise错误;3. errorCaptured实现组件级隔离降级;4. 资源与路由错误需单独监听处理。

Vue 应用要保障稳定,关键在于分层捕获未处理的异常——不能只靠一个钩子,而是同步、异步、资源、路由等各类错误都要有对应防线。核心不是“能不能捕获”,而是“在哪一层捕获最有效、不遗漏”。
Vue.config.errorHandler:捕获组件内未兜底的运行时错误
这是 Vue 自身提供的第一道防线,专门拦截组件渲染、响应式更新、生命周期钩子中抛出且未被 try-catch 或 errorCaptured 拦截的错误。
- 它能拿到错误对象
err、出错组件实例vm(可查组件名、props 等)、错误来源信息info(如"render function"或"mounted hook") - 开发时建议保留控制台输出,生产环境应隐藏敏感字段(如堆栈中的 token、用户数据),并上报至监控服务
- 注意:它不捕获模板语法错误、
window.onerror范围外的 JS 错误、Promise 拒绝、资源加载失败
window.onerror + unhandledrejection:补全全局 JS 和异步错误
Vue.config.errorHandler 只管 Vue 体系内的错误,而浏览器原生错误必须靠更底层的监听:
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
-
window.onerror:捕获同步脚本错误(如undefined.xxx)、setTimeout中抛出的异常,参数含行号、列号、文件路径,便于快速定位 -
unhandledrejection:专门监听未catch的 Promise 拒绝(比如 API 请求失败但没写.catch()),这是现代前端最常见的漏网错误源 - 两者需配合使用,缺一不可;建议统一格式化后与 Vue 错误共用同一上报通道
errorCaptured 钩子:实现组件级错误隔离与降级
它不是用来“兜底所有错误”,而是用于父组件拦截子组件异常,避免错误冒泡导致整个视图崩溃:
立即学习“前端免费学习笔记(深入)”;
- 在父组件中定义
errorCaptured(err, vm, info),返回false可阻止错误继续向上传播 - 适合做局部 UI 降级,例如子组件报错时,父组件隐藏该区域、显示“内容加载失败”提示
- 常配合
v-if或插槽 fallback 使用,比全局弹窗更轻量、体验更可控
资源加载与路由错误:别让 404 或白屏拖垮体验
图片、JS、CSS 加载失败,或路由跳转中途出错,虽不抛 JS 异常,但直接影响可用性:
- 对
<img alt="Vue 错误事件怎么捕获未处理的异常事件保障应用稳定" >、<script></script>等标签加@error或监听window.addEventListener('error', e => { if (e.target !== window) {...} }) - Vue Router 提供
router.onError()监听导航异常(如路由组件异步加载失败),可统一跳转到 /500 页面或重试逻辑 - 这类错误往往不触发
errorHandler,必须单独覆盖

















