React Native Deployment

This documentation applies to pure React Native projects. If the project is native + React Native, please refer to Android/iOS native instrumentation documentation and React Native Bundle documentation.

React Configuration

1. Install dependencies.

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

2. Configure Transform.

   • If React Native version is greater than or equal to 0.59, add transformer.babelTransformerPath in the transformer of metro.config.js in the root directory.

   • If React Native version equals 0.57 or 0.58, add transformer.babelTransformerPath in the transformer of rn-cli.config.js in the root directory, example as follows:

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

     Note: If the project uses react-native bundle packaging and configures --config parameter, please add transformer.babelTransformerPath in the configured js file.

   • If React Native version is less than 0.57, create rn-cli.config.js in the project root directory (if this file doesn't exist) and add the following content:

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

     Note: If the project uses react-native bundle packaging and configures --config parameter, please add getTransformModulePath in the configured js file.

Android Platform Configuration

Gradle Configuration

Add the following content to the project-level build.gradle file in the android directory.

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/" }
    }
}

Add the following content to the app-level build.gradle file.

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"
}

Configure Permissions

Add the following permissions in the AndroidMainfest.xml file

<!--Required permission for interacting with server-->
<uses-permission android:name="android.permission.INTERNET"/>
<!--Non-required permission for getting current device network status and WiFi status, such as: 2G, 3G, 4G, WiFi, recommended to add-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<!--Non-required permission for getting network status of targetVersion 29 and above Android 10 devices-->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<!--Non-required permission for using "Visual Operation Naming Functionality"-->
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW"/>

Configure Obfuscation

Add the following content to the proguard obfuscation configuration file to prevent Tingyun App SDK from becoming unavailable.

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

If you need to preserve line number information, please add the following content to proguard.cfg.

-keepattributes SourceFile,LineNumberTable

Collect react-native-webview Data Configuration

If react-native-webview is used in the project, to collect its WebView data, you need to add the following content to the build.gradle file of react-native-webview.

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

To collect WebView data, you need to call NBSWebChromeClient.initJSMonitor(view, newProgress) in the onProgressChanged function of RNCWebChromeClient. Code example as follows:

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

Configure link

For React Native versions below 0.60, SDK bridge method classes may not be packaged into the apk. You can solve this through the following methods:

Manual Configuration

Copy the SDK bridge classes to the Android Native project.

Copy the RNReactNativeTingyunappModule.java and RNReactNativeTingyunappPackage.java classes from the node_modules\@tingyunapp\react-native-tingyunapp\android\src\main\java\com\tingyun\app directory to the Native project

After adding MainReactPackage, add Tingyun's 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()//Add Tingyun ReactPackage
      );
    }

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

2.5.2 Automatic Configuration

Execute the link command in the project root directory.

react-native link

If the gradle version in the project is below 5.4.1, you need to upgrade:

1. Change the com.android.tools.build:gradle version in build.gradle under the android directory to 3.4.0 or above.

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

2. Change the gradle version in gradle-wrapper.properties under android/gradle/wrapper directory to 5.4.1 or above.

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

If compilation error The project name '@tingyunapp/react-native-tingyunapp' must not contain any of the following characters: [ /, \, :, <, >, ", ?, *, |] occurs:

1. Modify the build.gradle file under android/app, change "/" to "-".

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

2. Modify the settings.gradle file under the android directory, change "/" to "-".

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

iOS Platform Configuration

If iOS platform uses cocoapods, add the following to the Podfile:

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

Execute the pod install command. If cocoapods is not used, manually add dependencies to the project.

Initialize SDK

You can create a new tingyunapp.config.js file in the project root directory, copy the following code to this file, and modify configurations such as appKey and redirectURL. The SDK will read this file and initialize automatically.

module.exports = {
    android : {
        appKey : 'xxx',  //Replace with the AppKey of the reporting application
        redirectURL : 'xxx', //redirect address, please contact technical support to obtain
        httpEnable : false, //Default upload data using https protocol
        locationEnable : false,//Default not collect location information
        options : 511  //First launch feature switch, default only enables crash module
    },
    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;
	        }
	    }
	}
}

Package and Compile

You can use the following commands to package and compile.

react-native run-android

Instrumentation Verification

