文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>腾讯云可观测平台>终端性能监控 Pro>接入指南>React Native SDK 接入指引>SDK 集成

SDK 集成

最近更新时间：2026-05-19 17:38:41

我的收藏

本页目录：

本文将为您介绍通过自动集成的方式集成 React Native SDK。

前提条件

终端性能监控 Pro 需要使用 React Native SDK 1.0.0-beta.5及以上版本。

自动集成

步骤1：下载 SDK

执行如下命令下载 SDK。
npm install bugly-rn-sdk@1.0.0-beta.5
注意：
React Native 端 SDK 处于灰度验证阶段，建议业务小规模接入测试，质量验证符合预期后，再正式上线。
Bugly React Native 端 SDK 集成在 React Native 的 JS 层，收集 JS 层运行时的数据。

步骤2：使用原生 SDK 上报 JS 异常（可选）

说明：
如需使用原生 SDK 上报 JS 异常，请执行如下步骤。
Bugly 支持跨平台开发框架通过调用 Native 层 SDK 上报 JS 层数据。React Native 自身提供桥接机制用于调用 Native 层函数，Bugly 也基于 React Native 官方文档实现了对应的桥接能力，详情请参见 Android 原生模块桥接文档 和 iOS 原生模块桥接文档。
下文将以 React Native 为例，介绍如何通过桥接方式分别调用 iOS 与 Android 端 SDK，并完成 JS 异常的上报。

Android 集成步骤

1. 在 app/kotlin+java/com.awesomeproject 里创建 Java 文件，其中 AppPackage、AndroidBridge 和 OnError 为新增的文件。

2. 在 OnError 中调用 Android SDK 上报错误数据。
package com.awesomeproject;
import android.util.Log;
public class OnError {
    public void sendMsg(String errMsg) {
        // 使用 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. 在 AndroidBridge 中声明 AndroidBridge，并调用 OnError 类来上报错误信息。
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. 向 React Native 中注册 AndroidBridge。
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. 在 MainApplication 里添加 AppPackage。
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. 在 JS 层调用 Android SDK 来上报错误数据。
import { NativeModules } from 'react-native';
const { AndroidBridge } = NativeModules;
ErrorUtils.setGlobalHandler((error, isFatal) => {
    AndroidBridge.sendJSError(error.stack || error);
});

iOS 集成步骤

1. 在项目根目录下创建 OnError.swift、iOSBridge.swift 和 IOSBridge.m 文件。
// 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)
    // 调用 Bugly IOS 上报错误
    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. 创建桥接文件。
// AwesomeProject_Bridging_Header.h
#ifndef AwesomeProject_Bridging_Header_h
#define AwesomeProject_Bridging_Header_h
#import <React/RCTBridgeModule.h>

#endif /* AwesomeProject_Bridging_Header_h */
3. 最后在 JS 层中监听错误并调用 iOS SDK 上报错误。
import { NativeModules } from 'react-native';
const { IOSBridge } = NativeModules
ErrorUtils.setGlobalHandler((error, isFatal) => {
    IOSBridge.sendJSError(error.stack || error);
});

中国站