前端日志埋点优化

2024-04-02 20:42:59

前一段时间查看前端日志监控的时候发现，有很多关键业务节点埋点及用户行为轨迹数据丢失，而且丢失率达到16%这么高，梳理了一下工程里的前端埋点逻辑及方法，发现存在很大漏洞，做了一期优化，使得日志丢失率不足0.1%，使用了浏览器提供的发送保障的更简洁的sendBeacon方法，以下是对sendBeacon方法的一些理解

用户卸载网页的时候，有时需要向服务器发一些数据。很自然的做法是在unload事件或beforeunload事件的监听函数里面，使用XMLHttpRequest对象发送数据。但是，这样做不是很可靠，因为XMLHttpRequest对象是异步发送，很可能在它即将发送的时候，页面已经卸载了，从而导致发送取消或者发送失败。解决方法就是 AJAX 通信改成同步发送，即只有发送完成，页面才能卸载。但是，很多浏览器已经不支持同步的 XMLHttpRequest 对象了（即open()方法的第三个参数为false）

window.addEventListener('unload', logData, false);

function logData() {
  var client = new XMLHttpRequest();
  // 第三个参数表示同步发送
  client.open('POST', '/log', false);
  client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
  client.send(analyticsData);
}

上面代码指定XMLHttpRequest同步发送，很多浏览器都已经不支持这种写法。

而且将XMLHttpRequest同步发送，会延迟页面的卸载及下一个页面的载入，性能非常的差

同步通信有几种变通的方法：

1、一种做法是新建一个<img>元素，数据放在src属性，作为 URL 的查询字符串，这时浏览器会等待图片加载完成（服务器回应），再进行卸载。

使用new Image有可能遇到aborted，导致无法成功发送

2、另一种做法是创建一个循环，规定执行时间为几秒钟，在这几秒钟内把数据发出去，然后再卸载页面。

这些做法的共同问题是，由于同步请求的阻塞，卸载的时间被硬生生拖长了，后面页面的加载被推迟了，用户体验不好。

navigator.sendBeacon() 方法可用于通过HTTP将少量数据异步传输到Web服务器。

navigator.sendBeacon(url, data);

为了解决这个问题，浏览器来提供发送保障的更简洁的sendBeacon方法。sendBeacon是异步的，不会影响当前页到下一个页面的跳转速度，且不受同域限制。这个方法还是异步发出请求，但是请求与当前页面脱离关联，作为浏览器的任务，因此可以保证会把数据发出去，不拖延卸载流程。

window.addEventListener('unload', logData, false);

function logData() {
  navigator.sendBeacon('/log', analyticsData);
}

Navigator.sendBeacon方法接受两个参数，第一个参数是目标服务器的 URL，第二个参数是所要发送的数据（可选），可以是任意类型（字符串、表单对象、二进制对象等等）。

sendBeacon 如果成功进入浏览器的发送队列后，会返回true；如果受到队列总数、数据大小的限制后，会返回false。返回ture后，只是表示进入了发送队列，浏览器会尽力保证发送成功，但是否成功了，不会再有任何返回值。目前暂无具体的数据长度限制标准。

navigator.sendBeacon(url, data)

// HTML 代码如下
// <body "analytics('start')" οnunlοad="analytics('end')">

function analytics(state) {
  if (!navigator.sendBeacon) return;

  var URL = 'http://example.com/analytics';
  var data = 'state=' + state + '&location=' + window.location;
  navigator.sendBeacon(URL, data);
}

sendBeacon() 方法存在的意义：

使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。此外，代码实际上还要比其他技术简单许多。

最新的浏览器兼容情况：

考虑到对目前浏览器的支持情况，需要做一下降级支持(如同步模式下的xhr，如果不是同域则要支持CORS)：

navigator.sendBeacon || new Function('var xhr=new XMLHttpRequest();
xhr.open("POST",arguments[0],true);r.send(arguments[1]);');

example:
function SendBeacon(src)
     if (typeof(navigator.sendBeacon) == "function") {
          var b = new Blob([], {type: 'application/x-www-form-urlencoded'});
          return navigator.sendBeacon(src, b);
     }
     return false;
 
}

码农公寓

相关文章