@fruits-chain/chushu-native

Chushu ReactNative APP 埋点脚本

1. 错误信息的收集和上报
2. 设备信息的收集和上报
3. 路由信息的收集和上报

初始化埋点

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>