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

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

要件

• React Native 0.60 以降

  

  React Native エージェントは、React Native 0.60 以降と連携できることがテストされ、認定されています。React Native は急速に開発されているため、React Native のマイナー更新が React Native エージェントの機能に影響を与える可能性があります。

• （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

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 ステートメント付近のファイルの先頭で、Native React エージェントをインポートするため、次のコード行を追加します。

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

   JS

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

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

   JS

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

   import {AppRegistry} from 'react-native';
   import App from './App';
   // === Add the following to import the React Native Agent
   import { Instrumentation } from '@appdynamics/react-native-agent';
    
   // Initialize the instrumentation
   Instrumentation.start({
       appKey: 'YOUR-APP-KEY',
   });
    
   // Create a component
   const App = () => (
     // Other components
   );
   
   // Register the App component
   AppRegistry.registerComponent('my-application', () => App);

   JS

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

   $ toggleADEUMRNStaticFramework = true

   CODE

   
   

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