m-cheng-web / web-tracing

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

About me

• 🎖 web前端，对重复性或不规范的工作容忍度低
• 🌱 保持idea，不在乎得失，做一个纯粹的技术人
• 🏃🏻‍♀️ 跑步爱好者，2023目标完成半马 - bingo

语言与框架

常用工具

web-tracing's Issues

请问下 有重构roadmap吗

安装@web-tracing/vue2依赖,运行问题

你好,我在vue2项目使用vue2版本的插件时,遇到了问题
warning in ./node_modules/@web-tracing/vue2/index.mjs
Module not found: Error: Can't resolve 'worker_threads' in 'H:\workspace\demo\node_modules@web-tracing\vue2'
node版本: 14.21.3
vue版本: 2.7.14
请问有解决方案吗

自动采集pv数据

1、自动采集pv数据的话支持传入params吗，我没想到解决方案。还是说这种业务场景的话直接让他手动调tracePageView上报pv数据
麻烦回复下我上面这个问题，谢谢

上报的数据baseInfo里面数据有时候会缺失

包括appCode,appName等参数都缺失了。主要出现在刷新和第一次进入的时候，随机性出现

你好，请问多久会支持uniapp、小程序呢

你好，请问多久会支持uniapp、小程序呢

xhr类型请求responseURL为空

this属性中的responseURL未空，这样赋值会将responseURL设置为空

我在ignoreErrors和ignoreRequest配置的接口没有效果

接口上传的时候还是会上报上去

错误录屏的有的图标会丢失样式

目前发现只有图标和图片会出现这种情况

还有一个问题想请教下，错误录屏我想延长最后结束的时刻如何做
因为我发现错误抛出的时候都是在最后一秒，画面可能还没有显示错误信息录屏就结束了
所以想知道如何在错误出来后，延后一两秒

文档图片确实

官方文档的流程图片挂了

线上vue3项目应该如何正确融合嵌入SDK？

需要把packages文件拷贝到项目中？且项目中package.json定义workspace吗？

是否支持页面热区监控上报

允许使用者控制是否需要录屏功能

碰到这么一个场景，用户电脑配置很低，需要记录运行时错误信息，但并不需要录屏，以尽可能更少的消耗干差不多的事

sendBeacon 存在的问题以及兜底

          以前写业务代码的时候有印象sendBeacon是存在最大发送上线的，也就是总请求数达到一个上限之后将会返回失败。大佬可以验证一下，同时关注一下sendBeacon的返回值，false的时候还是要兜底一下的

Originally posted by @sansui-orz in #10 (comment)

能否自定义和后端交互方式？

请问是否可以自定义和后端交互方式？目前看默认为sendBeacon()，另外有的两种方式是img和xml；
或者用比较僵硬的方式，在beforeSendData和afterSendData两个钩子用自定义的方式去和后端交互请求？（但是这样确实比较累赘

重构计划

一期（sdk已有能力）

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

二期（预计2023.5 - 2023.6 完成）

• 整体代码结构更改
• 现有bug解决
• 文档系统与sdk核心代码融合 (vuepress -> vitepress)
• js -> ts
• 更好的兼容 vue2、vue3（react以及小程序优先级靠后一些）
• 支持暴露更多变量（例如最大缓存数、延迟上传时间、dom埋点名称等等）
• 支持hook以及自定义hook
• 支持加密传输（加密方式待确定）
• 关于用户信息的重构 - 【1.分为未登录与已登录的场景，登录后进行绑定，机器与用户id进行多对多绑定(更多方案还在确定中) 2.支持动态修改用户信息】
• 支持更多上传方式
• 支持延迟加载sdk、异步发送敏感数据
• 支持暴露更多sdk内部方法（例如使用者想要拿到此时的硬件数据）
• 支持抽样发送，数据临时存储本地的形式减少服务端压力（这里同样也支持断网续联后发送）
• 支持更多的事件以及行为监听
• 支持对特定dom监控事件（例如监控页面button按钮的点击事件，这在大批量埋点场景中比较需要，另提供一些属性来标识特定按钮无需采集）
• 支持区间打点，区间采集
• 支持区域曝光度采集
• 支持静默（通过配置来设定遇到大批量事件时sdk静默或者用范围时间记录上报，例如当大批量报错时）
• 支持错误信息去重（并自动转为区间事件）
• 为 vue3 提供一系列个性化hooks
• sourcemap 错误跟踪
• 最大上传长度限定
• 提供 ignoreErrors，ignoreRequest 等
• 白屏检测
• 首次首屏数据更精确化
• demo官网示例更简单化且提供在线编写能力
• 探索：一些关键性的api能让使用者去替代更改、比如监听网络状态的内部实现支持使用者去重写
• 探索：插件化（核心功能+其他插件的形式）
• 探索：错误录屏

