React Native 部署

本文档适用于纯React Native项目，若项目为原生+ React Native，请参见Android/iOS原生嵌码文档及 React Native Bundle文档。

React 配置

1. 安装依赖。

   npm install --save @tingyunapp/react-native-tingyunapp

2. 配置Transform。

   • 若 React Native 版本大于等于 0.59，在根目录的 metro.config.js 的 transformer 中添加 transformer.babelTransformerPath。

   • 若 React Native 版本等于 0.57 或 0.58，在根目录的 rn-cli.config.js 的 transformer 中添加 transformer.babelTransformerPath , 示例如下：

     module.exports = {
       transformer: {
         getTransformOptions: async () => ({
           transform: {
             experimentalImportSupport: false,
             inlineRequires: false,
           },
         }),
         babelTransformerPath: require.resolve('@tingyunapp/react-native-tingyunapp/src/NBSTransformer.js'),
       },
     };

     说明：若项目使用react-native bundle 打包且配置了--config参数，请在配置的js文件中添加 transformer.babelTransformerPath 。

   • 若React Native 版本小于0.57，在项目根目录下创建rn-cli.config.js（如果没有该文件）添加如下内容：

     module.exports = {
       getTransformModulePath() {
         return require.resolve('@tingyunapp/react-native-tingyunapp/src/NBSTransformer.js');
       },
       getSourceExts() {
         return ['js'];
       }
     }

     说明：若项目使用react-native bundle 打包且配置了--config参数，请在配置的js文件中添加getTransformModulePath 。

Android Platform 配置

Gradle 配置

在 android 目录下的 project 级别的 build.gradle 文件中添加以下内容。

buildscript {
    repositories {
        maven { url "http://nexus2.tingyun.com/nexus/content/repositories/snapshots/" }
    }
    dependencies {
		classpath "com.networkbench:tingyun-ea-agent-android-gradle-plugin:2.15.1"
    }
}

allprojects {
    repositories {
        maven { url "http://nexus2.tingyun.com/nexus/content/repositories/snapshots/" }
    }
}

在 app 级别的 build.gradle 文件中添加以下内容。

apply plugin:'newlens'

dependencies {
    compile "com.networkbench:tingyun-ea-agent-android:2.15.1"
    compile "com.networkbench.newlens.agent.android2:nbs.newlens.nativecrash:2.0.0"
}

配置权限

在 AndroidMainfest.xml 文件中增加以下的权限

<!--必要权限，用以与服务端交互-->
<uses-permission android:name="android.permission.INTERNET"/>
<!--非必要权限，用以获取当前设备的网络状态和WiFi状态，如：2G、3G、4G、WiFi，建议添加-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<!--非必要权限，用以获取 targentVersion 29 及以上 Android 10 设备的网络状态-->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<!--非必要权限，用以使用「可视化操作命名功能」-->
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW"/>

配置混淆

在 proguard 混淆配置文件中增加以下内容，以免基调听云App SDK 不可用。

# ProGuard configurationsfor NetworkBench Lens
-keep class com.networkbench.** { *; }
-dontwarn com.networkbench.**
-keepattributes Exceptions, Signature, InnerClasses
# End NetworkBench Lens

若需要保留行号信息，请在 proguard.cfg 中添加以下内容。

-keepattributes SourceFile,LineNumberTable

采集react-native-webview数据配置

若项目中使用了 react-native-webview ，采集其 WebView 数据需在 react-native-webview 的 build.gradle 文件中添加以下内容。

dependencies {
    provided "com.networkbench:tingyun-ea-agent-android:2.15.1"
}

采集 WebView 数据需在 RNCWebChromeClient 的 onProgressChanged 函数中调用 NBSWebChromeClient.initJSMonitor(view, newProgress)。代码示例如下：

@Override
    public void onProgressChanged(WebView webView, int newProgress) {
      super.onProgressChanged(webView, newProgress);      com.networkbench.agent.impl.instrumentation.NBSWebChromeClient.initJSMonitor(webView, newProgress);
    }

配置 link

React Native 0.60 以下版本，SDK 桥接方法的类可能不会打包到 apk 中。你可以通过以下方法解决：

手动配置

将 SDK 桥接类复制到 Android Native 项目中。

