Chushu WEB 埋点脚本

1. 异常信息收集和上报
2. 元数据信息收集和上报
3. 基于Apollo Link实现的接口调用数据收集与上报
4. 页面Page View访问数据采集
5. web-vitals页面性能指标数据采集
6. 行为数据收集

使用

初始化脚本

在项目入口文件，一般为index.tsx导入initWebTracker并初始化

import { initWebTracker } from '@fruits-chain/web-tracker'

// tips: uploadUrl和accessKey如果不传入，则会读取`process.env`环境变量中的值`CHUSHU_UPLOAD_HOST`和`CHUSHU_AK`
initWebTracker({
  pv: true,
  webVitals: true,
  uploadUrl: 'xx',
  accesskey: 'xx',
  events: ['click'],
})

记录 userHash

需要在用户登录后，基于用户的唯一身份标识调用recordUserHash生成用户唯一标识，该数据会作为上报数据的唯一标识

import { initWebTracker } from '@fruits-chain/web-tracker'

function fetchUser() {
  try {
    const res = await client.query<GetUserInfoQuery>({
      query: GetUserInfoDocument,
    })
    const info = res?.data?.getUserInfo
    set({ info: info })
    const tracker = initWebTracker() // tracker是单例的，如果已经被初始化过，则直接返回
    // 通过userId生成useHash标识上报数据
    tracker.recordUserHash(info.userId)
    return info
  } catch {}
}

接入自定义Apollo Link

如果你的项目中有使用Apollo Client，可以通过添加chushuLink收集graphql异常以及graphql接口调用记录

import { ApolloClient, HttpLink, concat } from '@apollo/client'
import { chushuLink } from '@fruits-chain/web-tracker'

export default new ApolloClient({
  link: concat(chushuLink, concat(otherLink1, concat(otherLink2, httpLink))),
  ...
})