@efox/reacttrace

给react应用注入埋点代码，实现业务代码和埋点代码隔离

初始化(ReactTrace)

import http from "./http";
import { useStores } from "./stores"; // 具体可看example项目
import ReactTrace, {Trace} from '@efox/reacttrace'

const components = {}

// 1. 实例化trace
const trace = new ReactTrace({
  components,
  axios,
  useStores
})
// 2. 暴露useTraceHook钩子
const useTraceHook = trace.useTraceHook

// 3. 给APP组件包裹上Trace组件
<Trace>
  <App />
</Trace>

ReactTrace初始化参数：Object

Name	Type	Description
components	object	以组件作为划分单位的埋点逻辑，格式如{[组件名]: [{单个处理行为，格式如ComponentItem格式}]}，详细使用可见以下篇章
axios	Axios	Axios实例
useStores	Function	mobx的store方法，具体看example使用

组件中注入hook(useTraceHook)

假如我们有个组件函数，名字叫about，则在该组件引入hook书写如下：

const [count, setCount] = useState(1)

useTraceHook('about', { // 埋点逻辑中需要用到的局部变量
    count
})

useTraceHook参数：

参数1: string, 组件名，作为唯一id

参数2: object, 需要监听的使用useState生成的局部变量集合

components使用

ComponentItem参数：Object

Name	Type	Description
trigger	string	处理类型，如事件和模拟生命周期
el	string	事件触发时，需要填写元素目标
listener	({$store, $scope, watch, request}) => void	在对应时机触发的回调函数，具体使用看listener方法使用

about组件注入hook后，需要在components中写about的key值对应的埋点逻辑，具体场景划分为两类：

1. 用户行为事件触发

比如针对id为clickbutton的dom元素的用户Click事件的监听后，需要执行对应的埋点逻辑：

const components = {
    about: [
        {
            trigger: 'click', // 针对某个元素的用户行为监听
	        el: '#clickbutton',
	        listener: ({$scope, $store, request, watch}) => {
                // 埋点逻辑代码
	    	}
        }
    }
    ]
}

2. react生命周期钩子触发

比如

const components = {
    about: [
        {
            trigger: 'componentDidMount', // 在componentDidMount生命周期钩子运行
            listener: ({watch, $scope, $store, request, event}) => {
                // 埋点逻辑代码
            }
        }
    ]
}

listener方法使用

函数参数说明： object

Name	Type	Description
$store	object	全部变量，useStores()生成
$scope	object	组件局部变量，需要手动传入
watch	Function	监听$store或者$scope方法
request	Function	拦截http请求处理

watch方法

watch参数：Object

Name	Type	Description
参数1	string/string[]	监听$store或者$scope下的变量，可以混合监听
参数2	(cur, pre) => void	监听变动处理函数， cur：现在的值 pre：上一个值

// 监听$store基础变量
watch('$store.aboutStore.name', async (cur, pre) => {
  // 埋点逻辑
})
// 监听$store引用变量
watch('$store.aboutStore.person', async (cur, pre) => {
  // 埋点逻辑
})
// 同时监听多个$store值
watch(['$store.aboutStore.name', '$store.aboutStore.person'], async (cur, pre) => {
  // 埋点逻辑
}
// 监听$scope基础变量
watch('$scope.count', async (cur, pre) => {
  // 埋点逻辑
})
// 监听$scope引用变量
watch('$scope.query', async (cur, pre) => {
  // 埋点逻辑
})
// 监听$scope引用变量中的某个具体值
watch('$scope.query.page', async (cur, pre) => {
  // 埋点逻辑
})
// 同时监听多个$scope值
watch(['$scope.count', '$scope.query'], async (cur, pre) => {
  // 埋点逻辑
}
// 混合监听$store和$scope变量
watch(['$store.aboutStore.name', '$scope.query'], async (cur, pre) => {
  // 埋点逻辑
})

request方法