@efox/reacttrace v1.1.3

@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

组件中注入hook(useTraceHook)

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

const [count, setCount] = useState(1)

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

useTraceHook参数：

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

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

components使用

ComponentItem参数：Object

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

watch方法

watch参数：Object

// 监听$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方法