WebTracing | 埋点

面向需要自建监控平台的前端团队，WebTracing 提供行为、性能、异常、请求、路由、资源、曝光、录屏八类采集能力，纯 JS 编写，已适配 Vue2/Vue3，支持二开。

它能采集什么

SDK 覆盖前端监控主流场景，所有采集项均可独立开关。

• 事件采集：记录点击、交集等用户行为，支持自定义事件类型过滤
• 错误采集：捕获 JS 异常、Promise 错误、资源加载失败，可设置 ignoreErrors 正则白名单
• 路由采集：监听 SPA 路由变化，自动记录 PV 与页面切换
• 请求采集：拦截 XMLHttpRequest/fetch，支持 ignoreRequest 过滤指定 URL
• 资源采集：统计页面中图片、脚本、样式等资源的加载耗时与状态
• 曝光采集：基于 IntersectionObserver 检测元素可见性，用于埋点统计
• 录屏：通过 tracesSampleRate 抽样录制用户操作回放，节省带宽

如何控制数据与带宽

提供多种精细化配置，避免无意义上报。

• 缓存合并：cacheMaxLength 与 cacheWatingTime 控制批量发送的条数与间隔
• 抽样发送：tracesSampleRate 设置 0~1 的采样率，按比例丢弃数据
• 本地化开关：通过选项 API 手动控制是否发送，适合离线或调试场景
• 批量错误：遇到连续相同错误时融合为一条，减少重复上报
• 钩子拦截：beforeSendData 可返回 false 阻止发送，afterSendData 用于发送后处理

适合谁用与怎么上手

专为需要自建监控平台的公司设计，作者明确项目大概率会二次开发。

• 纯 JS 项目：通过 CDN 引入 @web-tracing/core，调用 webtracing.init 即可
• Vue2 项目：安装 @web-tracing/vue2，通过 Vue.use 注册插件
• Vue3 项目：安装 @web-tracing/vue3，通过 app.use 注册插件
• React 支持：纯 JS 编写，理论上支持，但官方尚未提供 demo 项目
• 本地运行：monorepo 架构，pnpm install 后通过 pnpm run test:js/vue2/vue3 启动示例

项目架构与二开友好性

作者强调代码结构清晰，便于团队二次开发。

• 同仓管理：demo、核心 SDK、文档在同一个项目中，调试与部署无需切换仓库
• 统一封装：所有重写/监听逻辑有统一流程，降低二开成本
• 内部响应式：options 对象采用 Vue 响应式实现，配置变更自动生效
• 完整注释：文档与源码注释详尽，力求让开发者快速理解每个模块
• 未来规划：作者计划推出配套的 Nest.js 服务端与 Vue 后台面板，提供在线体验

常见问题

Q1：WebTracing 支持 React 吗？

A1：SDK 核心为纯 JS 编写，理论上支持任何浏览器环境，但官方目前只提供了 JS、Vue2、Vue3 的 demo 项目，React 项目需自行集成，后续可能会专门支持。

Q2：WebTracing 的录屏功能如何开启？

A2：在初始化配置中设置 tracesSampleRate 参数（0~1 之间的数字），例如 0.5 表示 50% 的会话会录制操作回放，该功能主要用于问题复现，同时通过抽样控制带宽消耗。

Q3：WebTracing 能过滤掉某些错误或请求不上报吗？

A3：可以。配置项 ignoreErrors 支持传入数字、正则或字符串，匹配的错误会被忽略；ignoreRequest 类似，可过滤指定 URL 的请求，例如忽略 /normal 路径或 getAllTracingList 接口。

更多同类工具与网站,可在前端库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。