数据上报插件

用于上报前端事件上报，统计界面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', // 当前空间(支持使用函数 ()=>'testproject')
    spaceType: 'project', // 当前空间类型(支持使用函数 ()=>'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数据，也可以手动上报自定义数据

1.指令用法手动上报

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

2.引入自定义方法上报

<template>
  <div>
    <!-- 绑定点击事件 handleClick -->
    <span @click="handleClick">点击span</span>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { transportData } from '@blueking/bk-trace-core';
export default defineComponent({
  setup() {
    const handleClick = () => {
      const message = '调用自定义方法上报';
      // 调用 transportData.send 方法进行数据上报
      transportData.send(message);
    };

    return {
      handleClick,
    };
  },
});
</script>

配置说明

| 名称 | 描述 | 类型 | 默认值 | |--------------------------|------------------------------|---------------------------------------|---------| | url | 上报的地址 | string | | | appCode | 应用code | string | | | appVersion | APP版本 | string | | | spaceType | 空间类型 | SpaceType | function | | | spaceID | 空间ID | string | function | | | 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>[] | 用户行为堆栈，记录用户的操作历史。 |