通过全局事件捕获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 开始，逐步加入上下文采集和上报优化。关键是稳定捕获、可靠传输、数据可用。不复杂但容易忽略细节。