腾讯云可观测平台 ReactNative 应用场景

说明：
目前 RN 强绑定终端运行，如果已经有了 Android 或 iOS 的应用，请直接使用对应的 AppKey，如没有请创建时选择 Android 或 iOS 应用。
仅支持 RN 0.60.0以上版本。
自动集成
执行如下命令安装依赖，即可自动集成 SDK。
yarn add @qapm/react-native-qapm --save
配置原生支持
Android 平台
配置 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!
注意：
如果您开启了混淆，请保管好 .map 的符号表文件，如果您有多份 .map，请一起压缩成 zip 并上传。
如果原生也使用了 QAPM，不需要再引入 QAPM 依赖，SDK 会直接使用 API 的方式让上层模块可以直接调用。
ReactNative 应用场景

本页目录：

自动集成

配置原生支持

Android 平台

配置 Gradle

配置权限

配置混淆

iOS 平台

初始化 QAPM SDK

接入路由追踪

验证接入是否成功
