扒一扒前端埋点，聊聊sdk设计

埋点分类？

1. 数据埋点，涉及pv（页面浏览量），uv（用户量），停留时长，用于分析用户行为。

2. 性能监控，通过performance.timing，你可以获取到任何时间从url加载，dns解析，页面首次开始渲染，dom加载完毕，异步资源的加载时间。

3. 错误报警监控，可以从vue，react的错误边界及生命周期函数中捕获，或者全局的onerror，trycatch，捕获promise异常的api（unhandledrejection），ajax的send事件采集，路由采集， 从这3方面，有3种埋点上报的方案，第一个可视化埋点在dom加载完毕后通过平台输入代码，加载js脚本，实现埋点代码和业务的解耦。第二个就是无埋点，一次性通过前端采集。第三个就是通过手动的埋点，第三方的sdk实现，但是耦合度高不易维护。

埋点方案 ？

1. 代码埋点 通过函数嵌入代码可以做自定义程度高。
2. 无代码埋点 通过第三方sdk埋点操作或在外部直接监听dom等 ，解耦程度高，规范化。
3. 可视化埋点 将业务代码与埋点代码分离，并通过搭建的可视化平台在输入的业务代码中添加埋点事件，最后输出的代码为业务代码与埋点代码耦合而成。

埋点上报？

1. 接口，常见的直接用接口传递给后端实现，但是需要考虑时间节点，需要减去异步的操作时间。好处是能确保稳定性，但是对服务器压力大。
2. 1px的img的gif请求, 大厂通用的就是利用img的src属性的可跨域，不用append插入dom不阻塞，占用体积小，透明格式不影响ui， 通过配合url的查询字符串实现业务定制需要。但是弊端在与如果跳第三方应用，本地页面卸载无法捕获。跳转信息。而且大量的src会影响业务代码的执行。
3. 更优雅的web beacon(网络信标) 解决了gif方案的问题，缺点兼容没img的好。

那么sdk如何设计呢?

1. 确定业务方向，定义api

根据业务需求需要通过埋点获取用户的id，应用的id，业务模块id，设备信息，会话id（时效），采集时间点，用户的当前状态信息(当前页面，用于位置信息，来源页面),事件的类型，对应的业务内容的标记。

2. 根据需要采集的字段，拆分模块。

3. 通过一个配置模块来统一管理不同的请求、路由、异常、性能等模块，实现不用端的sdk模块化配置。

概念前提

1. 采集的方式：自动采集，手动采集
2. 发送的原理封装，1. navigator.sendBeacon 2. new Image()
3. 发送的间隔: 1.最大缓存数，理解为一个阈值，缓解服务器压力。2.延迟，防止数据丢失，定义定时器间隔发送。

核心业务sdk设计

1. init配置模块，用于定义自动化采集的配置，定制化信息采集等。
2. event事件模块，dom的class类或者属性来判断。
3. pv路由的采集 history.pushState history.replaceState popstate hashchange
4. http请求模块
5. err错误模块 error unhandledrejection
6. 内置的methods方法，用于手动采集
7. performace 采集性能数据

埋点系统设计