Android Platform

1. After instrumentation is complete, you can view Tingyun App SDK log output results through "LogCat" to perform data collection server verification. TAG is NBSAgent, standard log output results are as follows:

NBSAgent start
NBSAgent enabled
NBSAgent V "TingYun_Version" //TingYun_Version is the current SDK version number
connect success

2. Data functionality integrity verification.

After instrumentation is complete, you can view Tingyun SDK log output results through "LogCat" to perform data functionality integrity verification. TAG is TingYun, standard log output results are as follows:

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

After successful deployment, you can view log output in the xcode console:

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

Advanced Features

Custom Component Names

You can set the ty_name property for components, and the SDK will prioritize the ty_name value for component naming.

//Example one
export default class DrawerScreen extends PureComponent {

static defaultProps = {
    ty_name:'Custom Sidebar',
    }
}

//Example two
const TabScreens = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Page: PageScreen,
  },
  {
    defaultNavigationOptions: {
        tabBarButtonComponent: props => <BottomTabBar ty_name='Custom Bottom Bar' {...props} />,
    },
}

User Custom ID

User custom ID sets a unique identifier for the current user, and UserID can be set at any location.

1. Related API.

//Maximum 64 characters, supports Chinese, English, numbers, underscores, but cannot contain spaces or other escape characters
NBSAppAgent.setUserIdentifier(var userIdentifier);

2. Code example.

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

Breadcrumbs

Breadcrumbs can better help users investigate the cause of crashes. You can know the code logic before the user crashes, and combined with crash traces, you can better reproduce user crash scenarios.

1. Related API.

//Maximum 100 characters, supports Chinese, English, numbers, underscores
NBSAppAgent.leaveBreadcrumb(var breadcrumb);

2. Code example.

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

Custom Additional Information

Users can configure this API at any location after initialization, and can add up to 10 pieces of additional information. Each piece of additional information supports a maximum of 100 bytes and is uploaded with the crash.

1. Related API.

//value supports maximum 100 bytes
NBSAppAgent.setCustomerData(var value,var key)

2. Code example.

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

Custom Event

Custom events are used to count any events in the App. Developers can add custom events at any location after SDK initialization and set corresponding upload parameters. For example: when real users click a function button or trigger a function event during operation, etc.

1. Related API.

//eventId maximum 32 characters, supports Chinese, English, numbers, underscores, but cannot contain spaces or other escape characters
//map key can contain English letters, underscores, numbers, and must start with a letter, value supports Number, String, List<String>, String maximum length limit 255, List maximum length 100
NBSAppAgent.trackEvent(var eventId，var tag, var map);

2. Code example.

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

Notes

If tingyunapp.config.js is not used, SDK initialization in Native code is supported.

Android Platform

Initialize Android SDK in the onCreate() method of "Application".

NBSAppAgent
.setLicenseKey("AppKey")//"Appkey" please obtain from private platform reports
.setRedirectHost("Host")//"Host" is the private platform Redirect server address
.startInApplication(this.getApplicationContext());

If the backend HTTPS uses non-authenticated certificates, you need to set setDefaultCert(false).

NBSAppAgent
.setLicenseKey("AppKey")//"Appkey" please obtain from private platform reports
.setRedirectHost("Host")//"Host" is the private platform Redirect server address
.setDefaultCert(false)
.startInApplication(this.getApplicationContext());

SDK uploads data using HTTPS by default. If the server only supports HTTP, you need to set setHttpEnabled(true).

NBSAppAgent
.setLicenseKey("AppKey")//"Appkey" please obtain from private platform reports
.setRedirectHost("Host")//"Host" is the private platform Redirect server address
.setHttpEnabled(true)
.startInApplication(this.getApplicationContext());

iOS Platform

1. Add the NBSAppAgent.h file from the tinyunApp.framework in @tingyunapp/react-native-tingyunapp/ios/lib to the App project to be monitored.

2. Import Tingyun App SDK header file in the pch file of the App to be monitored.

   #import "NBSAppAgent.h"

3. Initialize SDK.

   Add initialization in the main method of the main.m file in the instrumented project; you can also initialize in the application:didFinishLaunchingWithOptions: method of AppDelegate.m (initialization in this method will not collect App startup time).

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