@tingyunapp/react-native-tingyunapp

v2.0.0

Published

9 months ago

>本文档适用于纯 React Native 项目，若项目为原生 + React Native ，请使用 Android/iOS 原生嵌码文档及 TingYun_SDK_React_Native_Bundle 文档

Downloads

133

0High
0Medium
0Low

tingyunapp

react-native

SDK部署-React Native 方式

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

1、React 配置

1.1 安装依赖

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

1.2 配置 Transform

若 React Native 版本大于等于 0.72.1，在根目录的 metro.config.js 的 transformer 中添加 transformer.babelTransformerPath，示例如下：

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
transformer: {
    babelTransformerPath: require.resolve(
      '@tingyunapp/react-native-tingyunapp/src/NBSTransformer.js',
    ),
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

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

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

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

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

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

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

2、Android Platform 配置

2.1 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.4"
    }
}

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.4"
    compile "com.networkbench.newlens.agent.android2:nbs.newlens.nativecrash:2.0.0"
}

2.2 配置权限

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

<!--必要权限，用以与服务端交互-->
<uses-permission android:name="android.permission.INTERNET"/>
<!--非必要权限，用以获取当前设备的网络状态和WiFi状态，如：2G、3G、4G、WiFi，建议添加-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<!--非必要权限，用以获取 targetSdkVersion 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"/>

2.3 配置混淆

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

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

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

-keepattributes SourceFile,LineNumberTable

2.4 采集 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);
    }

2.5 配置 link

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

2.5.1 手动配置

将 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，需要升级

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

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

修改 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: [ /, , :, <, >, ", ?, *, |] ” 错误

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

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

修改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')

3、iOS Platform 配置

iOS 平台如果使用了 cocoapods，在 Podfile 文件中加入「ios目录与node_module同级」

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

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

4、初始化 SDK

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

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

5、打包编译

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

react-native run-android

6、嵌码验证

6.1 Android Platform

1、嵌码完成后可通过 “LogCat” 查看听云 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

6.2 iOS Platform

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

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

7、高级功能

捕获JS错误

在App.js(.tsx)或者index.js(tsx)中增加以下代码

import { NBSErrorHandler } from '@tingyunapp/react-native-tingyunapp';
NBSErrorHandler.registerHandler();

自定义组件名称

可以对组件设置 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"});

自定义页面

自定义页面用于完善SDK对于页面的统计功能，对于某些无法自动采集的页面，可以通过自定义页面接口来生成页面数据。

1、相关接口:

NBSAppAgent.startPage(var pageName);
NBSAppAgent.finishPage(var pageName);

2、代码示例:

import {NBSAppAgent} from '@tingyunapp/react-native-tingyunapp';
NBSAppAgent.startPage('Details');
NBSAppAgent.finishPage('Details');

启动时间修正

SDK采集启动时间的规则为：SDK启动至rootViewController的viewDidAppear执行，对于RN项目来说，rootViewController的viewDidAppear执行之后，启动并未完成，首屏内容尚未完全加载，故可通过设置自定义启动结束点的方式来修正启动时间：

    [NBSAppAgent setRedirectURL:@"wkrt.tingyun.com"];
    ///设置是否自定义启动的结束点
    [NBSAppAgent customLaunchEnd:YES];
    [NBSAppAgent setStartOption:NBSOption_Net|NBSOption_Crash|NBSOption_UI];
    [NBSAppAgent startWithAppID:@"c0e7b6222dfe4b31860dd67e57eabdd8"];

如此设置之后，SDK即会在RN项目的RCTContentDidAppearNotification通知发出之后，当成启动结束。

8、注意事项

SDK 支持在 native 代码中初始化

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

1.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());

2.iOS Platform

1、在待监测 App 的 pch 文件中引入听云 App 探针的头文件。

「注：1.0.2及以前版本升级请按如下导入头文件」

#import <tingyunApp/NBSAppAgent.h>

2、初始化 SDK。

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

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

saas 2.0 环境暂不支持自定义错误接口

需手动注释 reportError 接口的实现

找到 node_modules\@tingyunapp\react-native-tingyunapp\android\src\main\java\com\tingyun\app\RNReactNativeTingyunappModule.java 文件，将 reportError 方法的实现注释。    
    @ReactMethod
    public void reportError(String name, String message, String stack){
    //方法名保留，方法实现内容注释
    //try {
    //    NBSAppAgent.reportErrorWeb(message, null, stack, 2);
    //} catch (Throwable e) {}
    }

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

SDK部署-React Native 方式

1、React 配置

1.1 安装依赖

1.2 配置 Transform

2、Android Platform 配置

2.1 Gradle 配置

2.2 配置权限

2.3 配置混淆

2.4 采集 react-native-webview 数据配置

2.5 配置 link

2.5.1 手动配置

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

在添加 MainReactPackage 后，添加听云的 ReactPackage

2.5.2 自动配置

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

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

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

3、iOS Platform 配置

4、初始化 SDK

5、打包编译

6、嵌码验证

6.1 Android Platform

6.2 iOS Platform

7、高级功能

捕获JS错误

自定义组件名称

用户自定义ID

面包屑

自定义附加信息

自定义Event

自定义页面

启动时间修正

8、注意事项

SDK 支持在 native 代码中初始化

1.Android Platform

2.iOS Platform

saas 2.0 环境暂不支持自定义错误接口