React Native App Integration¶
Prerequisites¶
Note
If the RUM Headless service has been enabled, the prerequisites are automatically configured, and you can directly integrate the app.
- Install DataKit;
- Configure RUM Collector;
- DataKit is configured to be publicly accessible on the internet and with the IP geolocation information database installed.
App Integration¶
Note
The current React Native version supports only Android and iOS platforms.
- Go to User Analysis > Create > React Native;
- Input the app name;
- Input the app ID;
-
Select the integration method:
- Public DataWay: Directly receives RUM data without installing the DataKit collector.
- Local Deployment: Receives RUM data after meeting the prerequisites.
Installation¶
Source Code Address: https://github.com/GuanceCloud/datakit-react-native
Demo Address: https://github.com/GuanceCloud/datakit-react-native/example
Run the following command in the project path from the terminal:
This will add a line like this to the package.json of the package:
Additional Android Integration Configuration:
- Configure Gradle Plugin ft-plugin to collect App startup events and network request data, as well as Android Native related events (page transitions, click events, Native network requests, WebView data).
- Note that you need to configure the Guance Android Maven repository address simultaneously in Gradle for both Plugin and AAR. Refer to the build.gradle configuration in the example.
Now in your code, you can use:
import {
FTMobileReactNative,
FTReactNativeLog,
FTReactNativeTrace,
FTReactNativeRUM,
FTMobileConfig,
FTLogConfig,
FTTraceConfig,
FTRUMConfig,
ErrorMonitorType,
DeviceMetricsMonitorType,
DetectFrequency,
TraceType,
FTLogStatus,
EnvType,
} from '@cloudcare/react-native-mobile';
SDK Initialization¶
Basic Configuration¶
//Local environment deployment, Datakit deployment
let config: FTMobileConfig = {
datakitUrl: datakitUrl,
};
//Use public DataWay
let config: FTMobileConfig = {
datawayUrl: datawayUrl,
clientToken: clientToken
};
await FTMobileReactNative.sdkConfig(config);
Field | Type | Required | Description |
---|---|---|---|
datakitUrl | string | Yes | Datakit access URL address, example: http://10.0.0.1:9529, default port 9529. Note: Devices with SDK installed must be able to access this address. Note: Choose either datakit or dataway configuration |
datawayUrl | string | Yes | Dataway access URL address, example: http://10.0.0.1:9528, default port 9528. Note: Devices with SDK installed must be able to access this address. Note: Choose either datakit or dataway configuration |
clientToken | string | Yes | Authentication token, must be used together with datawayUrl |
debug | boolean | No | Set whether to allow printing logs, default false |
env | string | No | Environment configuration, default prod , any character, it is recommended to use single words, such as test etc. |
envType | enum EnvType | No | Environment configuration, default EnvType.prod . Note: Only one of env or envType needs to be configured |
service | string | No | Set the name of the business or service, affecting the service field data in Logs and RUM. Default: df_rum_ios , df_rum_android |
autoSync | boolean | No | Whether to enable automatic synchronization. Default true |
syncPageSize | number | No | Set the number of entries for synchronization requests. Range [5,). Note: The larger the number of entries requested, the more computational resources data synchronization will consume |
syncSleepTime | number | No | Set the intermittent time for synchronization. Range [0,5000], default not set |
enableDataIntegerCompatible | boolean | No | It is recommended to enable when coexistence with web data is needed. This configuration is used to handle web data type storage compatibility issues. Versions 0.3.12 and later default to enabling |
globalContext | object | No | Add custom tags. Refer to the rules here |
compressIntakeRequests | boolean | No | Set whether to compress synchronized data, default off |
enableLimitWithDbSize | boolean | No | Enable using db to limit data size, default 100MB, unit Byte, the larger the database, the greater the disk pressure, default not enabled. Note: After enabling, Log configuration logCacheLimitCount and RUM configuration rumCacheLimitCount will become invalid. SDK versions 0.3.10 and above support this parameter |
dbCacheLimit | number | No | DB cache size limit. Range [30MB,), default 100MB, unit byte, SDK versions 0.3.10 and above support this parameter |
dbDiscardStrategy | string | No | Set the data discard rule in the database. Discard strategy: FTDBCacheDiscard.discard discards new data (default), FTDBCacheDiscard.discardOldest discards old data. SDK versions 0.3.10 and above support this parameter |
RUM Configuration¶
let rumConfig: FTRUMConfig = {
androidAppId: Config.ANDROID_APP_ID,
iOSAppId:Config.IOS_APP_ID,
enableAutoTrackUserAction: true,
enableAutoTrackError: true,
enableNativeUserAction: true,
enableNativeUserView: false,
enableNativeUserResource: true,
errorMonitorType:ErrorMonitorType.all,
deviceMonitorType:DeviceMetricsMonitorType.all,
detectFrequency:DetectFrequency.rare
};
await FTReactNativeRUM.setConfig(rumConfig);
Field | Type | Required | Description |
---|---|---|---|
androidAppId | string | Yes | app_id, applied through the User Analysis console |
iOSAppId | string | Yes | app_id, applied through the User Analysis console |
sampleRate | number | No | Sampling rate, range [0,1], 0 means no collection, 1 means full collection, default value is 1. Scope: All View, Action, LongTask, Error data under the same session_id |
enableAutoTrackUserAction | boolean | No | Whether to automatically collect React Native component click events, enable to set actionName via accessibilityLabel , refer to here for more customization |
enableAutoTrackError | boolean | No | Whether to automatically collect React Native Errors |
enableNativeUserAction | boolean | No | Whether to perform Native Action tracing, native Button click events, app startup events, default is false |
enableNativeUserView | boolean | No | Whether to perform Native View automatic tracing, pure React Native applications are recommended to turn this off, default is false |
enableNativeUserResource | boolean | No | Whether to start Native Resource automatic tracing, since React-Native's network requests on iOS and Android use system APIs, enabling enableNativeUserResource allows all resource data to be collected. |
errorMonitorType | enum ErrorMonitorType | No | Supplementary error event monitoring types |
deviceMonitorType | enum DeviceMetricsMonitorType | No | Monitoring type for view performance |
detectFrequency | enum DetectFrequency | No | Sampling period for view performance monitoring |
enableResourceHostIP | boolean | No | Whether to collect the IP address of the target domain name. Scope: Only affects the default collection when enableNativeUserResource is set to true. iOS: Supported under >= iOS 13 . Android: Okhttp maintains an IP cache mechanism for the same domain, so only one generation occurs if the server IP does not change under the same OkhttpClient . |
globalContext | object | No | Add custom tags, used to distinguish user monitoring data sources. If tracking functionality is required, the parameter key should be track_id and value can be any number. Refer to here for additional notes on adding rules |
enableTrackNativeCrash | boolean | No | Whether to collect Native Crash |
enableTrackNativeAppANR | boolean | No | Whether to collect Native ANR |
enableTrackNativeFreeze | boolean | No | Whether to collect Native Freeze |
nativeFreezeDurationMs | number | No | Set the threshold for collecting Native Freeze delays, range [100,), unit milliseconds. iOS default 250ms, Android default 1000ms |
rumDiscardStrategy | string | No | Discard strategy: FTRUMCacheDiscard.discard discards new data (default), FTRUMCacheDiscard.discardOldest discards old data |
rumCacheLimitCount | number | No | Maximum local cache count limit for RUM entries [10_000,), default 100_000 |
Log Configuration¶
let logConfig: FTLogConfig = {
enableCustomLog: true,
enableLinkRumData: true,
};
await FTReactNativeLog.logConfig(logConfig);
Field | Type | Required | Description |
---|---|---|---|
sampleRate | number | No | Sampling rate, range [0,1], 0 means no collection, 1 means full collection, default value is 1. |
enableLinkRumData | boolean | No | Whether to link with RUM |
enableCustomLog | boolean | No | Whether to enable custom logging |
logLevelFilters | Array |
No | Log level filtering |
globalContext | NSDictionary | No | Add custom log tags, refer to the rules here |
logCacheLimitCount | number | No | Maximum local cache count limit for log entries [1000,), larger logs mean higher disk caching pressure, default 5000 |
discardStrategy | enum FTLogCacheDiscard | No | Set the log discard rule when reaching the limit. Default FTLogCacheDiscard.discard , discard discards appended data, discardOldest discards old data |
Trace Configuration¶
let traceConfig: FTTractConfig = {
enableNativeAutoTrace: true,
};
await FTReactNativeTrace.setConfig(traceConfig);
Field | Type | Required | Description |
---|---|---|---|
sampleRate | number | No | Sampling rate, range [0,1], 0 means no collection, 1 means full collection, default value is 1. |
traceType | enum TraceType | No | Trace type, default TraceType.ddTrace |
enableLinkRUMData | boolean | No | Whether to link with RUM data, default false |
enableNativeAutoTrace | boolean | No | Whether to enable native network automatic tracing iOS NSURLSession ,Android OKhttp (Since React Native 's network requests on iOS and Android use system APIs, enabling enableNativeAutoTrace allows all React Native data to be traced.) |
Note:
- Please complete the SDK initialization before registering the App in the top-level
index.js
file to ensure that the SDK is fully ready before calling any other SDK methods.- Perform RUM, Log, and Trace configurations after completing the basic configuration.
RUM User Data Tracing¶
View¶
When initializing the SDK RUM Configuration, you can configure enableNativeUserView
to enable automatic collection of Native Views
, React Native Views
since React Native provides extensive libraries to create screen navigation, manual collection is supported by default. You can use the following methods to manually start and stop views.
Custom View¶
Usage Method¶
/**
* View loading duration.
* @param viewName view name
* @param loadTime view loading duration
* @returns a Promise.
*/
onCreateView(viewName:string,loadTime:number): Promise<void>;
/**
* Start view.
* @param viewName interface name
* @param property event context (optional)
* @returns a Promise.
*/
startView(viewName: string, property?: object): Promise<void>;
/**
* Stop view.
* @param property event context (optional)
* @returns a Promise.
*/
stopView(property?:object): Promise<void>;
Usage Example¶
import {FTReactNativeRUM} from '@cloudcare/react-native-mobile';
FTReactNativeRUM.onCreateView('viewName', duration);
FTReactNativeRUM.startView(
'viewName',
{ 'custom.foo': 'something' },
);
FTReactNativeRUM.stopView(
{ 'custom.foo': 'something' },
);
Automatic Collection of React Native Views¶
If you use react-native-navigation
, react-navigation
, or Expo Router
navigation components in React Native, you can refer to the following methods for automatic collection of React Native Views
:
react-native-navigation¶
Add the FTRumReactNavigationTracking.tsx file from the example to your project;
Call the FTRumReactNativeNavigationTracking.startTracking()
method to start collection.
import { FTRumReactNativeNavigationTracking } from './FTRumReactNativeNavigationTracking';
function startReactNativeNavigation() {
FTRumReactNativeNavigationTracking.startTracking();
registerScreens();//Navigation registerComponent
Navigation.events().registerAppLaunchedListener( async () => {
await Navigation.setRoot({
root: {
stack: {
children: [
{ component: { name: 'Home' } },
],
},
},
});
});
}
react-navigation¶
Add the FTRumReactNavigationTracking.tsx file from the example to your project;
- Method One:
If you use createNativeStackNavigator();
to create a native navigation stack, it is recommended to add screenListeners
to start collection, allowing page loading durations to be recorded, as shown below:
import {FTRumReactNavigationTracking} from './FTRumReactNavigationTracking';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
<Stack.Navigator screenListeners={FTRumReactNavigationTracking.StackListener} initialRouteName='Home'>
<Stack.Screen name='Home' component={Home} options={{ headerShown: false }} />
......
<Stack.Screen name="Mine" component={Mine} options={{ title: 'Mine' }}/>
</Stack.Navigator>
- Method Two:
If createNativeStackNavigator();
is not used, you need to add the automatic collection method inside the NavigationContainer
component, as follows:
Note: This method cannot collect page loading durations
import {FTRumReactNavigationTracking} from './FTRumReactNavigationTracking';
import type { NavigationContainerRef } from '@react-navigation/native';
const navigationRef: React.RefObject<NavigationContainerRef<ReactNavigation.RootParamList>> = React.createRef();
<NavigationContainer ref={navigationRef} onReady={() => {
FTRumReactNavigationTracking.startTrackingViews(navigationRef.current);
}}>
<Stack.Navigator initialRouteName='Home'>
<Stack.Screen name='Home' component={Home} options={{ headerShown: false }} />
.....
<Stack.Screen name="Mine" component={Mine} options={{ title: 'Mine' }}/>
</Stack.Navigator>
</NavigationContainer>
Refer to the example for specific usage examples.
Expo Router¶
If you are using Expo Router, add the following method in the app/_layout.js file for data collection.
import { useEffect } from 'react';
import { useSegments, Slot } from 'expo-router';
import {
FTReactNativeRUM,
} from '@cloudcare/react-native-mobile';
export default function Layout() {
const segments = useSegments();
const viewKey = segments.join('/');
useEffect(() => {
FTReactNativeRUM.startView(viewKey);
}, [viewKey, pathname]);
// Export all child routes in the most basic way.
return <Slot />;
}
Action¶
When initializing the SDK RUM Configuration, configure enableAutoTrackUserAction
and enableNativeUserAction
to enable automatic collection, or manually add through the following methods.
Usage Method¶
/**
* Start RUM Action. RUM binds possible Resource, Error, LongTask events triggered by this Action.
* Avoid multiple additions within 0.1 seconds. Only one Action can be associated with the same View at the same time,
* while the previous Action is not ended, the new Action will be discarded. Adding Actions with `addAction` method does not affect each other.
* @param actionName action name
* @param actionType action type
* @param property event context (optional)
* @returns a Promise.
*/
startAction(actionName:string,actionType:string,property?:object): Promise<void>;
/**
* Add Action event. Such data cannot associate Error, Resource, LongTask data, there is no discard logic.
* @param actionName action name
* @param actionType action type
* @param property event context (optional)
* @returns a Promise.
*/
addAction(actionName:string,actionType:string,property?:object): Promise<void>;
Code Example¶
import {FTReactNativeRUM} from '@cloudcare/react-native-mobile';
FTReactNativeRUM.startAction('actionName','actionType',{'custom.foo': 'something'});
FTReactNativeRUM.addAction('actionName','actionType',{'custom.foo': 'something'});
More Customized Collection Operations
After enabling enableAutoTrackUserAction
, the SDK automatically collects click operations for components with the onPress
attribute. If you want to perform some customized actions based on automatic tracking, the SDK supports the following operations:
- Customize the
actionName
for a component's click event
Set through the accessibilityLabel
attribute
<Button title="Custom Action Name"
accessibilityLabel="custom_action_name"
onPress={()=>{
console.log("btn click")
}}
/>
- Do not collect click events for a certain component
Can be set by adding the ft-enable-track
custom parameter, setting its value to false
- Add extra attributes to the click event of a certain component
Can be set by adding the ft-extra-property
custom parameter, requiring JSON string value
<Button title="Action 添加额外属性"
ft-extra-property='{"e_name": "John Doe", "e_age": 30, "e_city": "New York"}'
onPress={()=>{
console.log("btn click")
}}
/>
Error¶
When initializing the SDK RUM Configuration, configure enableAutoTrackError
to enable automatic collection, or manually add through the following methods.
Usage Method¶
/**
* Exception capture and log collection.
* @param stack stack log
* @param message error information
* @param property event context (optional)
* @returns a Promise.
*/
addError(stack: string, message: string,property?:object): Promise<void>;
/**
* Exception capture and log collection.
* @param type error type
* @param stack stack log
* @param message error information
* @param property event context (optional)
* @returns a Promise.
*/
addErrorWithType(type:string,stack: string, message: string,property?:object): Promise<void>;
Usage Example¶
import {FTReactNativeRUM} from '@cloudcare/react-native-mobile';
FTReactNativeRUM.addError("error stack","error message",{'custom.foo': 'something'});
FTReactNativeRUM.addErrorWithType("custom_error", "error stack", "error message",{'custom.foo': 'something'});
Resource¶
When initializing the SDK RUM Configuration, configure enableNativeUserResource
to enable automatic collection, or manually add through the following methods.
Usage Method¶
/**
* Start resource request.
* @param key unique id
* @param property event context (optional)
* @returns a Promise.
*/
startResource(key: string,property?:object): Promise<void>;
/**
* End resource request.
* @param key unique id
* @param property event context (optional)
* @returns a Promise.
*/
stopResource(key: string,property?:object): Promise<void>;
/**
* Send resource data metrics.
* @param key unique id
* @param resource resource data
* @param metrics resource performance data
* @returns a Promise.
*/
addResource(key:string, resource:FTRUMResource,metrics?:FTRUMResourceMetrics):Promise<void>;
Usage Example¶
import {FTReactNativeRUM} from '@cloudcare/react-native-mobile';
async getHttp(url:string){
const key = Utils.getUUID();
FTReactNativeRUM.startResource(key);
const fetchOptions = {
method: 'GET',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
} ,
};
var res : Response;
try{
res = await fetch(url, fetchOptions);
}finally{
var resource:FTRUMResource = {
url:url,
httpMethod:fetchOptions.method,
requestHeader:fetchOptions.headers,
};
if (res) {
resource.responseHeader = res.headers;
resource.resourceStatus = res.status;
resource.responseBody = await res.text();
}
FTReactNativeRUM.stopResource(key);
FTReactNativeRUM.addResource(key,resource);
}
}
Logger Log Printing¶
Currently, log content is limited to 30 KB, exceeding characters will be truncated.
Usage Method¶
/**
* Output log.
* @param content log content
* @param status log status
* @param property log context (optional)
*/
logging(content:String,logStatus:FTLogStatus|String,property?:object): Promise<void>;
Usage Example¶
import { FTReactNativeLog, FTLogStatus } from '@cloudcare/react-native-mobile';
// logStatus:FTLogStatus
FTReactNativeLog.logging("info log content",FTLogStatus.info);
// logStatus:string
FTReactNativeLog.logging("info log content","info");
Log Levels¶
Method Name | Meaning |
---|---|
FTLogStatus.info | Information |
FTLogStatus.warning | Warning |
FTLogStatus.error | Error |
FTLogStatus.critical | Critical |
FTLogStatus.ok | Recovery |
Tracer Network Trace Tracking¶
When initializing the SDK Trace Configuration, you can enable automatic network trace tracking, also supporting user-defined collection. The usage method and examples are as follows:
Usage Method¶
/**
* Get trace http request header data.
* @param url Request address
* @returns trace added request header parameters
* @deprecated use getTraceHeaderFields() replace.
*/
getTraceHeader(key:String, url: String): Promise<object>;
/**
* Get trace http request header data.
* @param url Request address
* @returns trace added request header parameters
*/
getTraceHeaderFields(url: String,key?:String): Promise<object>;
Usage Example¶
import {FTReactNativeTrace} from '@cloudcare/react-native-mobile';
async getHttp(url:string){
const key = Utils.getUUID();
var traceHeader = await FTReactNativeTrace.getTraceHeaderFields(url);
const fetchOptions = {
method: 'GET',
headers:Object.assign({
'Accept': 'application/json',
'Content-Type': 'application/json'
},traceHeader) ,
};
try{
fetch(url, fetchOptions);
}
}
User Information Binding and Unbinding¶
Usage Method¶
/**
* Bind user.
* @param userId User ID.
* @param userName User name.
* @param userEmail User email
* @param extra Additional user information
* @returns a Promise.
*/
bindRUMUserData(userId: string,userName?:string,userEmail?:string,extra?:object): Promise<void>;
/**
* Unbind user.
* @returns a Promise.
*/
unbindRUMUserData(): Promise<void>;
Usage Example¶
import {FTMobileReactNative} from '@cloudcare/react-native-mobile';
/**
* Bind user.
* @param userId User ID.
* @param userName User name.
* @param userEmail User email
* @param extra Additional user information
* @returns a Promise.
*/
FTMobileReactNative.bindRUMUserData('react-native-user','uesr_name')
/**
* Unbind user.
* @returns a Promise.
*/
FTMobileReactNative.unbindRUMUserData()
Close SDK¶
Use FTMobileReactNative
to close the SDK.
Usage Method¶
Usage Example¶
Clear SDK Cache Data¶
Use FTMobileReactNative
to clear uncached data that has not been uploaded.
Usage Method¶
Usage Example¶
/**
* Clear all data that has not yet been uploaded to the server.
*/
FTMobileReactNative.clearAllData();
Actively Synchronize Data¶
When the configuration FTMobileConfig.autoSync
is set to true
, no additional operations are required; the SDK will automatically synchronize data.
When the configuration FTMobileConfig.autoSync
is set to false
, you need to actively trigger the data synchronization method to synchronize data.
Usage Method¶
/**
* Actively synchronize data, when the configuration `FTMobileConfig.autoSync=false`, you need to actively trigger this method to synchronize data.
* @returns a Promise.
*/
flushSyncData():Promise<void>;
Usage Example¶
Add Custom Tags¶
Usage Method¶
/**
* Add custom global parameters. Applies to RUM, Log data.
* @param context Custom global parameters.
* @returns a Promise.
*/
appendGlobalContext(context:object):Promise<void>;
/**
* Add custom RUM global parameters. Applies to RUM data.
* @param context Custom RUM global parameters.
* @returns a Promise.
*/
appendRUMGlobalContext(context:object):Promise<void>;
/**
* Add custom RUM, Log global parameters. Applies to Log data.
* @param context Custom Log global parameters.
* @returns a Promise.
*/
appendLogGlobalContext(context:object):Promise<void>;
Usage Example¶
FTMobileReactNative.appendGlobalContext({'global_key':'global_value'});
FTMobileReactNative.appendRUMGlobalContext({'rum_key':'rum_value'});
FTMobileReactNative.appendLogGlobalContext({'log_key':'log_value'});
Symbol File Upload¶
Automatic Packaging of Symbol Files¶
Add Automatic Symbol File Packaging Script¶
Script tool: cloudcare-react-native-mobile-cli
cloudcare-react-native-mobile-cli
is a script tool that helps configure automatic acquisition of React Native and Native sourcemaps during release builds, packaging them into zip files.
Add it locally to package.json
development dependencies.
For example: Place cloudcare-react-native-mobile-cli.tgz
in the React Native project directory.
"devDependencies": {
"@cloudcare/react-native-mobile-cli":"file:./cloudcare-react-native-mobile-cli-v1.0.0.tgz",
}
Execute yarn install
after adding.
Note: Android environment requires adding Gradle Plugin ft-plugin, version requirement: >=1.3.4
Add Plugin
usage and parameter settings in the main module app
's build.gradle
file.
apply plugin: 'ft-plugin'
FTExt {
//showLog = true
autoUploadMap = true
autoUploadNativeDebugSymbol = true
generateSourceMapOnly = true
}
Execute Configuration Commands¶
Run the yarn ft-cli setup
command in the React Native project directory to automatically acquire React Native and Native sourcemaps during release builds and package them into zip files. The following logs indicate successful setup.
➜ example git:(test-cli) ✗ yarn ft-cli setup
yarn run v1.22.22
$ /Users/xxx/example/node_modules/.bin/ft-cli setup
Starting command: Setup to automatically get react-native and native sourcemap in release build and package them as zip files.
Running task: Add a Gradle Script to automatically zip js sourcemap and Android symbols
Running task: Enable react-native sourcemap generation on iOS
Running task: Setup a new build phase in XCode to automatically zip dSYMs files and js sourcemap
Finished running command Setup to automatically get react-native and native sourcemap in release build and package them as zip files.
✅ Successfully executed: Add a Gradle Script to automatically zip js sourcemap and Android symbols.
✅ Successfully executed: Enable react-native sourcemap generation on iOS.
✅ Successfully executed: Setup a new build phase in XCode to automatically zip dSYMs files and js sourcemap.
✨ Done in 1.00s.
Zip file location after release build:
iOS: Inside the iOS folder (./ios/sourcemap.zip)
Android: RN project directory (./sourcemap.zip)
Manual Symbol File Packaging¶
React Native Zip Package Packaging Instructions
Upload¶
WebView Data Monitoring¶
To monitor WebView data, integrate the Web Monitoring SDK in the pages accessed by WebView.
Custom Tag Usage Examples¶
Compile-time Configuration Method¶
- Use
react-native-config
to configure multi-environments, setting corresponding custom tag values in different environments.
let rumConfig: FTRUMConfig = {
iOSAppId: iOSAppId,
androidAppId: androidAppId,
monitorType: MonitorType.all,
enableTrackUserAction:true,
enableTrackUserResource:true,
enableTrackError:true,
enableNativeUserAction: false,
enableNativeUserResource: false,
enableNativeUserView: false,
globalContext:{"track_id":Config.TRACK_ID}, //.env.dubug、.env.release 等配置的环境文件中设置
};
await FTReactNativeRUM.setConfig(rumConfig);
Runtime File Read/Write Method¶
- Through persistent data methods, such as
AsyncStorage
, obtain stored custom tags when initializing the SDK.
let rumConfig: FTRUMConfig = {
iOSAppId: iOSAppId,
androidAppId: androidAppId,
monitorType: MonitorType.all,
enableTrackUserAction:true,
enableTrackUserResource:true,
enableTrackError:true,
enableNativeUserAction: false,
enableNativeUserResource: false,
enableNativeUserView: false,
};
await new Promise(function(resolve) {
AsyncStorage.getItem("track_id",(error,result)=>{
if (result === null){
console.log('获取失败' + error);
}else {
console.log('获取成功' + result);
if( result != undefined){
rumConfig.globalContext = {"track_id":result};
}
}
resolve(FTReactNativeRUM.setConfig(rumConfig));
})
});
- Add or modify custom tags to the file at any point.
AsyncStorage.setItem("track_id",valueString,(error)=>{
if (error){
console.log('存储失败' + error);
}else {
console.log('存储成功');
}
})
- Restart the application to take effect.
SDK Runtime Addition¶
After the SDK initialization is completed, use FTReactNativeRUM.appendGlobalContext(globalContext)
、FTReactNativeRUM.appendRUMGlobalContext(globalContext)
、FTReactNativeRUM.appendLogGlobalContext(globalContext)
to dynamically add tags, which will take effect immediately. Subsequently, RUM or Log data reported will automatically include tag data. This usage method is suitable for scenarios where data is delayed, such as tag data needing network requests.
//SDK Initialization pseudocode, obtain
FTMobileReactNative.sdkConfig(config);
function getInfoFromNet(info:Info){
let globalContext = {"delay_key":info.value}
FTMobileReactNative.appendGlobalContext(globalContext);
}
Native and React Native Hybrid Development¶
If your project is natively developed with some pages or business processes implemented using React Native, the installation and initialization configuration method of the SDK is as follows:
-
Installation: Installation remains unchanged
-
Initialization: Refer to iOS SDK Initialization Configuration and Android SDK Initialization Configuration for initialization configuration in the native project.
-
React Native Configuration:
RN SDK 0.3.11 supports
No initialization configuration is required on the React Native side. If you need to automatically collect
React Native Error
andReact Native Action
, proceed as follows: -
Native Project Configuration:
RN SDK 0.3.11 supports
When enabling RUM Resource automatic collection, it is necessary to filter out React Native symbolization calls and Expo log calls that occur only in the development environment. Method as follows:
iOS
#import <FTMobileReactNativeSDK/FTReactNativeUtils.h> #import <FTMobileSDK/FTMobileAgent.h> FTRumConfig *rumConfig = [[FTRumConfig alloc]initWithAppid:rumAppId]; rumConfig.enableTraceUserResource = YES; #if DEBUG rumConfig.resourceUrlHandler = ^BOOL(NSURL * _Nonnull url) { return [FTReactNativeUtils filterBlackResource:url]; }; #endif```objective-c
Android
import com.cloudcare.ft.mobile.sdk.tracker.reactnative.utils.ReactNativeUtils; import com.ft.sdk.FTRUMConfig; FTRUMConfig rumConfig = new FTRUMConfig().setRumAppId(rumAppId); rumConfig.setEnableTraceUserResource(true); if (BuildConfig.DEBUG) { rumConfig.setResourceUrlHandler(new FTInTakeUrlHandler() { @Override public boolean isInTakeUrl(String url) { return ReactNativeUtils.isReactNativeDevUrl(url); } }); }
import com.cloudcare.ft.mobile.sdk.tracker.reactnative.utils.ReactNativeUtils import com.ft.sdk.FTRUMConfig val rumConfig = FTRUMConfig().setRumAppId(rumAppId) rumConfig.isEnableTraceUserResource = true if (BuildConfig.DEBUG) { rumConfig.setResourceUrlHandler { url -> return@setResourceUrlHandler ReactNativeUtils.isReactNativeDevUrl(url) }
Refer to the example for specific usage examples.