如何捕获javascript错误_try-catch与全局监控怎么用？

try-catch仅捕获同步错误，异步错误需用promise.catch()、await+try-catch、unhandledrejection监听；全局监控需过滤跨域噪音并结合框架错误边界。

try-catch 只能捕获同步错误，异步代码里直接写没用

很多人以为把 setTimeout 或 fetch 包进 try 块就能抓到错误，其实不行。因为回调函数或 Promise 的执行时机在当前调用栈之外，try-catch 的作用域已经退出了。

• try { setTimeout(() => { throw new Error('boom') }, 0) } catch(e) { } —— 这个 catch 完全不会触发
• 想捕获 Promise 错误，必须用 .catch() 或 await 配合 try-catch（且该 try 必须包裹 await 表达式本身）
• 事件监听器里的错误（比如 button.addEventListener('click', () => { badFn() })）也逃逸出 try 范围，需单独处理

window.onerror 和 window.addEventListener(‘error’) 的区别

window.onerror 是老接口，只能拿到错误消息、脚本 URL、行号、列号和错误对象（部分浏览器支持），但对 Promise 拒绝默认不响应；而 window.addEventListener('error') 是更通用的捕获机制，但它主要捕获资源加载失败（如 ），不是 js 执行错误。

• 真正要覆盖未捕获的 JS 异常，得同时监听：window.addEventListener('error', handler)（针对资源）和 window.addEventListener('unhandledrejection', handler)（针对 Promise）
• window.onerror 返回 true 可阻止错误冒泡到控制台，但现代实践中更推荐用 addEventListener 方式，语义更清晰
• 注意：unhandledrejection 事件的 event.reason 才是实际错误对象，不是 event.error

全局错误监控必须过滤掉常见噪音

上线后发现 80% 的错误日志是“Script error.” 或来自 cdn、广告脚本、浏览器插件——这些无法获取堆栈，也没法修复，反而淹没真实问题。

• 检查 event.filename 或 error.stack 是否包含你自己的域名或构建产物路径（如 /Static/js/main.[a-z0-9]+.js）
• 对 unhandledrejection，先判断 event.reason instanceof Error，避免把字符串拒绝（如 Promise.reject('oops')）当成结构化错误上报
• 加个简单采样逻辑，比如只上报前 10% 的同类型错误，防止日志风暴：

  if (Math.random() > 0.1) return;

vue/react 应用里别只靠全局监听

框架有自己的错误边界机制，比纯全局监听更精准。比如 Vue 的 errorCaptured 钩子或 app.config.errorHandler，React 的 componentDidCatch 或 createRoot 的 onRecoverableError，它们能定位到组件层级，还能保留上下文状态。

立即学习“Java免费学习笔记（深入）”；

• 全局 error 监听不到组件内部 setup() 中的同步错误（Vue 3），必须靠 app.config.errorHandler
• React 18 后，服务端渲染时的 hydration 错误不会触发 window.onerror，得依赖 onRecoverableError
• 不要在 errorCaptured 或 componentDidCatch 里再抛错，否则会再次触发全局监听，形成循环

实际部署时，最易被忽略的是跨域脚本的错误信息屏蔽——只要第三方脚本没配 crossorigin="anonymous"，它的错误就只会报 “Script error.”，连行号都没有。这个限制由浏览器强制执行，任何 JS 逻辑都绕不过。