JavaScript错误捕获方式有哪些

JavaScript虽无原生错误边界（这是React专属机制），但在不同运行环境提供了多层次、场景化的错误捕获能力：浏览器中可通过window.onerror和error事件捕获全局同步错误与资源加载异常，用unhandledrejection监听未处理的Promise拒绝，而try...catch则精准控制同步及await异步代码的错误拦截；Node.js则依赖process.on('uncaughtException')和'unhandledRejection'实现服务端兜底防护。掌握这些方法，不仅能避免静默失败、提升调试效率，更能构建更健壮、可监控的前端与后端应用——无论错误来自哪一层，你都能稳稳接住。

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 后不建议继续运行服务，应优雅退出或重启，避免状态不一致

今天关于《JavaScript错误捕获方式有哪些》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！