1.0.0 • Published 2 years ago
reflective v1.0.0
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]))
1.0.0
2 years ago