React Native Deployment

This document is applicable for pure React Native projects. If the project is a combination of native and React Native, please refer to the Android/iOS native embedding documents and the React_Native_Bundle document.

React Configuration

1. Install dependencies

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

2. Configure Transform。

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

   • If the React Native version is 0.57 or 0.58, add transformer.babelTransformerPath to the transformer section in the rn-cli.config.js file in the root directory. Example:

     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 for packaging and has configured the --config parameter, please add transformer.babelTransformerPath to the configured JavaScript file.

   • If the React Native version is less than 0.57, create a rn-cli.config.js file in the project root directory (if it does not 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 for packaging and has configured the --config parameter, please add getTransformModulePath to the configured JavaScript file.

Android Platform Configuration

Gradle Configuration

Add the following content to the project-level build.gradle file under 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"
}

Permission Configuration

Add the following permissions to the AndroidManifest.xml file.

<!--Necessary permission for interacting with the server-->
<uses-permission android:name="android.permission.INTERNET"/>
<!--Optional permission for obtaining the current network and Wi-Fi status of the device, such as: 2G, 3G, 4G, WiFi, recommended to add-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<!--Optional permission for obtaining the network status of devices with targetVersion 29 and above Android 10-->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<!--Optional permission for using the "visual operation naming function"-->
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW"/>

Proguard Configuration

Add the following content to the ProGuard configuration file to prevent the Tingyun App SDK from being disabled.

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

If line number information needs to be retained, add the following content to the proguard.cfg file.

-keepattributes SourceFile,LineNumberTable

Collecting React Native Webview Data Configuration

If react-native-webview is used in the project, 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, call NBSWebChromeClient.initJSMonitor(view, newProgress) in the onProgressChanged function of RNCWebChromeClient. Example code:

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

Configure link

For versions of React Native below 0.60, classes of SDK bridging methods may not be packaged in apk. You can solve it by the following methods:

Manual configuration

Copy the SDK bridge class into 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 your Native project.

After adding the MainReactPackage, add the ReactPackage for the Tingyun.

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 link the command at the root of the project.

react-native link

If the gradle version in the project is lower than 5.4.1, upgrade is required:

1. Modify the com. Android. Tools. Build in the build. Gradle under the android directory: change the gradle version to 3.4.0 or above.

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

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

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

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

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

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

2. Modify the settings. Gradle file in the android directory from "/" 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 cocoapods is used on the iOS platform, 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 the SDK

You can create a new tingyunapp. Config. JS file in the root directory of the project, copy the following code into the file, and modify the configuration such as appKey and redirectURL. The SDK will read the file and initialize automatically.

module.exports = {
    android : {
        appKey : 'xxx',  //Replace them with the AppKey of the reporting application.
        redirectURL : 'xxx', //Please contact technical support to obtain the redirect address.
        httpEnable : false, //Data is uploaded by default using the HTTPS protocol.
        locationEnable : false,//By default, location information is not collected.
        options : 511  //the toggle for first-time startup is set to enable only the crash module by default.
    },
    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 command to package and compile.

react-native run-android

Embedded code verification

Android Platform

1. After the embedded code is completed, you can view the log output result of App SDK through "LogCat", which is used to verify that the TAG of the data collection server is NBSAgent. The standard log output result is as follows:

NBSAgent start
NBSAgent enabled
NBSAgent V “TingYun_Version” //TingYun_Version The current version number for the SDK
connect success

2. Data function integrity verification.

After the embedding is completed, you can view the log output results of the TingYun SDK through "LogCat" to verify the integrity of the data function. The TAG is TingYun, and the 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 the log output on the xcode console:

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

Advanced features

Custom component name

You can set the ty _ name attribute for the component, and the SDK will name the component based on the value of ty _ name.

//example 1
export default class DrawerScreen extends PureComponent {

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

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

User-defined ID

User-defined ID sets a unique identification code for the current user. UserID can be set anywhere.

1. Relevant interfaces.

//It can contain up to 64 characters, supporting Chinese, English, numbers, and underscores, but cannot include spaces or other escape characters.
NBSAppAgent.setUserIdentifier(var userIdentifier);

2. Code example.

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

Crumbs

Breadcrumbs can better help users investigate the cause of the crash, and can know the code logic before the user crashes, which can better reproduce the user crash scenario by combining with the crash trajectory.

1. Relevant interfaces.

//It can contain up to 100 characters, supporting Chinese, English, numbers, and underscores.
NBSAppAgent.leaveBreadcrumb(var breadcrumb);

2. Code example.

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

Customize additional information

The user can configure the interface anywhere after initialization, adding up to 10 pieces of additional information. Each piece of additional information supports up to 100 bytes to be uploaded with the crash.

1. Relevant interfaces.

//value Supports up to 100 bytes.
NBSAppAgent.setCustomerData(var value,var key)

2. Code example.

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

Custom Event

Custom events are used to count any event in App. Developers can add custom events at any position after SDK initialization and set corresponding upload parameters. For example, a real user clicks a function button or triggers a function event.

1. Relevant interfaces.

//eventId It can contain up to 32 characters, supporting Chinese, English, numbers, and underscores, but cannot include spaces or other escape characters.
//The key of the map can contain English letters, underscores, and numbers, and must start with a letter. The value can be a Number, String, or List<String>. The maximum length of String is 255, and the maximum length of List is 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"});

Precautions

If the tingyunapp. Config. JS is not used, the SDK can be initialized in the Native code.

Android Platform

Initialize the Android SDK in the on Create () method in Application.

NBSAppAgent
.setLicenseKey("AppKey")//"Appkey" should be obtained from the platform's reporting.
.setRedirectHost("Host")//"Host" For the platform, provide the Redirect Server Address.
.startInApplication(this.getApplicationContext());

If the back-end HTTPS uses a non-authentication certificate, setDefaultCert (false) should be set.

NBSAppAgent
.setLicenseKey("AppKey")//"Appkey" should be obtained from the platform's reporting.
.setRedirectHost("Host")//"Host" is the Redirect Server Address for the platform.
.setDefaultCert(false)
.startInApplication(this.getApplicationContext());

The SDK uploads data in HTTPS by default. If the server only supports HTTP, set setHttpEnabled (true).

NBSAppAgent
.setLicenseKey("AppKey")//"Appkey" should be obtained from the platform's reporting.
.setRedirectHost("Host")//"Host" is the Redirect Server Address for the platform.
.setHttpEnabled(true)
.startInApplication(this.getApplicationContext());

iOS Platform

1. Add the NBSAppAgent. H file under the tinyunApp. Framework in @ tingyunapp/react-native-tingyunapp/IOS/lib to the App project to be monitored.

2. The PCH file of the App to be monitored is introduced with the header file of the Tingyun App SDK.

   #import "NBSAppAgent.h"

3. Initialize the SDK.

   Adding initialization in a main method of an embedded code project main. M; It can also be initialized in the application: didFinishLaunching WithOptions: (the initialization in this method will not collect the App startup time) method of the App Delegate. M.

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