注意：说明：
一、自动集成
执行如下命令安装依赖，即可自动集成 SDK。
yarn add @qapm/react-native-qapm –save
二、配置 Gradle
1. 在工程级的 build.gradle文件下，增加 maven 依赖和 qapm-plugin 插件。
buildscript { repositories { … // 添加maven源 maven { url 'https://qapm-maven.pkg.coding.net/repository/qapm_sdk/android_release/' } … } dependencies { // 添加qapm-plugin插件 classpath 'com.tencent.qapmplugin:qapm-plugin:3.4' }}allprojects { repositories { … // 添加maven源 maven { url 'https://qapm-maven.pkg.coding.net/repository/qapm_sdk/android_release/' } … }}
注意：如果你的 gradle 版本小于7.4，则将 qapm-plugin 插件版本改为2.39。
2. 在 app的build.gradle 文件下，增加 qapm-plugin 的引用。
… // 引用插件 apply plugin: "qapm-plugin" … // 添加自动生成UUID的Task preBuild.dependsOn(UUIDGenerator)
三、配置权限
在AndroidMainfest.xml文件中增加以下的权限。
<!–上报信息所需–><uses-permission android:name="android.permission.INTERNET" /><!–采集信息所需–><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
四、配置混淆
在 proguard 混淆配置文件中增加以下内容，避免打包报错或 SDK 不可用。
-dontwarn com.tencent.cos.xml.**-dontwarn com.tencent.qcloud.**-keep class com.tencent.qapmsdk.** { *; }-dontwarn com.tencent.qapmsdk.**
五、iOS 平台
在 iOS 的工程路径下，执行pod install更新依赖。
pod install
六、初始化 QAPM SDK
在 RN 入口文件 index.js 中添加如下代码。
import { QAPM, QAPMModel, QAPMConfiguration, QAPMFuncBuilder, SdkVerbosity } from '@qapm/react-native-qapm';import { version as reactNativeVersion } from 'react-native/package.json';import { Platform } from 'react-native';const modelBuilder = new QAPMFuncBuilder() .enable(QAPMModel.MODEL_CRASH) .build();// 如果你工程的原生层也使用到了QAPM，请和原生开发联系，确保以下的参数设置与原生侧一致，否则可能会出现数据错乱的问题const config = new QAPMConfiguration.Builder() .setAppKey(Platform.OS === 'ios' ? '<your-ios-appKey>' : '<your-android-appKey>') // 上报凭证 .setAppVersion('<your-app-version>') // app应用版本 .setCrossLibraryVersion(reactNativeVersion) // 引擎版本 .setCrossVersion('<your-cross-version>') // 跨端应用版本 .setUserId('<user-id>') // 用户ID .setDeviceId('<device-id>') // 设备ID .setServerHost('<report-url>') // 上报地址 .setPhoneModel('<user-phone-model>') // 设备类型 .setLogLevel(SdkVerbosity.DEBUG) // 设置日志等级 .setAppFuncSwitch(modelBuilder) .build();QAPM.start(config);
七、接入路由追踪
·如果你使用了@react-navigation/native，则在App.tsx（根据接入应用而定）中添加如下代码。
import { QAPMReactNavigationTracking } from '@qapm/react-native-qapm';const Stack = createNativeStackNavigator();function App(): React.JSX.Element { const navigationRef: React.Ref< NavigationContainerRef<ReactNavigation.RootParamList> > = React.useRef(null); return ( <NavigationContainer ref={navigationRef} onReady={() => { // 将路由信息传给QAPM QAPMReactNavigationTracking.start(navigationRef.current); }} > <!– 路由定义 –> </NavigationContainer> );}
·如果项目没有使用@react-navigation/native，可以使用手动上报。
import { QAPMReactNavigationTracking } from '@qapm/react-native-qapm';// 主动上报页面QAPMReactNavigationTracking.updatePage('HomeScreen');
八、验证接入是否成功
·关键字搜索QAPM_ReactNative，如出现以下日志（以 android 为例），则代表接入成功。
(NOBRIDGE) INFO QAPM_ReactNative: QAPM react navigation track start! (NOBRIDGE) INFO QAPM_ReactNative: state change , current route key Home-jXJD2FvowJDjvRHrSaPAr, name Home (NOBRIDGE) DEBUG QAPM_ReactNative: onConfigFetch success: true, message: success, mode: 100000000000000000000000000000000000000000, config: (NOBRIDGE) INFO QAPM_ReactNative: checking for QAPMErrorTracking (NOBRIDGE) INFO QAPM_ReactNative: start QAPMErrorTracking (NOBRIDGE) INFO QAPM_ReactNative: start error monitor success
·如出现以下日志，说明接入失败，请检查 appKey 等参数是否填写正确。
QAPM_ReactNative: start rn qapm sdk failed, because xxxx!