web-tracing 监控插件

基于 JS 跨平台插件，为前端项目提供【 埋点、行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段

官方文档

官方文档 https://m-cheng-web.github.io/web-tracing/

DeepWiki文档

DeepWiki文档 https://deepwiki.com/M-cheng-web/web-tracing

示例项目(本地)

js版本 https://github.com/M-cheng-web/web-tracing-examples-js

vue2版本 https://github.com/M-cheng-web/web-tracing-examples-vue2

vue3版本 https://github.com/M-cheng-web/web-tracing-examples-vue3

演示

事件监听

错误监听

资源监听

项目初衷

为了帮助开发们在公司平台上搭建一套前端监控平台

作者心声: 想降低一下前端在这方面耗费的时间与精力，此项目会尽量针对每个场景都提供解决方案；即使最后没用我这套，但从在这里对某些场景方案有了一些了解，我也很开心（为了方便大家移植代码所以没有分包，如果你有分包需求可联系我，干杯！）

亮点

提供了多种定制化api最大限度帮助你应付各个场景的业务，例如:

• 提供钩子函数让你对数据精确把握
• 提供本地化选项api，让开发手动控制去发送监控数据 - 节省带宽
• 提供批量错误api，在遇到无限错误时融合批量错误信息 - 节省带宽
• 提供抽样发送api - 节省带宽
• 提供 错误/请求 事件的过滤api
• 等等....

站在技术角度，因为明确此项目可能更多的是应用在公司平台上，大概率会二开，所以作者对项目结构以及代码都严格要求

• 架构 - demo、核心sdk代码、文档都在同一个项目中，调试、部署都很方便
• 封装 - sdk存在大量的重写或者监听，对此有统一流程
• 响应式 - 项目内部实现了vue响应式，也应用在 options 对象中，相信你接触会后受益良多
• 多版本 - 针对不同平台提供多个版本(目前只有js、vue2、vue3)，受益于monorepo架构可一键发布
• 内聚 - 目前核心功能的所有代码都没有分包，虽然monorepo架构支持，但作者认为目前分包不利于代码阅读以及二开方便
• 文档/注释 - 完善的文档以及非常全的注释，力求帮助你快速了解这一切

功能列表

具体参见CHANGELOG.md

未来方向

会写一套服务端(nest) + 后台查看监控数据平台(vue)，有以下几点考量

• 提供服务端能力（目前只是在采集端发力）
• 可以在线体验此项目
• 提供更多示例代码给开发们，再次降低这一套代码在公司的推广难度
• 作者也想站在业务的角度多思考还能从哪些方面此项目还缺失哪些功能

针对首屏加载的监控做出更多精细化的东西，例如考虑sdk的绝对轻量化

联系我

• 如果对此项目有疑虑或者有优化点，欢迎与我讨论（有沟通群）
• Bug 反馈请直接去 Github 上面提 Issues，我会实时收到邮件提醒前去查看

🙏🙏🙏 点个Star

如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star, 支持一下作者ヾ(◍°∇°◍)ﾉﾞ

贡献者

特别感谢

• xy-sea为我提供了很多好主意，这是他的关于监控平台文章以及blog，写的很好受益匪浅
• wangshitao929@163.com - 特别赞助
• rrweb - sdk内部使用其帮助错误录屏
• fingerprintjs v3.4.1 - sdk内部采用了其离线版本，用于标识唯一用户
• webrtc-ip v3.0.1 - sdk内部采用了其离线版本，用于获取公网ip

版本变更记录

已完成/提交 & 未发包

2.0.9

• fix(console.error): 上报error 对象errMessage输出为[Object] #88

2.0.8

• fix: 错误录屏功能在初始化的时候就判断是否加载 https://github.com/M-cheng-web/web-tracing/issues/78 https://github.com/M-cheng-web/web-tracing/issues/67
• fix: vue 使用axios，发送fetch时，有报错 https://github.com/M-cheng-web/web-tracing/issues/73 https://github.com/M-cheng-web/web-tracing/issues/74 https://github.com/M-cheng-web/web-tracing/issues/72

2.0.7

• test: 增加 err 模块/ utils 模块的单元测试 #51 https://github.com/M-cheng-web/web-tracing/pull/51

2.0.6

• fix: 修复baseInfo未初始化完成就上报的问题 https://github.com/M-cheng-web/web-tracing/pull/46

2.0.5

• event.md 事件流图片缺失
• readme.md 添加赞赏码
• fix issues https://github.com/M-cheng-web/web-tracing/issues/43

2.0.4

• README.md 中微信名片地址更改
• 兼容electron环境下获取window变量

2.0.3

• package.json 中 clean 命令优化
• package.json 中 esno 本地化
• 添加 CHANGELOG.md 并对之前版本补充
• README.md 更改介绍语
• 暴露出的主动事件方法添加flush参数代表是否立即发送事件

2.0.2

• 改进 mvvm-watch(原先有bug)
• 添加 recordScreen 配置项

2.0.1

• 去除 event.unload 参数(同时此事件也会去除)
• 新增 sendTypeByXmlBody 参数强行控制发送方式是否为 xmlbody 形式
• 新增 pv-duration 事件类型来标明页面停留时间

