tencent cloud

Tencent Cloud Observability Platform

DocumentationTencent Cloud Observability PlatformTerminal Performance Monitoring ProIntegration GuideReact Native SDK Integration GuideSDK Integration

SDK Integration

Download
Focus Mode
Font Size
Last updated: 2026-05-25 18:01:57
This article introduces how to integrate the React Native SDK through automatic integration.

Prerequisites

RUM Pro requires React Native SDK version 1.0.0-beta.5 or later.

Automatic Integration

Step 1: Downloading the SDK

Run the following command to download the SDK.
npm install bugly-rn-sdk@1.0.0-beta.5
Note:
The React Native SDK is currently in a limited release for validation. It is recommended that you integrate and test it on a small scale first. Proceed to a full rollout only after its quality has been verified to meet expectations.
The Bugly React Native SDK is integrated into the JS layer of React Native and collects runtime data from that layer.

Step 2: Reporting JS Exceptions Using the Native SDK (Optional)

Note:
To report JavaScript exceptions using the native SDK, follow these steps.
Bugly supports cross-platform development frameworks in reporting JS-layer data by calling the Native-layer SDK. React Native itself provides a bridging mechanism for calling Native-layer functions. Based on the official React Native documentation, Bugly has also implemented the corresponding bridging capability. For details, see the Android Native Module Bridging Documentation and the iOS Native Module Bridging Documentation.
The following section uses React Native as an example to describe how to call the iOS and Android SDKs respectively via bridging and report JavaScript exceptions.

Android Integration Steps

1. Create Java files in app/kotlin+java/com.awesomeproject. The new files are AppPackage, AndroidBridge, and OnError.

2. Call the Android SDK in OnError to report error data.
package com.awesomeproject;
import android.util.Log;
public class OnError {
    public void sendMsg(String errMsg) {
        // Report error data using the Android SDK
        Map<String, String> extraInfo = new HashMap<>();
        String[] components = errMsg.split("\\n");
        String msg = components[0].replace("Error: ", "");
        String[] secondPart = Arrays.copyOfRange(components, 1, components.length);
        String stack = String.join("\\n", secondPart);
        Bugly.postException(8, "test_error", msg , stack, extraInfo);
    }
}
3. Declare AndroidBridge in AndroidBridge, and call the OnError class to report error information.
package com.awesomeproject;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class AndroidBridge extends ReactContextBaseJavaModule{
    AndroidBridge(ReactApplicationContext context) {
        super(context);
    }
    private OnError onError = new OnError();
    @NonNull
    @Override
    public String getName() {
        return "AndroidBridge";
    }
    @ReactMethod
    public void sendJSError (String errMsg) {
        onError.sendMsg(errMsg);
    }
}
4. Register AndroidBridge in React Native.
package com.awesomeproject;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class AppPackage implements ReactPackage{
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext context) {
        return Collections.emptyList();
    }
    @Override
    public List<NativeModule> createNativeModules (ReactApplicationContext context) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new AndroidBridge(context));
        return modules;
    }
}
5. Add AppPackage in MainApplication.
package com.awesomeproject
import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              add(AppPackage())
            }

        override fun getJSMainModuleName(): String = "index"

        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }

  override val reactHost: ReactHost
    get() = getDefaultReactHost(applicationContext, reactNativeHost)

  override fun onCreate() {
    super.onCreate()
    loadReactNative(this)
  }
}
6. Call the Android SDK from the JS layer to report error data.
import { NativeModules } from 'react-native';
const { AndroidBridge } = NativeModules;
ErrorUtils.setGlobalHandler((error, isFatal) => {
    AndroidBridge.sendJSError(error.stack || error);
});

iOS Integration Steps

1. Create the OnError.swift, iOSBridge.swift, and IOSBridge.m files in the project root directory.
// OnError.swift
class OnError {
  func tran2BuglyError(errMsg: String) -> (category: UInt, name:String, reason: String, callStack: Array<String>) {
    let components = errMsg.components(separatedBy: "\\n")
    let firstPart = components[0].replacingOccurrences(of: "Error: ", with: "")     
    let secondPart = Array(components.dropFirst()) 
    return (5, "JS Error", firstPart, secondPart)
  }
  
  public func sendMsg(errMsg: String) -> Void {
    let BuglyError = tran2BuglyError(errMsg: errMsg)
    // Call Bugly IOS to report errors
    BuglyCrashMonitorPlugin.reportException(withCategory: BuglyError.category, name: BuglyError.name, reason: BuglyError.reason, callStack: BuglyError.callStack, extraInfo: [:], terminateApp: false)
  }
}

// IOSBridge.swift
@objc(IOSBridge)
class IOSBridge: NSObject {
  @objc(sendJSError:)
  func sendJSError(errMsg: String) -> Void {
    let onError = OnError()
    onError.sendMsg(errMsg: errMsg)
  }
}

// IOSBridge.m
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(IOSBridge, NSObject)

RCT_EXTERN_METHOD(sendJSError:(NSString *)errMsg)

@end
2. Create a bridging file.
// AwesomeProject_Bridging_Header.h
#ifndef AwesomeProject_Bridging_Header_h
#define AwesomeProject_Bridging_Header_h
#import <React/RCTBridgeModule.h>

#endif /* AwesomeProject_Bridging_Header_h */
3. Finally, listen for errors in the JS layer and call the iOS SDK to report them.
import { NativeModules } from 'react-native';
const { IOSBridge } = NativeModules
ErrorUtils.setGlobalHandler((error, isFatal) => {
    IOSBridge.sendJSError(error.stack || error);
});

Previous Topic: SDK Integration OverviewNext Topic: SDK Initialization

Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback