通过全局事件捕获JavaScript运行时错误、资源加载失败及未处理的Promise异常；2. 上报数据包含错误详情、设备信息、网络状态等上下文，避免敏感信息；3. 使用navigator.sendBeacon确保上报可靠性，降级使用fetch并支持keepalive；4. 引入采样、去重与节流机制控制上报频率，平衡监控精度与性能开销。
前端错误监控和上报系统的核心目标是捕获运行时异常、收集上下文信息，并将数据可靠地发送到服务端，以便快速定位和修复问题。在JavaScript中，设计一个完整的错误监控体系需要覆盖多种错误类型，并兼顾性能与用户体验。
1. 全局错误捕获
通过监听全局事件，可以捕获未处理的异常和资源加载错误。
关键接口：
window.onerror：捕获 JavaScript 运行时错误（同步错误、语法错误）。 window.addEventListener(‘error’)：补充捕获资源加载错误（如 img、script 加载失败）。 window.addEventListener(‘unhandledrejection’)：捕获未处理的 Promise 异常。
示例代码：
立即学习“Java免费学习笔记（深入）”；
window.onerror = function(message, source, lineno, colno, error) { reportError({ type: 'runtime', message, stack: error?.stack, url: source, line: lineno, column: colno }); return true; // 阻止默认上报};window.addEventListener('unhandledrejection', event => { reportError({ type: 'promise', message: event.reason?.message || String(event.reason), stack: event.reason?.stack });});
2. 错误分类与上下文采集
上报的数据质量决定排查效率。除了错误本身，还需收集环境和行为上下文。
建议采集字段：
错误类型、消息、堆栈（error.stack） 用户设备信息（UA、屏幕尺寸） 当前 URL、页面标题 用户行为路径（可结合埋点记录最近操作） 网络状态（navigator.onLine、有效类型如 4g/3g）
注意：避免采集敏感信息（如密码、token），遵守隐私政策。
3. 上报策略与可靠性
直接使用 fetch 或 XMLHttpRequest 可能在某些场景下失败（如页面崩溃、CSP 限制）。推荐使用 navigator.sendBeacon。
sendBeacon 的优势：
异步发送，不阻塞页面卸载 即使页面已关闭也能发送请求 兼容性良好（现代浏览器均支持）
实现逻辑：
function reportError(data) { const payload = JSON.stringify({...data, timestamp: Date.now()}); if (navigator.sendBeacon) { navigator.sendBeacon('/log-error', payload); } else { fetch('/log-error', { method: 'POST', body: payload, keepalive: true // 确保请求完成 }).catch(() => { // 可降级为图片打点等方式 }); }}
4. 性能与采样控制
高频错误可能造成大量上报请求，影响性能或服务器压力。需引入控制机制。
常用策略：
采样上报：例如只上报 10% 的错误（适用于高流量应用） 去重处理：对相同错误（根据 stack 和 message 哈希）短时间内只上报一次 节流控制：限制单位时间内的上报频率
示例采样逻辑：
function shouldReport() { return Math.random() < 0.1; // 10% 概率上报}if (shouldReport()) { reportError(data);}
基本上就这些。一个实用的错误监控系统不需要一开始就复杂，可以从基础的 onerror + sendBeacon 开始，逐步加入上下文采集和上报优化。关键是稳定捕获、可靠传输、数据可用。不复杂但容易忽略细节。
以上就是JavaScript中的错误监控和上报系统如何设计？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525332.html
微信扫一扫 
支付宝扫一扫 
