17370845950

JavaScript无原生错误边界，React特有；浏览器用window.onerror、error事件捕获全局错误，unhandledrejection捕获未处理Promise拒绝，try...catch处理同步及await异步错误，Node.js用process.on兜底。

JavaScript 本身没有原生的“错误边界”（Error Boundary）概念——这是 React 框架中特有的机制，用于在组件层级捕获渲染时的 JavaScript 错误，防止整个应用崩溃。纯 JavaScript 运行环境（如浏览器控制台、Node.js）不支持组件级错误边界，但提供了多种错误捕获方式来应对不同场景。

全局错误捕获：window.onerror 和 window.addEventListener('error')

适用于捕获未被 try/catch 拦截的运行时错误（如脚本执行异常、资源加载失败）。

• window.onerror：可获取错误消息、脚本 URL、行号、列号和错误对象，返回 true 可阻止默认错误处理（如控制台输出）
• window.addEventListener('error')：更现代的方式，能捕获更多类型错误（如图片加载失败），但注意它不触发于 Promise 拒绝（需配合 unhandledrejection）
• 示例：// 捕获同步脚本错误
  window.onerror = (msg, url, line, col, error) => { console.error('全局错误:', msg, error); return true; };

异步错误捕获：Promise.reject + unhandledrejection

Promise 中抛出的错误不会触发 window.onerror，必须单独监听。

• window.addEventListener('unhandledrejection')：捕获未被 .catch() 处理的 Promise 拒绝
• 建议始终监听该事件并记录或上报，避免静默失败
• 示例：window.addEventListener('unhandledrejection', event => { console.warn('未处理的 Promise 错误:', event.reason); });

主动错误拦截：try...catch 和 finally

最常用、最可控的错误处理方式，适用于已知可能出错的同步或 async/await 代码块。

• try...catch 可捕获同步错误和 await 后的 Promise 拒绝（前提是 Promise 被 await）
• finally 块无论是否出错都会执行，适合清理资源（如关闭定时器、释放锁）
• 注意：try...catch 对普通 Promise 链中的 .then().catch() 无效，必须用 await 或链式 catch

Node.js 特有：process.on('uncaughtException') 和 process.on('unhandledRejection')

服务端环境下，未被捕获的错误可能导致进程退出，需主动兜底。

• process.on('uncaughtException')：捕获未被 try/catch 拦截的同步异常（如 throw new Error()）
• process.on('unhandledRejection')：对应浏览器的 unhandledrejection
• ⚠️ 注意：监听 uncaughtException 后不建议继续运行服务，应优雅退出或重启，避免状态不一致