将 node_modules\@tingyunapp\react-native-tingyunapp\android\src\main\java\com\tingyun\app 目录下的 RNReactNativeTingyunappModule.java 和 RNReactNativeTingyunappPackage.java 两个类复制到 Native 项目中

在添加 MainReactPackage 后，添加基调听云的 ReactPackage。

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new com.tingyun.app.RNReactNativeTingyunappPackage()//添加基调听云 ReactPackage
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
};

2.5.2 自动配置

在项目根目录下执行 link 命令。

react-native link

若项目中 gradle 版本低于 5.4.1，需要升级：

1、修改 android 目录下 build.gradle 中的 com.android.tools.build:gradle 版本改为 3.4.0 或以上版本。

classpath 'com.android.tools.build:gradle:3.4.0'

2、修改 android/gradle/wrapper 目录下 gradle-wrapper.properties 中的 gradle 版本修改为5.4.1 或以上版本。

distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip

若编译时出现 The project name ’@tingyunapp/react-native-tingyunapp‘ must not contain any of the following characters: [ /, \, :, <, >, ", ?, *, |] 错误：

1、修改android/app下的build.gradle文件，"/" 修改为 "-。

compile project(':@tingyunapp-react-native-tingyunapp')

2、修改android目录下的settings.gradle文件，"/" 修改为 "-"。

include ':@tingyunapp-react-native-tingyunapp'
project(':@tingyunapp-react-native-tingyunapp').projectDir = new File(rootProject.projectDir, '../node_modules/@tingyunapp/react-native-tingyunapp/android')

iOS Platform 配置

iOS 平台如果使用了 cocoapods，在 Podfile 文件中加入：

pod 'RNReactNativeTingyunapp', :path => '../node_modules/@tingyunapp/react-native-tingyunapp'

执行 pod install 命令。如果没有使用 cocoapods，手动在工程中添加依赖。

初始化 SDK

您可以在项目根目录新建 tingyunapp.config.js 文件，并将以下代码复制到该文件中，并修改 appKey 及 redirectURL 等配置，SDK 将会读取该文件自动初始化。

module.exports = {
    android : {
        appKey : 'xxx',  //替换为报表应用的 AppKey
        redirectURL : 'xxx', //redirect 地址，请联系技术支持获取
        httpEnable : false, //默认以 https 协议上传数据
        locationEnable : false,//默认不采集地址位置信息
        options : 511  //首次启动功能开关 默认只启动crash模块
    },
    ios : {
        appKey : 'xxx',
        redirectURL : 'xxx',
        httpEnable : false,
        locationEnable : false,
        options : 511
    },
	 react : {
	    filter : {
	        /**
	         * Allows you to filter the instrumentation 
	         * True = Will be instrumented
	         */
	        instrument: (filename) => {
	            return true;
	        }
	    }
	}
}

打包编译

可以使用以下命令打包编译。

react-native run-android

嵌码验证

Android Platform

1、嵌码完成后可通过 “LogCat” 查看基调听云App SDK日志输出结果，用以进行数据收集服务器校验 TAG 为 NBSAgent，标准日志输出结果如下所示：

NBSAgent start
NBSAgent enabled
NBSAgent V “TingYun_Version” //TingYun_Version 为当前SDK的版本号
connect success

2、数据功能完整性校验。

嵌码完成后可通过 “LogCat” 查看基调听云 SDK 日志输出结果，用以进行数据功能完整性校验 TAG 为 TingYun，标准日志输出结果如下所示：

D/TingYun: Network Switch is true
D/TingYun: UI Switch is true
D/TingYun: Crash switch is true
D/TingYun: webView switch is true
D/TingYun: ANR monitor switch is true
D/TingYun: UserAction Switch  is true
D/TingYun: cdnSwitch Switch  is true

iOS Platform

部署成功后可以在 xcode 控制台查看日志输出：

NBSAppAgent  SDK_Version
---->start!
Success to connect to NBSSERVER

高级功能

自定义组件名称

可以对组件设置 ty_name 属性，SDK 会优先取 ty_name 的值为组件命名。

//示例一
export default class DrawerScreen extends PureComponent {

static defaultProps = {
    ty_name:'自定义侧栏',
    }
}

//示例二
const TabScreens = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Page: PageScreen,
  },
  {
    defaultNavigationOptions: {
        tabBarButtonComponent: props => <BottomTabBar ty_name='自定义底栏' {...props} />,
    },
}

