HTML怎么做错误监控_html window.onerror错误捕获做法【小技巧】

HTML怎么做错误监控_html window.onerror错误捕获做法【小技巧】的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

window.onerror仅捕获同步JS运行时错误，无法捕获Promise拒绝、资源加载失败、跨域脚本错误及部分异步错误；需配合unhandledrejection、document.addEventListener('error', ..., true)等事件补全，并通过crossorigin与CORS头获取真实堆栈。

window.onerror 是前端最基础、最轻量的全局 JS 错误捕获机制，但它能捕获的错误类型有限，且在现代浏览器中行为不一致——直接用它做“完整错误监控”会漏掉大量关键错误。

哪些错误 window.onerror 捕获不到

它只捕获同步执行的 JS 运行时错误（如 ReferenceError、TypeError），以下几类完全无法触发：

1. Promise 拒绝未处理（unhandledrejection 事件才管）
2. 静态资源加载失败（<script>、<img> 的 onerror 属性或 error 事件）
3. 跨域脚本中的错误（会变成 Script error.，无堆栈）
4. 异步回调里的错误（如 setTimeout 中抛出的错误，在部分旧版 Chrome 中可能丢失堆栈）

怎么让 window.onerror 拿到真实堆栈（尤其是跨域场景）

核心是服务端配合：所有外链 JS 资源必须返回 Access-Control-Allow-Origin: *（或指定域名），且 HTML 中引入时加上 crossorigin 属性：

<script src="https://cdn.example.com/app.js" crossorigin></script>

否则即使加了 window.onerror，你也只能收到模糊的 Script error.，连文件名和行号都没有。

1. 注意：crossorigin="anonymous" 和 crossorigin 效果相同；crossorigin="use-credentials" 需服务端额外支持 cookie
2. CDN 或构建工具（如 Webpack/Vite）需确保输出的 JS 响应头含 Access-Control-Allow-Origin
3. 本地开发时 file:// 协议下 crossorigin 无效，建议用 http-server 或 live-server 启服务测试

如何补全 window.onerror 漏掉的关键错误类型

必须组合监听其他原生事件，形成最小可行监控闭环：

1. 捕获 Promise 错误：window.addEventListener('unhandledrejection', e => { /* e.reason 是 reject 值 */ })
2. 捕获资源加载失败：document.addEventListener('error', e => { if (e.target && 'src' in e.target) { /* 图片/脚本加载失败 */ } }, true)
3. 捕获 Vue/React 等框架的错误边界外溢（如 Vue 3 的 app.config.errorHandler）需单独注册，不能依赖 window.onerror

注意：document.error 不是标准事件，必须用 document.addEventListener('error', ...) 并开启捕获阶段（第三个参数设为 true），否则子元素抛出的 error 事件可能被拦截不到。

实际部署时最容易被忽略的兼容性细节

window.onerror 的参数签名在不同浏览器中不一致，尤其老版本 IE 和 Safari：

1. Chrome/Firefox/Edge（现代）：接收 5 个参数 —— (message, source, lineno, colno, error)
2. IE10–11 和部分 Safari：只传前 3 个，colno 和 error 为 undefined
3. 所以不要直接解构写成 function(message, src, line, col, err) { ... }，应判断 arguments.length 或用默认值兜底

另外，Safari 对 error 参数的 stack 字段支持较晚（iOS 13+ 才稳定），低版本里得靠 message + source + lineno 拼凑线索。