React Native アプリケーションのインストゥルメント化

EUM アプリケーションキーを取得し、React Native アプリケーションをインストゥルメント化するには、次の手順を実行します。

要件

• React Native 0.60 以降

• （iOS のみ）：ポッドと Xcode 展開ターゲットが 11 以降である必要があります。<your_react_native_app>/ios/ にある Podfile でポッドターゲットのバージョンを確認します。

アプリケーションキーの取得

コントローラの [Getting Started Wizard] から、iOS または Android アプリケーションのいずれかを作成します。アプリケーションのインストゥルメント化に使用する EUM アプリケーションキーが表示されます。場合によっては、複数のモバイルアプリケーションが同じキーを共有できます。

Getting Started Wizard を完了したのに EUM アプリケーションキーが付与されない場合は、「アプリケーションキーの取得」を参照してください。

React Native アプリケーションの取り出し

次の表のいずれかのコマンドを使用して、React Native アプリケーションを作成した場合は、そのアプリケーションを取り出す必要があります。

create-react-native-app を使用してアプリケーションを作成した場合は、npm を使用してアプリケーションを取り出します。expo を使用した場合は、次の expo コマンドを実行してアプリケーションを取り出します。

プロジェクトディレクトリから、使用例に適したコマンドを実行します。

 npm run eject

expo eject

React Native エージェントのインストール

このモジュールは、ネイティブ AppDynamics エージェントをアプリケーションに挿入し、Instrumentation 管理インターフェイスに JavaScript ブリッジを提供します。

1. 次のいずれかのコマンドを使用して、React Native エージェントをインストールします。

   npm install --save @appdynamics/react-native-agent
   

   BASH

   yarn add @appdynamics/react-native-agent

   BASH

   
   

   
   

2. アプリケーションの作成時間インストゥルメンテーションを有効にするように設定を作成します。

   node node_modules/@appdynamics/react-native-agent/bin/cli.js install

   BASH
   

   React Native エージェント CLI は、react-native CLI ツールで作成されたデフォルトのプロジェクト構造を維持していることを前提としています。

上記のコマンドが失敗した場合は、「React Native パッケージの手動インストール」を参照してください。それ以外の場合は、「権限の追加（Android のみ）」に進みます。

React Native パッケージの手動インストール（オプション）

ほとんどのユーザは手動でパッケージをインストールする必要はありませんが、iOS および Android プロジェクトが大幅に変更されると、上記のコマンドが失敗することがあります。

React Native パッケージを手動でインストールするには、次の手順を実行します。

権限の追加（Android のみ）

次の権限をアプリケーションの AndroidManifest.xml（android/app/src/main/ 内に配置）に追加します。

  <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.your.application">

    // Add the following:
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    
    // ...
</manifest>

React Native エージェントは、ネットワークのフットプリントを最小限に抑えようとします。この権限がないと、エージェントのネットワーク状態は常に低く、一部のメトリックが報告されない可能性があります。

アプリケーションコードのインストゥルメント化

React アプリケーションの index.js ファイルで、次の手順を実行します。

1. 他の import ステートメント付近のファイルの先頭で、エージェントをインポートするため、次のコード行を追加します。

    import {Instrumentation} from '@appdynamics/react-native-agent';

   JS

2. 1. 同じファイルおよびグローバルスコープで、次のようにインストゥルメンテーションを初期化し、<EUM_APP_KEY> を EUM アプリケーションキーを含む文字列で置き換えてください。

      Instrumentation.start({
          appKey: <EUM_APP_KEY>,
      }); 

      JS
      

      可能な限り、この非同期コールの待機を許可し、デバッグを改善するための詳細ロギングを有効にするコンテキストで Instrumentation.start を呼び出すことを推奨します。

      async function startInstrumentation() {
        await Instrumentation.start({
          appKey: <EUM_APP_KEY>,
          loggingLevel: LoggingLevel.VERBOSE
        });
      }

      JS

3. index.js ファイルが次のように表示されていることを確認します。

   import App from './src/App';
   import {AppRegistry} from 'react-native';
   import {name as appName} from './app.json';
   
   import {Instrumentation} from '@appdynamics/react-native-agent';  
   
   Instrumentation.start({
       appKey: 'YOUR-APP-KEY',
   });
   
   AppRegistry.registerComponent(appName, () => App);

   JS

4. （古い React Native の設定で作成した場合）use_frameworks! をお使いの ios/Podfile で定義した場合は、次を追加することを推奨します。

   $ toggleADEUMRNStaticFramework = true

   CODE

   
   

Instrumentation.start({
     appKey: <EUM_APP_KEY>,
     collectorURL: <COLLECTOR_URL>
});