前端监控埋点——介绍以及架构建设
这几周在进行前端埋点的项目推进。关于负责SDK的根本架构以及用户举动监控插件的编写。那么在分析架构前。我们先得看看我们的项目具体是怎么运行的
https://i-blog.csdnimg.cn/direct/c934fe1523ae49abb8cad2d16bdf5e62.png
埋点
埋点主要用于网络用户举动数据。在一样寻常开辟中，我们会通过 在前端代码中插入代码或脚本的方式 来实现埋点功能。
埋点的主要作用就是：捕获特定用户举动（如点击、欣赏、提交表单、页面跳转等）以及关键业务数据（如下单金额、商品种别等）
在一样寻常开辟中，埋点的实现方案大致可以分为以下三大类：
[*] 手动埋点：在代码中手动加入记载代码来捕获特定事件。
[*] 自动埋点：利用 DOM 事件代理等技术来捕获页面上所有事件，从而减少手动配置。
[*] 可视化埋点：通过工具界面标志需要采集的元素和事件，可以不消手写代码。
https://i-blog.csdnimg.cn/direct/f5b15276995d41f9b2e3ed139c5cb016.png前端监控平台
一个完整的前端监控平台包括三个部门：数据采集与上报、数据整理和存储、数据展示
https://i-blog.csdnimg.cn/direct/7825860af7c04cb7883c8f3981107cc7.png
监控平台它的根本流程是什么样的呢？
https://i-blog.csdnimg.cn/direct/04c80ecae8d743a7914a92e14d0da8f7.png
我们将APP端嵌入监控SDK。进行性能监控，错误监控，举动监控。并网络信息传给后端平台。后端再将数据进行处置惩罚后，传给可视化平台进行展示
根据上图，我们可以大致的将项目分为三大模块
traceflow-sdk、traceflow-server、traceflow-admin
traceflow-sdk:进行数据的采集与上报
traceflow-server:数据的整理和存储
raceflow-admin: 数据展示
而SDK主要内容就是数据的采集以及上报，那么我们到底要上报什么内容呢，监控什么内容呢？
https://i-blog.csdnimg.cn/direct/58ef3f9d4cdd4c0ca0aa50282e5cf224.pngSDK主要对代码错误的监控网络错误数据，对代码以及用户设备的性能进行监控网络对应的数据，对用户的举动比方点击，PV,UV等进行监控并网络对应数据
关于项目的根本架构
项目的我们使用pnpm+monorepo进行依赖管理。那这种依赖管理模式是什么样的呢，等候我的更新。简要概述就是
pnpm + Monorepo 是一种在同一仓库下管理多个包（子项目）的模式，适用于前端组件库、SDK、工具集、微前端等项目。
依赖管理方式
[*]全局依赖：安装在根目录 package.json，所有子项目共享（-w 选项）。
[*]局部依赖：安装在特定子项目 package.json，不会影响其他子项目（-F <package> 选项）。
这对于我们在一个统一的一个大的项目中单独开辟三个模块是非常方便的
https://i-blog.csdnimg.cn/direct/815774bc0b4940879a7ffea6cd849788.png
packages文件夹当中分别编写对应的模块
那么关于我们前端监控SDK的底子架构呢？
我们项目组再进行调研时，采取了这篇参考文章决定使用内核 + 插件的方法
https://i-blog.csdnimg.cn/direct/d729b89def904fc2b42f518da4277b00.pnghttps://i-blog.csdnimg.cn/direct/222b8eaece694a8194922c4d65483fab.png
plugins文件夹，是分别对错误监控，性能监控，用户举动监控三种监控分别独立对应的进行插件的编写。这就是内核+插件的插件
我们使用Core来管理SDK内的公共方法，以及配置的编写，由于我们也是主要使用TS，所以公共的范例interface也一起写在这里。
如许设计的好处是什么
1.方便进行业务拓展和定制。
随着时间的不停推进，我们业务的功能肯定也是要不停迭代的，SDK也是要进行更新的。所以我们设计SDK就必须要思量它的拓展性。
那么我们插件化的作用就显现出来了。
首先我们前面说过：
内核里是SDK的公共逻辑，底子逻辑，公共方法等
插件里又是SDK的扩展业务，错误监听，性能监控等等。js错误监控，promise错误监控也可以被拆分成小插件。
内核+插件一起就构成了SDK的实例，末了给客户使用。
所以可拓展性的答案也呼之欲出了。我们想要拓展业务，只用在内核的底子上，不停堆积插件的数目即可。
定制化也是如此，每个插件都不会影响SDK的运行，所以我们也可以自由的让用户对插件的功能进行定制化。
2.保证业务的正确性
我们在叠加插件时，由于每个插件都是独立的，所以编写插件时对于之前的业务没有什么影响。但是也会有破例。所以我们可以给每个插件，每个内核方法都单独编写测试用例。只要每次代码上传都测试通过，就可宝成原有业务的正确性。
本篇文章只是大致的讲述了关于前端埋点的介绍，以及前端监控平台的底子架构建设。对于日后随着项目的推进会渐渐深入SDK插件的具体内容以及关于数据上报的几种方法
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]