reflective-core

用于前端监控的核心库

手工代码埋点

  let reflective = new rft.Reflective();
  reflective.collect({});

声明代码埋点

目前支持的指令有rft-click，rft-input

vue目前支持的指令有v-rft-click，v-rft-input

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import * as rft from 'reflective'
  import localforage from 'localforage'
  import { gzip } from 'pako'
  import axios from 'axios'

  // 创建Rft核心对象
  const refective = rft.Reflective.getInstance()
  // 创建vue根节点，但是别mount节点
  const app = createApp(App).use(store).use(router)

  const { ActionCollector, Vue2ActionCollector, Vue3ActionCollector } = {...rft.collecor}

  // 下面几种声明式收集器，根据平台环境选择一种即可
  // 1 基于Vue3自定义指令的声明埋点初始化 (根节点不能使用自定义指令)
  refective.inject(new Vue3ActionCollector(app))
  // 2 基于手工扫描自定义指令的声明埋点初始化
  // reflective.inject(new ActionCollector());
  // 扫描当前元素是否声明埋点，scan(true)时，会连同子节点遍历一起扫描
  // document.querySelector('.test').scan();
  // 3 基于Vue2自定义指令的声明埋点初始化
  // reflective.inject(new Vue2ActionCollector(Vue));

  const { LocalForageStore } = {...rft.store}
  // 基于LocalForage api的持久化插件
  // 参数1：localforage实例或者实现LocalForage api的自定义对象
  // 参数2：多长时间上报一次
  // 参数3：一次上报多少条埋点
  refective.inject(new LocalForageStore(localforage.createInstance({
  }), 5000, 10))

  const { StringTransformer } = {...rft.transformer}
  // 转换埋点信息为string的插件，传入一个将MonitorInfo[]转成string的方法，该方法中可用添加额外逻辑，比较对数据进行压缩
  // 如果没有改插件，则默认使用JSON.stringify对数据进行序列化
  refective.inject(new StringTransformer(function (data: MonitorInfo[]): string {
    return gzip(JSON.stringify(data), { to: 'string' })
  }))

  const { RestfulReport } = {...rft.reporter}
  // 上报组件，实现restful风格接口
  // 参数1：接口
  // 参数2：实现axios风格接口的对象
  refective.inject(new RestfulReport('http://www.baidu.com', axios))

  app.mount('#app')

web基本埋点

  import * as rft from 'reflective'

  const { WebCommonCollect } = {...rft.collecor}
  // 性能（基于performace获取当前页面加载速度）， 异常(全局异常，资源加载异常，未捕获promise异常)， 路由（通过拦截pushState和replaceState实现）
  const { PERFORMANCE, EXCEPTION, ROUTE } = {...rft.collector.WebCollectType}

  refective.inject(new WebCommonCollect([PERFORMANCE, EXCEPTION, ROUTE]))