@blueking/bk-trace-core

数据上报插件

用于上报前端事件上报，统计界面PV和UV这些

如何安装

Vue3项目

1. 安装最新SDK

npm i @blueking/bk-trace-core@latest

2. 在项目入口引入SDK

import { createApp } from 'vue';
import App from './App';

// 引入SDK
import BkTrace from '@blueking/bk-trace-core';

// 性能和屏幕录制包（安装需求安装）
// import BkTracePerformance from '@blueking/bk-trace-performance';
// import BkTraceRecord from '@blueking/bk-trace-recordscreen';

// BkTrace.use(BkTracePerformance);
// BkTrace.use(BkTraceRecord);

createApp(App)
  .use(BkTrace, {
    url: '/api/report', // 上报地址
    appCode: 'bk-test',// 你的APP名称
    appVersion: 'bcs-v1.0.0',// 你的APP版本
    spaceID: 'testproject', // 当前空间
    spaceType: 'project', // 当前空间类型
  })
  .mount('#app');

Vue2项目

1. 安装最新SDK

npm i @blueking/bk-trace-core@latest

2. 在项目入口引入SDK

import Vue from 'vue';

// 引入SDK
import BkTrace from '@blueking/bk-trace-core';

// 性能和屏幕录制包（安装需求安装）
// import BkTracePerformance from '@blueking/bk-trace-performance';
// import BkTraceRecord from '@blueking/bk-trace-recordscreen';

// BkTrace.use(BkTracePerformance);
// BkTrace.use(BkTraceRecord);

Vue.use(BkTrace);

手动上报

默认会自动上报UV和PV数据，也可以手动上报自定义数据

<span v-bk-trace.click="{ ct: '用户点击span' }">点击span</span>

配置说明

名称	描述	类型	默认值
url	上报的地址	string
appCode	应用code	string
appVersion	APP版本	string
spaceType	空间类型	SpaceType
spaceID	空间ID	string
user	用户id	string
disabled	是否禁用SDK	boolean
silentXhr	监控 xhr 请求	boolean	false
silentFetch	监控 fetch 请求	boolean	false
silentClick	监控 click 事件	boolean	false
silentError	监听 error 事件	boolean	false
silentUnhandledrejection	监控 unhandledrejection	boolean	false
silentHashchange	监听路由 hash 变化	boolean
silentHistory	监听路由 history 变化	boolean
silentBreadcrumbs	记录用户行为堆栈	boolean	false
recordScreenTime	单次录屏时长	number
recordScreenTypeList	上报录屏的错误列表	string[]
silentWhiteScreen	开启白屏检测	boolean
skeletonProject	骨架屏检测	boolean
whiteBoxElements	白屏检测容器列表	string[]
filterXhrUrlRegExp	过滤接口请求正则	RegExp
useImgUpload	使用图片打点上报	boolean
throttleDelayTime	点击事件节流时长	number
overTime	接口超时时长	number
maxBreadcrumbs	用户行为最大长度	number
repeatCodeError	去除重复代码错误	boolean
beforePushBreadcrumb	行为列表前的 hook	(data: Partial) => Partial
beforeDataReport	数据上报前的 hook	(data: ReportData) => Promise<ReportData	boolean>
getUser	用户定义	() => string	number
handleHttpStatus	处理接口返回 response	(data: any) => boolean

上报数据格式说明

字段名	类型	描述
id	string	唯一标识符，用于标识每一条上报数据。
et	number	事件发生的时间戳。
ver	string	应用的版本号。
plv	string	上报插件的版本号。
cc	number	缓存命中次数。
sid	string	会话ID，用于标识用户会话。
sct	number	会话计数，记录会话的次数。
sts	string	会话状态。
u	string	当前界面的URL。
tit	string	界面的标题。
uA	string	浏览器的User-Agent信息。
ul	string	用户的语言设置。
aC	string	应用的唯一标识。
lo	string	地理位置信息。
sr	string	显示设备的分辨率。
os	string	操作系统信息。
gcd	string	设备ID。
li	number	异常发生的行号。
co	number	异常发生的列号。
rat	string	性能指标的评级（如FCP、LCP、TTFB、FID）。
v	string | number	性能指标的值。
pE	PerformanceEntry	原始性能数据。
pRs	PerformanceResourceTiming[]	原始性能资源数据。
hs	number	JavaScript堆栈大小。
ths	number	JavaScript总堆栈大小。
uhs	number	JavaScript使用的堆栈大小。
fU	string	接口的URL。
fE	number	接口请求的耗时。
fS	number	接口状态码。
usr	string | number	用户名或用户ID。
act	EVENTTYPES	用户执行的操作类型。
ct	string	具体的操作类别。
d	string	操作数据或信息。
to	string	操作目标。
fr	string	操作来源。
spt	string	空间类型。
spid	string	空间ID。
sk	Partial<ReportData>[]	用户行为堆栈，记录用户的操作历史。