如何为index.html添加全局的错误捕获与提示：HTML前端监控-html教程-PHP中文网

window.onerror不捕获promise拒绝错误，因其仅监听js运行时同步及异步任务（如settimeout、事件回调）抛出的错误，而promise.reject未被处理时触发的是独立的unhandledrejection事件，由微任务队列派发，与onerror的错误机制完全隔离。

如何为index.html添加全局的错误捕获与提示：html前端监控

为什么 window.onerror 不捕获 Promise 拒绝错误

直接写 window.onerror = () => {...} 只能捕获同步脚本错误、资源加载失败（如 JS 文件 404）等，但对 Promise.reject() 或未 await 的异常完全无感——浏览器把这类错误归为“unhandledrejection”，需要单独监听。

实际场景中，一个 fetch 失败没 catch，或组件里 useEffect 中的异步逻辑抛错，用户界面卡住却无提示，就是漏掉了这个监听点。

必须同时注册 window.addEventListener('error') 和 window.addEventListener('unhandledrejection')
unhandledrejection 的 event.reason 可能是 Error 实例，也可能是字符串或普通对象，需做类型判断
在现代打包环境下（如 Vite / Webpack），source map 未部署时，error.filename 常是 bundle.js，行号也失真，别依赖它定位源码

如何用 alert() 做最小可行错误提示（仅开发/测试用）

上线前快速验证监控是否生效，最直白方式就是弹 alert()。但它会中断执行流、阻塞后续 JS，**绝不能用于生产环境**。

示例代码可直接粘贴到 index.html 的 <script></script> 标签内：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

window.addEventListener('error', event => {
  alert(`JS Error: ${event.message}\n@ ${event.filename}:${event.lineno}`);
});
window.addEventListener('unhandledrejection', event => {
  const reason = event.reason instanceof Error 
    ? event.reason.message 
    : String(event.reason);
  alert(`Promise Rejected: ${reason}`);
});

注意：两次 alert() 会连续弹出，可能被浏览器拦截（尤其 Safari）
若页面已引入框架（如 React），event.filename 多数时候是空字符串，得靠 event.error?.stack 辅助判断
这种写法不兼容 IE，但 IE 已无实际维护价值，无需降级

生产环境该用什么方式上报错误

真实项目里，错误要发到后端聚合服务（如 Sentry、LogRocket，或自建接口），而不是弹窗或 console。

关键约束条件：fetch 上报本身不能引发新错误，且需避免重复上报（比如一个错误触发 error + unhandledrejection 两次）。

上报前加防抖：用 setTimeout 延迟 100ms，合并短时间内的同类错误
用 navigator.sendBeacon() 替代 fetch，确保页面卸载（如用户关闭标签页）时仍能发出请求
上报 payload 至少包含：event.type（'error' / 'unhandledrejection'）、event.message、event.stack（如有）、location.href、navigator.userAgent
禁止上报 event.error 整个对象——它含函数引用，JSON.stringify 会静默丢弃，且可能泄漏敏感上下文