除了事件采集，没有主动上报功能么？

vue3使用会报错

failed to load config from /Users/chenpengfei/Desktop/workspace/项目/xxx/web-large-screen/vite.config.ts
error when starting dev server:
ReferenceError: window is not defined
at Object. (/Users/chenpengfei/Desktop/workspace/项目/xxx/web-large-screen/node_modules/@web-tracing/vue3/index.cjs:729:18)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
at Module.load (node:internal/modules/cjs/loader:1076:32)
at Function.Module._load (node:internal/modules/cjs/loader:911:12)
at Module.require (node:internal/modules/cjs/loader:1100:19)
at require (node:internal/modules/cjs/helpers:119:18)
at Object. (/Users/xxx/Desktop/workspace/项目/xxx/web-large-screen/vite.config.ts:40:27)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.require.extensions. [as .ts] (/Users/xxx/Desktop/workspace/xxx/web-large-screen/node_modules/vite/dist/node/chunks/dep-6e2js:62006:20)

Process finished with exit code 1

点击事件监听有bug

页面上多个data-warden-event-id绑定事件之后，连续点击，eventId都是最后一次点击的绑定id了。

想问一下。如果想实现全埋点，应该怎么改造呀

web-tracing 二期开发已进入Beta阶段

文档已上线：https://m-cheng-web.github.io/web-tracing/

npm包版本：2.0.0-beta.5

// 核心实现包 - js
pnpm install @web-tracing/core

// vue2版本
pnpm install @web-tracing/vue2

// vue3版本
pnpm install @web-tracing/vue3

示例项目：
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

不懂就问，nr命令是什么？

package.json -> scripts 里nr命令 是指npm run 吗？还是别的node插件？

参数类型问题

在二开时遇到一个问题如下

• 首先在 这一行

  web-tracing/packages/core/src/lib/eventBus.ts

  Line 7 in 9f68d06

  callback: AnyFun

  callback为AnyFun类型
• 在这一行

  web-tracing/packages/core/src/types/index.ts

  Line 106 in 9f68d06

  export type AnyFun = {

  AnyFun定义为 (...args: any[]): any参数为数组并返回任意类型的函数
• 最后

  web-tracing/packages/core/src/lib/event.ts

  Line 33 in 9f68d06

  callback: (e: MouseEvent) => {

  这一行，当使用EventBus为click事件添加处理函数时，实际上这里 参数为 [MouseEvent] 导致接下来的代码运行失败

埋点事件采集获取title字段流程图加载失败

vue2使用会报错

vue版本：2.7.x

请求上传track方式配置参数化

现默认使用navigator.sendBeacon POST方式，修改源码JS 已集成阿里云SLS上传。

数据上传接口调用不通会报错

数据上传接口调用不通，会报错，下个业务就无法进行了

vue2引入@web-tracing/vue2报错

SDK版本号: 2.0.4
使用vue-cli初始化的项目，只安装了@web-tracing/vue2
报错及依赖信息可参考图片

原生web用cdn引入时，主动上报事件失效

想问问作者这个是我的操作有问题吗？引入方式p1，报错p2

import 之后出现navigator notdefined报错

请问作者二期大概啥时候完成呀？

请问作者二期的功能大概啥时候完成呀？另外我有个疑问就是，配套的后端代码在哪里呢？