tencent cloud

Tencent Cloud Observability Platform

SDK Initialization

Download
Focus Mode
Font Size
Last updated: 2026-05-25 18:01:57
This article describes how to initialize the RUM Pro React Native SDK.

Sample Code

Before initializing, ensure that you have created a product in RUM Pro Creating an Application and obtained the corresponding AppKey and AppID. Then, initialize the SDK using the following code.
import Aegis, { BUGLY_SERVER_HOST } from 'bugly-rn-sdk';
// Optional. Used to obtain the device's network information.
import netInfo from '@react-native-community/netinfo';

const aegis = new Aegis({
id: 'xxxx', // The app id of the integrated product. Required.
appKey: 'xxxxxxx', // The app key of the integrated product. Required.
aid: "deviceID", // The device ID. It should be unique for different devices. Recommended.
env: "debug", // The log level for sdk console output. "debug" outputs all logs. The default value is "production", which outputs only error logs during sdk runtime. Optional.
serverHost: BUGLY_SERVER_HOST.OA, // The reporting domain. Required.
netInfo: netInfo, // Optional. Network information can be obtained after it is passed in.
plugin:{
error: true, // Enable error monitoring.
}
});
Note:
The SDK uses @react-native-community/netinfo to obtain network information. If this third-party library is not available, the returned network category is unknown.
When aid is not set during aegis initialization, the SDK randomly generates a device ID. The SDK uses @react-native-async-storage/async-storage to persistently store the device ID. If this third-party library is not available, the SDK generates a different device ID each time the application starts.
React Native primarily uses the following third-party libraries to implement page navigation: React Navigation and React Native Navigation. You can enable the SDK's page visit feature by following the instructions below.

React Navigation

Set up the page navigation feature for your React Native application.
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function App() {
const Stack = createNativeStackNavigator();
const containerRef = useNavigationContainerRef();
return (<NavigationContainer
ref = {containerRef}
onReady={
() => {
// Enable the page visit feature using wrapNavigationRef.
aegis.wrapNavigationRef(containerRef);
}
}
>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}

React Native Navigation

Pass in the Navigation from the React Native Navigation library during aegis initialization.
import { Navigation } from 'react-native-navigation';
const aegis = new Aegis({
// The configuration items are the same as those for SDK initialization.
navigation: Navigation,
});


Help and Support

Was this page helpful?

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

Feedback