用户自定义ID

用户自定义ID为当前用户设置唯一标示码，在任意位置均可设置UserID。

1、相关接口。

//最多包含64个字符，支持中文、英文、数字、下划线，但不能包含空格或其他的转义字符
NBSAppAgent.setUserIdentifier(var userIdentifier);

2、代码示例。

import {NBSAppAgent} from '@tingyunapp/react-native-tingyunapp';
NBSAppAgent.setUserIdentifier('userId')

面包屑

面包屑能够更好的协助用户调查崩溃发生的原因，可以知晓用户发生崩溃之前的代码逻辑与崩溃轨迹结合使用能够更好的复现用户崩溃场景。

1、相关接口。

//最多包含100个字符，支持中文、英文、数字、下划线
NBSAppAgent.leaveBreadcrumb(var breadcrumb);

2、代码示例。

import {NBSAppAgent} from '@tingyunapp/react-native-tingyunapp';
NBSAppAgent.leaveBreadcrumb('breadcrumb');

自定义附加信息

用户可以在初始化之后任意位置配置该接口，最多可添加10条附加信息。每条附加信息最大支持100个字节随崩溃上传。

1、相关接口。

//value 最大支持100个字节
NBSAppAgent.setCustomerData(var value,var key)

2、代码示例。

import {NBSAppAgent} from '@tingyunapp/react-native-tingyunapp';
NBSAppAgent.setCustomerData("张三","name");}

自定义Event

自定义事件用于统计App中的任意事件，开发者可以在SDK初始化后的任意位置添加自定义事件，并设置对应上传参数。如：真实用户操作时候单击某个功能按钮或触发了某个功能事件等。

1、相关接口。

//eventId最多包含32个字符，支持中文、英文、数字、下划线，但不能包含空格或其他的转义字符
//map的key可包含英文字母、下划线、数字，且必须以字母开关，value支持Number，String，List<String>，String最大长度限制为255，List最大长度为100
NBSAppAgent.trackEvent(var eventId，var tag, var map);

2、代码示例。

import {NBSAppAgent} from '@tingyunapp/react-native-tingyunapp';
NBSAppAgent.trackEvent("Login","tag",{"uid":"zhangsan"});

注意事项

若没有使用 tingyunapp.config.js，支持在Native代码中初始化SDK。

Android Platform

在 “Application” 中的 onCreate() 方法初始化Android SDK。

NBSAppAgent
.setLicenseKey("AppKey")//"Appkey" 请从私有化平台报表获取
.setRedirectHost("Host")//"Host" 为私有化平台 Redirect 服务器地址
.startInApplication(this.getApplicationContext());

若后端HTTPS使用的是非认证证书，需设置 setDefaultCert(false)。

NBSAppAgent
.setLicenseKey("AppKey")//"Appkey" 请从私有化平台报表获取
.setRedirectHost("Host")//"Host" 为私有化平台 Redirect 服务器地址
.setDefaultCert(false)
.startInApplication(this.getApplicationContext());

SDK 默认以HTTPS上传数据，若服务端只支持HTTP，需设置 setHttpEnabled(true)。

NBSAppAgent
.setLicenseKey("AppKey")//"Appkey" 请从私有化平台报表获取
.setRedirectHost("Host")//"Host" 为私有化平台 Redirect 服务器地址
.setHttpEnabled(true)
.startInApplication(this.getApplicationContext());

iOS Platform

1. 将@tingyunapp/react-native-tingyunapp/ios/lib中tinyunApp.framework下的NBSAppAgent.h文件添加到待监测的App工程中。

2. 在待监测 App 的 pch 文件中引入基调听云App SDK的头文件。

   #import "NBSAppAgent.h"

3. 初始化 SDK。

   在嵌码项目工程 main.m 的 main 方法中添加初始化；也可以在 AppDelegate.m 的application:didFinishLaunchingWithOptions:（该方法中初始化会采集不到App启动时间）方法中初始化。

   int main(int argc, char * argv[]) {
       @autoreleasepool {
           [NBSAppAgent startWithAppID:@"YOUR_APPKEY" location:YES];
           return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
       }
   }