前端埋点&监控

前端埋点，主要的话 分为两类吧

一类是产品，业务相关的数据指标比如转化率、点击率、UV、PV等等。当然，分析对应的数据 也会有利于业务方向的调整

一类是项目质量、性能相关的，这种可以叫做打点。如首屏、http请求、js报错这些。用来做优化比较多

实现的话 ，这里并不使用ajax去做实现

这里使用

navigator.sendBeacon

   其实navigator 也能实现复制文本的功能 很好用

navigator.clipboard.writeText("")

， 返回的是promise。

因为即使页面结束了navigator.sendBeacon也会去请求完成。

当然 也有其他的方法去实现 例如jsonp 还有img图片的方式 因为这两种方法不会有跨域的问题吧

明白我们需要采集的哪一些数据：

用户方面：页面跳转，页面操作，网络请求，页面输出等

还有的话就是error：接口错误，js代码错误。

对于异步的错误的话 使用window.onerror处理  资源文件的加载错误。

无痕埋点主要实现的思路的话就是浏览器自身的异常捕获机制与事件冒泡机制。

主要的话也就是

window.onerror 
window.addEventListener('unhandledrejection', (error:ErrorEvent) => {});//捕获promise异常 因为trycache无法捕获promise异常。
window.addEventListener('error', (error:ErrorEvent) => {}, true)//捕获资源加载的异常

对于用户的行为的捕获的话 主要是依靠的事件冒泡的机制

实现的话 主要是利用事件冒泡，从而在document上添加对应事件的监听器。通过e拿到触发dom的信息，根据我们设置的key去做一个区分，如果该dom的点击行为需要上报，我们设置我们约定好的一个属性即可，在通过e，拿到对应的信息去经过对比，看是否包含我们约定的value，有则上报，无则return

当然也不止click，也可以包括其他的鼠标移入移出啊这种。在此我们约定属性target-key

 document.body.addEventListener('click', function (e) {}, false);