支持vue3的埋点自动上报的插件
npm install janus-bury
janus-bury 是一个支持vue的前端监控SDK,可以收集并上报:代码错误,白屏,页面访问时间,用户行为等数据。
``
$ npm install janus-bury
$ yarn add janus-bury
$ pnpm install janus-bury
`
`
import { createApp } from 'vue'
import buryPlugin from 'janus-bury'
const app = createApp(App)
app.use(buryPlugin, options) // 配置可详见下文
app.mount('#app')
`
#### monitorWhiteScreen
如果开启了白屏检测可以配置检测白屏的参数
Name | Type| Default| Description
-------- | -----| -----| -----
whiteScreenOptions| object | {skeletonProject: false, whiteBoxElements: ['html', 'body', '#app', '#root']}| 白屏监听参数
skeletonProject: 是否开启了骨架屏
whiteBoxElements: 监听的元素,默认监听了html,body,#app,#root,如果页面有自定义的监听白屏的dom,可以自行添加
#### monitorPerformance
性能指标监控涉及 FCP LCP FID CLS TTFB FSP 这些指标的上报
// 可以做一些数据发送前的log
app.use(buryPlugin, {
appName: 'janus-bury',
server_url: 'http://127.1.1.1:3000/event/report'
reportInterceptor: (data: any) => {
console.log('data', data)
}
})// 也可以变更上报前的数据,因为有一些接口的请求数据与当前的上报数据不一样
app.use(buryPlugin, {
appName: 'janus-bury',
server_url: 'http://127.1.1.1:3000/event/report'
reportInterceptor: (data: any) => {
return {
...data.baseInfo,
...data.eventInfo
}
}
})
`
若拦截器没有 return value 则默认上报插件的请求数据方法
functionName | params | Description
-------- | ---- | -----
init(option) | 配置| 初始化数据
setServerUrl(value) | - |设置接口上报的地址
setUserId(value) | - | 设置用户id
setMethod(value = 'get'/'post') | - | 设置接口上报的方法
track(data: object/string, event_type: string = 'click') | - | 设置上报的数据
$3
前提是 main.ts 进行了初始化即 app.use`
import { useBury } from 'janus-bury'
const { dataSender } = useBury()// 上报埋点
dataSender.value.track('按钮点击')
dataSender.value.track('页面浏览', 'view')
dataSender.value.track({
produnct_id: '产品id',
})
dataSender.value.setServerUrl('http://127.0.0.1:3000/api/report')
`
接口上报的数据
分为 baseInfo 和 eventInfo,其中 baseInfo 是基础信息,eventInfo 是上报的数据
`
{
"baseInfo": {
"appName": "janus-bury",
"appCode": "jauns-bury",
"appVersion": "1.0.0",
"clientHeight": 919,
"clientWidth": 616,
"colorDepth": 24,
"pixelDepth": 24,
"screenWidth": 1920,
"screenHeight": 1080,
"vendor": "Google Inc.",
"platform": "Win32",
"usergent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
},
"eventInfo": {
"userId": "",
"pageId": "8bba8620-51ba-41ca-b3a8-948f5a1f2412", // 页面唯一id
"deviceId": "e8ce5403de494be4a72d5e5b69b9dc75", // 通过浏览器指纹生成的id
"url": "http://127.0.0.1:5173/#/about",
"timestramp": 1733987624598,
"event_name": "about页面浏览",
"event_type": "view",
"page_path": "/about",
"page_from": "/",
"page_name": "about"
}
}
``