📊 产品定位
WebTracing 是一款基于 JavaScript 开发的前端埋点工具包（SDK），专门为 Web 应用打造全链路监控方案，能够全方位覆盖前端监控场景，助力开发者实现应用的精准监控与优化。
🌟 核心能力
该SDK全面覆盖八大核心监控维度，实现前端场景无死角监控：
- 行为监控：精准追踪用户各类交互操作，还原用户行为路径
- 性能监控：深入分析页面加载全过程及运行时性能表现
- 异常监控：自动捕获 JavaScript 运行过程中的各类错误
- 请求监控：实时追踪 HTTP 请求的状态、耗时等关键指标
- 资源监控：细致分析静态资源的加载速度与异常情况
- 路由监控：适配 SPA 应用，精准追踪路由切换状态
- 曝光监控：检测页面元素的可见性，统计曝光数据
- 录屏功能：回放用户操作行为，便于问题回溯与分析
✨ 技术特性
- 原生兼容：采用纯 JavaScript 开发，支持所有现代主流浏览器
- 框架适配：针对性提供 Vue2、Vue3 专用版本，开箱即用
- 轻量高效：采用轻量化设计，gzip 压缩后体积不足 15KB，不占用过多资源
- 灵活可配：支持 20 余种定制化参数，可根据业务需求灵活调整
- 数据优化：采用智能缓存与批量上报机制，有效降低网络开销
📦 快速集成
安装方式
# 原生 JavaScript 项目
pnpm install @web-tracing/core
# Vue2 项目
pnpm install @web-tracing/vue2
# Vue3 项目
pnpm install @web-tracing/vue3
🌐 原生 JS 集成示例
<script src="https://cdn.jsdelivr.net/npm/@web-tracing/core"></script>
<script>
webtracing.init({
dsn: 'https://api.your-domain.com/track',
appName: 'web_app',
tracesSampleRate: 0.2, // 生产环境采样率设置
ignoreErrors: [/ResizeObserver loop/],
beforeSendData: data => {
data.env = "production";
return data
}
})
</script>
🖥️ Vue3 集成示例
import WebTracing from '@web-tracing/vue3'
app.use(WebTracing, {
dsn: '/track',
performance: true, // 开启性能监控功能
error: { // 精细化配置错误捕获规则
captureUnhandledRejections: true
},
cacheMaxLength: 20, // 扩大缓存队列容量
})
🔧 关键配置详解
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| tracesSampleRate | number | 1.0 | 数据采样率，取值范围为 0.1~1.0 |
| cacheWatingTime | number | 1000 | 缓存批量上报的时间间隔（单位：ms） |
| scopeError | boolean | false | Vue 专属配置，用于开启组件级错误捕获 |
⚡ 过滤规则配置
{
ignoreErrors: [
"CustomIgnoreError",
/^SecurityError:/
],
ignoreRequests: [
/healthcheck/,
/.(png|css|js)$/
]
}
�深度解析核心功能
1. 全链路错误追踪
// 主动捕获异常并上报
webtracing.captureException(error, {
tags: { module: 'checkout' },
extra: { cartId: 'a1b2c3' }
})
// 监听未处理的Promise异常
window.addEventListener('unhandledrejection', e => {
webtracing.captureException(e.reason)
})
2. 精细化性能分析
// 标记关键业务流程的开始与结束
webtracing.markStart('payment_processing')
processPayment()
webtracing.markEnd('payment_processing')
// 获取页面LCP（最大内容绘制）指标
const lcpEntry = performance.getEntriesByName('LCP')[0]
console.log(lcpEntry.startTime)
3. 智能曝光追踪
<!-- 采用声明式方式配置曝光监控 -->
<div data-exposure-track="promo_banner" data-exposure-ratio="0.6">
<!-- 广告或需要监控曝光的内容 -->
</div>
🚀 最佳实践
生产环境推荐配置
{
dsn: 'https://log.your-app.com',
tracesSampleRate: 0.1, // 高流量场景建议10%采样率
cacheMaxLength: 30, // 扩大缓存队列，减少上报次数
cacheWatingTime: 2000, // 设置2秒批量上报间隔
ignoreErrors: [
/^CanceledError/,
/ResizeObserver loop/
]
}
用户行为追踪策略
// 封装关键转化事件追踪方法
exportconst trackConversion = (eventName, params) => {
webtracing.track(eventName, {
...params,
sessionId: getSessionId(),
timestamp: Date.now()
})
}
// 示例：追踪用户购买行为
trackConversion('purchase', {
orderId: 'ord_123',
amount: 299.00
})
📈 监控数据示例
性能数据格式
{
"type": "performance",
"metrics": {
"FCP": 1240,
"LCP": 2850,
"CLS": 0.08
},
"pageUrl": "/products/123"
}
错误数据格式
{
"type": "error",
"message": "Cannot read property 'price'",
"stack": "...",
"component": "ProductCard.vue",
"environment": "production"
}
