专栏名称: 科技虫
致力于优质资源和优秀开源软件分享,日常技术交流学习。
目录
相关文章推荐
51好读  ›  专栏  ›  科技虫

[开源] 一款为前端项目提供【 埋点、行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段的项目

科技虫  · 公众号  ·  · 2024-06-17 16:23

正文

请到「今天看啥」查看全文


科技虫致力于分享一些优秀的开源程序和客户端软件。比如商城、小程序、H5、网站、办公系统、OA、CRM、ERP、内容管理系统CMS、物联网系统、智能硬件、人工智能AI、大数据分析、智慧大屏、工具类软件、编程类软件工具、服务器运维、网络安全、前端技术、后台技术。


为了方便大家,我把往期所有发表过的内容按分类整理成一个文档发表到了gitee上。地址:
https://gitee.com/php_andy/software-box
喜欢的可以去给个免费的star,你的鼓励是我继续创作的动力。非常感谢。以后每天发布的内容我会先发布到公众号,稍后再同步到gitee。


web-tracing 监控插件

WebTracing是一个基于 JavaScript 的埋点SDK, 它努力为你的前端项目提供【 行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段。
项目亮点
  • 提供了多种定制化api最大限度帮助你应付各个场景的业务,例如:

  • 提供钩子函数让你对数据精确把握

  • 提供本地化选项api,让开发手动控制去发送监控数据 - 节省带宽

  • 提供批量错误api,在遇到无限错误时融合批量错误信息 - 节省带宽

  • 提供抽样发送api - 节省带宽

  • 提供 错误/请求 事件的过滤api

站在技术角度,因为明确此项目可能更多的是应用在公司平台上,大概率会二开,所以作者对项目结构以及代码都严格要求
  • 架构 - demo、核心sdk代码、文档都在同一个项目中,调试、部署都很方便

  • 封装 - sdk存在大量的重写或者监听,对此有统一流程

  • 响应式 - 项目内部实现了vue响应式,也应用在 options 对象中,相信你接触会后受益良多

  • 多版本 - 针对不同平台提供多个版本(目前只有js、vue2、vue3),受益于monorepo架构可一键发布

  • 内聚 - 目前核心功能的所有代码都没有分包,虽然monorepo架构支持,但作者认为目前分包不利于代码阅读以及二开方便

  • 文档/注释 - 完善的文档以及非常全的注释,力求帮助你快速了解这一切


设计理念

⭐⭐⭐ 谁(Who) 在什么时候(When) 什么地方(Where) 干了什么(What) 怎么干的(How) ⭐⭐⭐
Who
什么是用户用户指的是访问这个页面的行为人,对于SDK来说使用同一个账户、同一个设备、同一个浏览器来访问页面的"人"就是同一个用户
用户ID每一次访问都有一个唯一的ID,不论什么时候来访问,用户是否登录,都携带有一个唯一的ID 可以理解为用来标记这个访问设备,有网卡mac地址则使用mac地址(移动端用udid) mac地址、移动端设备id,SDK生成的ID在库中的字段都为 udid
会话ID会话ID用来标记某段时间内的连续访问为一次用户会话,当用户开始一个新的访问时,会创建一个session_id,存于cookie当中 有效期三十分钟,当有用户交互发生时,会话有效期从交互时刻延长至该交互事件发生时刻的30分钟后,即重置session_id有效期
When
用户事件发生的时间,这个时间是客户端时间,客户端时间用于对这个客户端上的埋点记录进行排序,来串联用户的交互行为
客户端时间是不准确的,比较准确的推算出用户事件发生的真实时刻,需要三个值:
  1. 事件发生时间

  2. 事件记录发送时间,我们是缓存后,批量发送,需要加上发送时间

  3. 后端接收时间

推算前提:
  • 以后端时间为基准,后端时间是真实可靠的

  • 我们认为客户端发送给后端的这个网络开销时间忽略不计

后端接收时间和客户端发送时间的差值代表了基准时间和客户端时间的差值推算公式: realTime = receiveTime(后端接收时间) - sendTime(事件发送时间) + time(事件发生时间)

Where

物理位置: 用户所处的地理位置,通过ip或者app的定位服务计算用户所处在哪个地方

逻辑位置: 事件发生时用户当前所在的页面,事件发生时在页面内的位置信息

来源位置: 事件发生时当前页面的上一个页面

What

事件的内容

对于页面访问,内容就是页面标题 对于输入事件,内容就是用户输入的内容 对于点击事件,内容就是点击事件采集的规则(参考下方)

How

用户是怎么触发这个事件的

内置的几种类型:

  • pv: 页面切换时会记录该类型数据,页面切换可以多普通页面切换,也可以是调用HistoryAPI,或是hashchange方式。

  • error: 页面发生异常时会记录该类型数据,异常可以是代码异常、接口异常、资源加载异常

  • performance: 性能相关的事件发生时会记录该类型数据,性能事件包括: 页面加载性能、请求响应性能、自定义性能条件触发

  • click: 用户点击交互事件

  • dwell: 页面卸载

  • intersection: 某个元素被曝光

项目地址:

https://github.com/M-cheng-web/web-tracing


喜欢的话点击下方卡片关注一下我吧,为您推荐更多优秀好用的程序和软件。你也可以给我留言或私信,说出你需要的程序和软件,我帮大家推荐。



创作不易 分享,点赞,在看 支持一下, 🙏 感谢。







请到「今天看啥」查看全文