快速开始¶
本文用于提供 React Native RUM SDK 的最短接入路径，帮助您以最少步骤完成一次可验证的数据上报。
前置准备¶
开始前，请先完成以下准备：
- 在用户访问监测中分别创建 React Native Android 与 React Native iOS 应用，并获取对应的
App ID - 确认上报地址与认证方式：
- 本地环境部署：准备
datakitUrl - 公网 DataWay：准备
datawayUrl和clientToken - 在项目中安装
@cloudcare/react-native-mobile - 如果需要采集 Android 原生启动、网络请求或 WebView 数据，请同时配置 Android
ft-plugin
接入步骤¶
- 安装 React Native SDK
- 在应用启动时初始化
FTMobileConfig - 初始化
FTRUMConfig并传入 Android 与 iOS 的App ID - 可选：初始化
FTLogConfig与FTTraceConfig - 开启调试日志，运行应用并触发一次页面打开、点击或网络请求
- 在控制台与观测云平台确认数据已成功上报
安装 SDK¶
安装方式请直接参考 应用接入。
最小初始化示例¶
import {
FTMobileReactNative,
FTReactNativeRUM,
FTMobileConfig,
FTRUMConfig,
ErrorMonitorType,
DeviceMetricsMonitorType,
DetectFrequency,
} from '@cloudcare/react-native-mobile';
async function sdkInit() {
// 本地环境部署使用 { datakitUrl: 'http://10.0.0.1:9529' }
const config: FTMobileConfig = {
datawayUrl: 'https://open.dataway.url',
clientToken: 'client_token',
debug: true,
};
await FTMobileReactNative.sdkConfig(config);
const rumConfig: FTRUMConfig = {
androidAppId: 'android_app_id',
iOSAppId: 'ios_app_id',
enableAutoTrackUserAction: true,
enableAutoTrackError: true,
enableNativeUserResource: true,
};
await FTReactNativeRUM.setConfig(rumConfig);
}
请在顶层
index.js中注册 App 之前完成 SDK 初始化，确保在调用 SDK 其他方法前，初始化已经完成。
import App from './App';
async function initSDK() {
await sdkInit();
}
initSDK();
AppRegistry.registerComponent('main', () => App);
可选：初始化 Log 和 Trace¶
import {
FTReactNativeLog,
FTReactNativeTrace,
FTLogConfig,
FTTraceConfig,
} from '@cloudcare/react-native-mobile';
async function setupExtraModules() {
const logConfig: FTLogConfig = {
enableCustomLog: true,
enableLinkRumData: true,
};
await FTReactNativeLog.logConfig(logConfig);
const traceConfig: FTTraceConfig = {
enableNativeAutoTrace: true,
};
await FTReactNativeTrace.setConfig(traceConfig);
}
验证接入是否成功¶
- 保持
debug: true开启，运行应用 - 打开一个页面，点击一个按钮，或发起一次网络请求
- 查看调试日志，确认 SDK 初始化和数据同步已正常执行
- 返回观测云控制台，确认应用中已出现对应的 RUM 数据
如果需要进一步排查，请查看 故障排查。
下一步¶
- 完整安装与接入说明，请继续阅读 应用接入
- 所有初始化参数说明，请阅读 SDK 初始化
- RUM、Log、Trace 的详细配置，请阅读 RUM 配置、Log 配置、Trace 配置
- 如果需要接入 WebView 监测，请阅读 WebView 数据监测
- 如果需要接入 Session Replay，请阅读 Session Replay
- 如果项目是原生与 React Native 混合开发，请阅读 原生与 React Native 混合开发