Lz blog

Appearance

前端监控数据上报 ​

在现代前端监控系统（如错误监控、性能监控、用户行为分析等）中，如何可靠、高效地将采集到的数据发送到服务端是整个链路的关键环节。不同的上报方案各有优劣，适用于不同场景。本文将深入剖析前端监控中最常用的三种上报方案：navigator.sendBeacon、图片打点（Image Beacon）、fetch/XMLHttpRequest，并对比其适用性、兼容性与可靠性。

一、navigator.sendBeacon ​

✅ 原理 ​

sendBeacon 方法可用于通过 HTTP POST 将少量数据 异步 传输到 Web 服务器。它允许浏览器在后台异步发送小量数据，即使用户关闭标签页或跳转页面，请求也不会被中断。

js
navigator.sendBeacon(url, data);
  • url：url 参数表明 data 将要被发送到的网络地址。
  • data：data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据。

✅ 优点 ​

  • 高可靠性：即使在 beforeunload、unload 事件中也能成功发送；
  • 不阻塞页面跳转：异步执行，不影响用户体验；
  • 低资源占用：由浏览器底层调度，优先级低但稳定；
  • 支持 POST 请求：可携带较大数据（通常上限约 64KB）；
  • 标准 API：现代浏览器广泛支持（Chrome 39+、Firefox 31+、Safari 11.1+）。

❌ 缺点 ​

  • 数据大小限制：超过限制会返回 false，需降级处理；
  • 无法获取响应：无回调或 Promise，无法知道服务端是否接收成功；
  • 不支持自定义请求头（部分浏览器限制）；
  • 旧浏览器不支持（如 IE 全系列）。

📌 适用场景 ​

  • 页面离开前上报最后一条日志（如 PV、停留时长、未捕获错误）；
  • 对可靠性要求高的关键监控数据；
  • 现代化项目（可忽略 IE 用户）。

💡 最佳实践：作为首选上报方式，失败后自动降级到其他方案。

二、图片打点（Image Beacon）：兼容性最强的“轻量上报” ​

✅ 原理 ​

利用 <img> 标签发起 GET 请求，将数据拼接到 URL 参数中：

js
const img = new Image();
img.src = `${url}?data=${encodeURIComponent(JSON.stringify(data))}`;

浏览器会自动加载该“图片”，从而触发 HTTP 请求。

✅ 优点 ​

  • 极佳兼容性：支持所有浏览器，包括 IE6；
  • 无需 CORS 配置：GET 请求天然跨域（但服务端需允许）；
  • 实现简单：几行代码即可完成；
  • 不阻塞主线程：异步加载。

❌ 缺点 ​

  • URL 长度限制：通常不超过 2048 字符，数据极易被截断；
  • 仅支持 GET：不适合传输敏感或大量数据；
  • 无状态反馈：无法知道请求是否成功（可通过 onload/onerror 粗略判断）；
  • 安全性较低：数据暴露在 URL 中，可能被日志记录或缓存。

📌 适用场景 ​

  • 上报简单日志（如点击事件、曝光埋点）；
  • 需要兼容老旧浏览器的项目；
  • 数据量极小（<1KB）且非敏感。

⚠️ 注意：若数据超过 URL 限制，应改用 POST 方案。

三、fetch / XMLHttpRequest：灵活可控的“通用上报” ​

✅ 原理 ​

使用标准 AJAX 技术发起 POST 请求：

js
fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: { 'Content-Type': 'application/json' }
});

✅ 优点 ​

  • 完全可控：可设置请求头、超时、重试、错误处理等；
  • 支持大容量数据：无硬性大小限制（受限于服务端配置）；
  • 可获取响应：能判断上报是否成功，便于重试或告警；
  • 支持复杂数据格式：JSON、FormData、Blob 等；
  • 现代开发友好：Promise 化，易于集成。

❌ 缺点 ​

  • 页面卸载时可能失败：若在 unload 事件中调用，请求常被浏览器取消；
  • 需要处理 CORS：跨域需服务端配合；
  • 消耗更多资源：相比 Beacon，对主线程影响略大。

📌 适用场景 ​

  • 实时性要求高的监控（如交互错误、API 调用失败）；
  • 需要确认服务端接收成功的场景；
  • 数据量较大或结构复杂的上报（如录屏片段、堆栈详情）。

四、方案对比总结 ​

特性sendBeacon图片打点（Image）fetch/XHR
可靠性（离页）⭐⭐⭐⭐⭐⭐⭐⭐⭐
数据容量~64KB~2KB无硬限
请求方法POSTGETPOST/GET
获取响应❌❌（有限）✅
自定义 Header部分支持❌✅
浏览器兼容性现代浏览器全兼容IE10+（XHR 更早）
实现复杂度低极低中

五、生产环境推荐策略：智能降级 ​

一个健壮的监控 SDK 应组合使用三种方案，形成 fallback 链：

ts
async send(data: ReportData) {
  // 1. 优先尝试 sendBeacon
  if (navigator.sendBeacon && navigator.sendBeacon(dsn, JSON.stringify(data))) {
    return;
  }

  // 2. 若失败，根据配置选择降级方案
  if (this.useImgUpload && dataIsSmall(data)) {
    this.imgRequest(data, dsn); // 图片打点
  } else {
    this.xhrPost(data, dsn);    // fetch/XHR
  }
}