Skip to content

Quick Start

This document provides the shortest path to integrate the React Native RUM SDK, helping you complete a verifiable data report with minimal steps.

Prerequisites

Before starting, please complete the following preparations:

  1. Create React Native Android and React Native iOS applications in RUM respectively, and obtain the corresponding App ID.
  2. Confirm the reporting address and authentication method:
  3. Local environment deployment: Prepare datakitUrl.
  4. Public DataWay: Prepare datawayUrl and clientToken.
  5. Install @cloudcare/react-native-mobile in your project.
  6. If you need to collect Android native startup, network request, or WebView data, please also configure the Android ft-plugin.

Integration Steps

  1. Install the React Native SDK.
  2. Initialize FTMobileConfig when the application starts.
  3. Initialize FTRUMConfig and pass in the Android and iOS App ID.
  4. Optional: Initialize FTLogConfig and FTTraceConfig.
  5. Enable debug logs, run the application, and trigger a page open, click, or network request.
  6. Confirm in the console and the Guance platform that the data has been successfully reported.

Install SDK

For installation methods, please refer directly to Application Access.

Minimal Initialization Example

import {
  FTMobileReactNative,
  FTReactNativeRUM,
  FTMobileConfig,
  FTRUMConfig,
  ErrorMonitorType,
  DeviceMetricsMonitorType,
  DetectFrequency,
} from '@cloudcare/react-native-mobile';

async function sdkInit() {
  // For local environment deployment, use { datakitUrl: 'http://10.0.0.1:9529' }
  const config: FTMobileConfig = {
    datawayUrl: 'https://open.dataway.url',
    clientToken: 'client_token',
    debug: true,
  };
  await FTMobileReactNative.sdkConfig(config);

  const rumConfig: FTRUMConfig = {
    androidAppId: 'android_app_id',
    iOSAppId: 'ios_app_id',
    enableAutoTrackUserAction: true,
    enableAutoTrackError: true,
    enableNativeUserResource: true,
  };
  await FTReactNativeRUM.setConfig(rumConfig);
}

Please complete SDK initialization before registering the App in the top-level index.js to ensure initialization is complete before calling other SDK methods.

import App from './App';

async function initSDK() {
  await sdkInit();
}

initSDK();
AppRegistry.registerComponent('main', () => App);

Optional: Initialize Log and Trace

import {
  FTReactNativeLog,
  FTReactNativeTrace,
  FTLogConfig,
  FTTraceConfig,
} from '@cloudcare/react-native-mobile';

async function setupExtraModules() {
  const logConfig: FTLogConfig = {
    enableCustomLog: true,
    enableLinkRumData: true,
  };
  await FTReactNativeLog.logConfig(logConfig);

  const traceConfig: FTTraceConfig = {
    enableNativeAutoTrace: true,
  };
  await FTReactNativeTrace.setConfig(traceConfig);
}

Verify Integration Success

  1. Keep debug: true enabled and run the application.
  2. Open a page, click a button, or initiate a network request.
  3. Check the debug logs to confirm that SDK initialization and data synchronization have executed normally.
  4. Return to the Guance console and confirm that corresponding RUM data has appeared in the application.

If further troubleshooting is needed, please refer to Troubleshooting.

Next Steps