javascript错误边界是分层拦截机制:1.同步代码用try-catch精准捕获局部异常;2.全局同步错误由window.onerror兜底;3.未处理promise拒绝由onunhandledrejection捕获;三者协同实现全链路异常管控。

JavaScript 中的“错误边界”不是单一 API,而是一套分层协作的拦截机制——它靠 局部捕获 + 全局监听 + 异步专项处理 三者配合,才能真正兜住运行时异常。
同步代码用 try-catch 精准拦截
这是最直接、最可控的一层。只包裹真正可能抛错的最小代码块,比如解析不可信输入、调用第三方方法、访问可能为空的对象属性:
- JSON.parse() 前必须加 try-catch,否则非法字符串直接中断执行
- localStorage.setItem() 可能因存储满而抛 QuotaExceededError,需捕获并降级处理
- DOM 操作前用 if (el) 判断不如 try-catch + fallback 更稳妥(尤其动态插入场景)
注意:它对异步回调里的错误无效,比如 setTimeout(() => { foo(); }, 100) 中的 ReferenceError,不会被外层 try-catch 捕获。
全局同步错误靠 window.onerror 拦截
当 try-catch 漏掉或没覆盖到的地方发生运行时错误(如脚本执行异常、内联事件处理器出错),window.onerror 就是最后一道同步防线:
- 能拿到错误消息、脚本 URL、行号、列号和 error 对象,适合结构化上报
- 可捕获 ReferenceError、TypeError、RangeError 等运行时错误,但不包括 SyntaxError(编译期错误)
- 返回 true 可阻止浏览器默认错误打印,避免污染控制台
未处理的 Promise 拒绝用 onunhandledrejection
Promise.reject() 或 async 函数中 throw 的错误,若没被 .catch() 或 await+trycatch 捕获,就会触发此事件:
- 常见漏捕场景:忘记 await、.then() 后没接 .catch()、事件回调里抛出 Promise 错误
- 它和 window.onerror 是互补关系,不能互相替代
- 建议在此处统一记录堆栈、当前路由、用户行为 ID,便于定位问题源头
错误边界 ≠ 兜底,而是有策略的响应
拦截只是第一步,关键在后续动作:
- 对用户:展示轻量提示(如 Toast)、回退到安全状态(如清空表单、隐藏加载态)
- 对开发:上报结构化错误(含 code、timestamp、环境信息),而非只传 message
- 对系统:区分错误类型决定是否重试(NetworkError 可重试,ValidationError 不应重试)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











