クイックスタート¶

このドキュメントは、React Native RUM SDK の最短導入経路を提供し、最小限の手順で検証可能なデータ報告を完了するのに役立ちます。

前提条件¶

開始前に、以下の準備を完了してください。

1. リアルユーザーモニタリング（RUM） で React Native Android と React Native iOS のアプリケーションをそれぞれ作成し、対応する App ID を取得する
2. 報告先アドレスと認証方式を確認する：
3. ローカル環境デプロイ：datakitUrl を準備する

4. パブリックネットワーク DataWay：datawayUrl と clientToken を準備する

5. プロジェクトに @cloudcare/react-native-mobile をインストールする

6. Android のネイティブ起動、ネットワークリクエスト、または WebView データを収集する必要がある場合は、同時に Android ft-plugin を設定する

導入手順¶

1. React Native SDK をインストールする
2. アプリケーション起動時に FTMobileConfig を初期化する
3. FTRUMConfig を初期化し、Android と iOS の App ID を渡す
4. オプション：FTLogConfig と FTTraceConfig を初期化する
5. デバッグログを有効にし、アプリケーションを実行してページ表示、クリック、またはネットワークリクエストを 1 回トリガーする
6. コンソールと Guance プラットフォームでデータが正常に報告されたことを確認する

SDK のインストール¶

インストール方法は アプリケーション導入 を参照してください。

最小限の初期化サンプル¶

import {
  FTMobileReactNative,
  FTReactNativeRUM,
  FTMobileConfig,
  FTRUMConfig,
  ErrorMonitorType,
  DeviceMetricsMonitorType,
  DetectFrequency,
} from '@cloudcare/react-native-mobile';
async function sdkInit() {
  // ローカル環境デプロイでは { 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);
}

トップレベルの index.js で App を登録する前に SDK の初期化を完了し、SDK の他のメソッドを呼び出す前に初期化が完了していることを確認してください。

import App from './App';

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

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

オプション：Log と 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);
}

導入が成功したかどうかを確認する¶

1. debug: true を有効にしたままアプリケーションを実行する
2. ページを開き、ボタンをクリックするか、ネットワークリクエストを 1 回送信する
3. デバッグログを確認し、SDK の初期化とデータ同期が正常に実行されたことを確認する
4. Guance コンソールに戻り、アプリケーションに対応する RUM データが表示されていることを確認する

さらに調査が必要な場合は、トラブルシューティング を参照してください。

次のステップ¶

• 完全なインストールと導入の説明については、アプリケーション導入 を参照してください。
• すべての初期化パラメータの説明については、SDK 初期化 を参照してください。
• RUM、Log、Trace の詳細設定については、RUM 設定、Log 設定、Trace 設定 を参照してください。
• WebView モニタリングを導入する必要がある場合は、WebView データモニタリング を参照してください。
• Session Replay を導入する必要がある場合は、Session Replay を参照してください。
• プロジェクトがネイティブと React Native のハイブリッド開発である場合は、ネイティブと React Native のハイブリッド開発 を参照してください。