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