前端埋点的三种方式

埋点是实际上是对特定事件或者行为的数据监控和上报
1.基于ajax的埋点上报
因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程，所以我们可以和后端约定一个接口通过ajax去进行数据上报。使用ajax请求埋点可能会出现跨域风险。

function buryingPointAjax(data) {
  return new Promise((resolve, reject) => {
    // 创建ajax请求
    const xhr = new XMLHttpRequest();
    // 定义请求接口
    xhr.open("post", '/buryingPoint', true);
    // 发送数据
    xhr.send(data);
  });
}

let info = {}
buryingPointAjax(info) // 这样就成功上报了info的对象

2.基于img的埋点上报
script，link，img这类标签可以支持跨域
因为埋点涉及到请求，因此我们需要保证script和link标签的src可以正常请求。
如果需要请求script和link，我们需要将标签挂载到页面上，但是反复操作dom会造成页面性能受影响，而且载入js/css资源还会阻塞页面渲染，影响用户体验，因此对于需要频繁上报的埋点而言，script和link并不合适。
通常使用img标签去做埋点上报，img标签加载并不需要挂载到页面上，基于js去new image()，设置其src之后就可以直接请求图片。

控制台去创建一个image标签去验证

var img=new Image();
img.src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/MaskGroup.13dfc4f1.png";

优点：
（1）img兼容性好
（2）无需挂载到页面上，反复操作dom
（3）img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来
注：通常埋点上报会使用gif图，合法的 GIF 只需要 43 个字节

3.基于Navigator.sendBeacon的埋点上报
Navigator.sendBeacon是目前通用的埋点上报方案，Navigator.sendBeacon方法接受两个参数，第一个参数是目标服务器的 URL，第二个参数是所要发送的数据（可选），可以是任意类型（字符串、表单对象、二进制对象等等）。
优势
相较于img标签，使用navigator.sendBeacon会更规范，数据传输上可传输资源类型会更多。

对于ajax在页面卸载时上报，ajax有可能没上报完，页面就卸载了导致请求中断，因此ajax处理这种情况时必须作为同步操作.

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

常见埋点行为
1.点击触发埋点
绑定点击事件，当点击目标元素时，触发埋点上报。

function clickButton(url, data) {
    navigator.sendBeacon(url, data)
}

2.页面停留时间上报埋点

路由文件中，初始化一个startTime，当页面离开时通过路由守卫计算停留时间。

let url = ''// 上报地址
let startTime = Date.now()
let currentTime = ''
router.beforeEach((to, from, next) => { 
     if (to) {
         currentTime = Date.now()
         stayTime = parseInt(currentTime - startTime)
         navigator.sendBeacon(url, {time: stayTime})
         startTime = Date.now()
     }
 })

3.错误监听埋点

通过监听函数去接收错误信息。

vue错误捕获

app.config.errorHandler = (err) => { 
    navigator.sendBeacon(url, {error: error.message, text: 'vue运行异常' })
}

JS异常与静态资源加载异常

window.addEventListener('error', (error) => { 
    if (error.message) { 
        navigator.sendBeacon(url, {error: error.message, text: 'js执行异常' })
    } else { 
        navigator.sendBeacon(url, {error: error.filename, text: '资源加载异常' })
    } 
}, true)

4.请求错误捕获

axios.interceptors.response.use(
  (response) => {
    if (response.code == 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  (error) => {
    // 返回错误逻辑
    navigator.sendBeacon(url, {error: error, text: '请求错误异常' })
  }
);

6.内容可见埋点
通过交叉观察器去监听当前元素是否出现在页面

// 可见性发生变化后的回调 
function callback(data) { 
    navigator.sendBeacon(url, { target: data[0].target, text: '内容可见' }) 
} 
// 交叉观察器配置项 
let options = {}; 
// 生成交叉观察器 
const observer = new IntersectionObserver(callback); 
// 获取目标节点 
let target = document.getElementById("target"); 
// 监听目标元素 
observer.observe(target);