2.0.0（二期功能）

• 整体代码结构更改
• 文档系统与sdk核心代码融合 (vuepress -> vitepress)
• ts
• demo完善(vue2、vue3、js)
• issues统一解决
• ignoreErrors - 错误屏蔽
• ignoreRequest - 请求屏蔽
• 支持hook以及自定义hook -【1.放入消息队列的钩子 2.发送时的钩子 3.发送之后的钩子】（这些钩子能放置多个）
• 支持暴露更多变量（例如最大缓存数、延迟上传时间）
• 支持更多上传方式(xml、image、sendbeacon) - 可强制指定xml
• 支持抽样发送(tracesSampleRate全局抽样，具体到模块的抽样可以用beforePushEventList来阻止)
• sdk内部的img发送请求不会记录
• sdk内部的console.error不会记录
• 防止重复init
• 设置断网情况下不采集任何元素(个人认为断网了不需要再去采集用户的操作了，除非是特别需要，所以加入此限制)
• 错误过多自动转区间事件，也就是去重(场景大致描述：如果是批量错误会延长20s再发送，如果是普通单个错误会延长2s发送，如果是无限错误每隔50个会发送一次)
• 支持暴露更多sdk内部方法（例如使用者想要拿到此时的硬件数据,用户更改入参的方法,一些钩子也要加到这里，例如上传之前的的钩子，然后组成一个数组，为什么这里需要是因为用户想要在每个页面细致化控制是否上传，例如只想在用户打开某个页面才开始采集，不是这个页面则结束采集）
• 关于用户信息的重构 - 【1.分为未登录与已登录的场景，登录后进行绑定，机器与用户id进行多对多绑定(更多方案还在确定中) 2.支持动态修改用户信息】- 使用 fingerprintjs 去实现设备id
• 获取公网ip - 放在了base信息中
• 支持区域曝光度采集 - 采用 IntersectionObserver 来实现的，当不兼容时此功能无效（后面会平替为 scroll 来实现，看有木有需求） - 考虑到需要曝光的元素可能在任意页面，所以sdk索性只提供暴露方法供使用者在运行中再去手动调用，目前内部在切换页面时会自动销毁当前页面监听 - 目前需要手动清除监听，后面有需要再根据路由跳转自动清除 - 目前收集契机是必须进入+出去才收集，暂不考虑停留页面直接退出的场景
• 支持数据临时存储本地的形式减少服务端压力(会设定存储的阈值大小，最大5M，先不支持跨域存储，否则内容太大上传慢或者不兼容导致此功能不稳定) - 需要用户手动发送 - navigator.sendBeacon 发送大小在 2M-4M，如果觉得不稳妥可以 beforeSendData 拦截自己发送
• 错误录屏
• 针对资源的异步加载监控，sdk不做是否加载成功判断，但会暴露 responseEnd 和 responseStart，一般失败的资源加载通过这俩个字段能发现端倪 - 只针对支持 PerformanceObserver 的场景下，不支持 PerformanceObserver 会用 MutationObserver 兼容，不同的是 MutationObserver 能判断请求资源是否报错，如果报错则提供 responseStatus: 'error' 字段 (注意：通过标签加载资源如果报错除了资源本身会有错误，错误模块也会暴露一个错误信息，但如果是通过XMR请求则不会额外暴露错误信息)
• 将所有 options 变为响应式 - 也就是所有用到了 options 参数时，当动态去改它能实时更新(可能要将所有的变量都变为响应式了) - 也就是支持用户全局动态去改 options - 采用 proxy，如果不兼容则此功能无效
• performance模块的src url 改名 (requestUrl triggerPageUrl)
• http模块 src 改名为 requestUrl
• err模块 url 改名为 triggerPageUrl
• event模块 url 改名为 triggerPageUrl
• event-dwell模块 url 改名为 triggerPageUrl
• pv模块 url 改名为 triggerPageUrl
• sdk内部所有主动方法都改为只传 options 一个参数，但所有的属性优先级是低于内部定义的
• sdk内部发送方式增加至三种，sendbeacon、xml、img，优先 sendBeacon，其次img，最后为xml（因为增加了错误录屏导致数据量较大，xml不限制请求大小）但xml可能会有跨域问题，使用者应该注意这一问题，且sdk内部会将配置的dsn地址加入请求拦截名单(sendBeacon 有64kb限制 img 有2kb限制)
• 兼容 vue2、vue3（错误处理机制已兼容去重）（react以及小程序优先级靠后一些）（vue3的demo项目的err模块会报警告，分别是：rrweb-player初始加载警告、执行 codeError 方法会报警告；均不影响正常调试）
• 实现参数动态更改，目前所有的都可更改，没加限制，所以得提醒注意改的场景不要啥都改
• error 检测那边，加了一个属性标识错误类型，例如 console.error 还是 Error 或者 reject

1.0.0 - 2.0.0（一期功能）

• 简单支持 vue2 + vue3
• 自动采集 + 暴露api给用户手动采集上报
• 采集功能：【用户事件采集、页面跳转采集、请求采集、错误采集、资源加载采集】
• 采集上传方法：只提供 sendBeacon(内部降级为image)