@fox-js/trace v4.0.1-0

Fox4.0前端-埋点

说明

Fox前端平台配套的埋点框架，能够获取应用运行时的路由导航、服务请求、UI操作、原生调用、错误异常等操作痕迹。

Install

NPM

npm i @fox-js/trace@next

YARN

yarn add @fox-js/trace@next

PNPM

pnpm add @fox-js/trace@next

使用说明

埋点初始入口文件 src/utils/tracer/index.ts

/*
 * @version: 1.0
 * @Author: 江成
 * @Date: 2024-05-14 08:07:57
 */
import { App } from 'vue'
import { Fox, useRoute } from '@fox-js/fox'
import { FoxPlugins } from '@fox-js/plugins'
import foxTrace, { setLogger, getLogger, getTraceId, ,TraceOptions, type CustomAction} from '@fox-js/trace'
// 调试logger
import { DebugLogger } from './loggers/DebugLogger'
// 原生logger
import { NativeLogger } from './loggers/NativeLogger'

export default {
  /**
   * 安装
   */
  install(app: App, fox: Fox, foxPlugins: FoxPlugins) {
    // 获取plugin composer
    const composer = foxPlugins.global
    // 设置默认logger
    // setLogger(new DebugLogger())
    // 设置原生logger
    setLogger(new NativeLogger())

    // trace 参数
    const traceOptions: TraceOptions = {
      // 记录摘要信息
      recordStrategy: 'abstract',
      // 记录痕迹范围
      scopes: ['ui', 'route', 'service', 'native', 'error'],
      // native blacklist
      nativeBlacklist: ['logger', 'trace']
    }
    // 安装trace
    foxTrace.install(app, fox, composer, traceOptions)
  }
}

配置参数

 // trace 参数
    const traceOptions: TraceOptions = {
      // 记录摘要信息
      recordStrategy: 'abstract',
      // 记录痕迹范围
      scopes: ['ui', 'route', 'service', 'native', 'error'],
      // native blacklist
      nativeBlacklist: ['logger', 'trace']
    }
    

Logger扩展

埋点信息最终会通过logger输入，我们可以通过扩展Logger，把信息上送到埋点服务。目前提供了两个Logger

• DebugLogger 调试logger，仅仅把信息通过console打印出来。
• NativeLogger 把埋点信息传给原生接口，最终委托原生api缓存并上送数据

Logger扩展说明

步骤一

在工程目录src/utils/tracer/loggers，新增自定义Logger，需要继承并实现接口Logger, 例如

/*
 * @version: 1.0
 * @Author: 江成
 * @Date: 2024-05-14 08:37:18
 */

import { Logger } from '@fox-js/trace'

/**
 * debug logger
 */
export class DebugLogger implements Logger {
  /**
   * log
   * @param args
   */
  public log(...args: any[]): void {
    // 获取动作
    const action: Record<string, any> = typeof args[0] === 'string' ? JSON.parse(args[0]) : args[0]
    // 获取trace scope
    const traceScope = `${action.traceScope}`
    // 获取trace type
    const traceType = `${action.traceType}`
    // 获取trace id
    const traceId = `${action.traceId}`
    // message
    const msg = `[${traceScope}]-[${traceType}]-[${traceId || '*'}]:`
    // log
    console.log(msg, action)
  }
}

步骤二

在src/utils/tracer/index.ts中引入并注册Logger，例如：

/*
 * @version: 1.0
 * @Author: 江成
 * @Date: 2024-05-14 08:07:57
 */
import { App } from 'vue'
import { Fox, useRoute } from '@fox-js/fox'
import { FoxPlugins } from '@fox-js/plugins'
import foxTrace, { setLogger, getLogger, getTraceId, ,TraceOptions, type CustomAction} from '@fox-js/trace'
// 调试logger
import { DebugLogger } from './loggers/DebugLogger'

export default {
  /**
   * 安装
   */
  install(app: App, fox: Fox, foxPlugins: FoxPlugins) {
    // 获取plugin composer
    const composer = foxPlugins.global
    // 设置默认logger
    setLogger(new DebugLogger())
  }
}

业务数据收集

除了默认的埋点数据外，如果进行额外的业务收集收集。

// 导入trace log
import { useTraceLog } from '@/utils/tracer

// 获取log函数
const log = useTraceLog()

// 收集数据
log({
  traceScope:'custom',
  message:'业务信息'
})