@fruits-chain/chushu-native
v1.1.2
Published
react-native埋点项目
Downloads
28
Readme
Chushu ReactNative APP 埋点脚本
- 错误信息的收集和上报
- 设备信息的收集和上报
- 路由信息的收集和上报
初始化埋点
1、使用该脚本需要在根节点使用【initTracking】初始化脚本实例。
示例:
import { initTracking } from '@fruits-chain/chushu-native'
const App: React.FC = () => {
// accessKey可以通过在埋点平台创建应用后获取
// uploadUrl为埋点数据上传地址
// pv是否记录页面方位记录 默认false
initTracking({
accesskey: '$2b$10$YNQRLqrAQLoIvDSl2pXAQ.1A7sPQykoglzQDmk9goMrpgl7XjXOYi',
uploadUrl: 'http://192.168.10.84:4000/upload',
pv: true,
})
return <div>测试</div>
}
2、收集和上报需要用户 id 作为分析依据,需在外部调用【trackingInstance.setUserHash】,获取 userId
示例:
import { initTracking } from '@fruits-chain/chushu-native'
getUserInfo: async () => {
const trackingInstance = initTracking()
try {
const res: Result<Partial<IUserInfo>> = await getLoginUserInfo()
const userInfo = res.data
trackingInstance.setUserHash(`${userInfo?.userId}`)
set({ userInfo })
} catch (error) {}
},
错误信息
1、其他错误信息收集已在内部集成,接口报错需在外部调用【trackingLink】
示例:
// graphql接口
import { ApolloClient, HttpLink, concat } from '@apollo/client'
import { trackingLink } from 'app-tracker@fruits-chain/chushu-native'
export function createClient(httpUri?: string) {
const httpLink = new HttpLink({})
return {
client: new ApolloClient({
link: concat(trackingLink, httpLink),
}),
}
}
// restful接口
import { trackingInterceptors } from '@fruits-chain/chushu-native'
/**
* 响应拦截器
*/
axios.interceptors.response.use(
(response: AxiosResponse<RestfulResult | RestfulUploadResult>) => {
trackingInterceptors(response)
},
error => {},
)
路由信息
路由信息的收集需要在路由配置处调用【trackingInstance.setRouteInfo】
示例:
import { initTracking } from 'app-tracker'
import type { NavigationContainerRef } from '@react-navigation/native'
const navigationRef = useRef<NavigationContainerRef<ReactNavigation.RootParamList>>()
const trackingInstance = initTracking()
<NavigationContainer
ref={navigationRef}
onReady={() => {
const rootState = navigationRef.current?.getRootState?.()
trackingInstance.setRouteInfo(rootState)
}}
onStateChange={state => {
trackingInstance.setRouteInfo(state)
}}>
<Stack.Navigator>
<Stack.Screen
name={route.name}
component={route.component}
options={{ ...defaultStackRouteOptions, ...route.options }}
/>
</Stack.Navigator>
</NavigationContainer>