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

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

要件の確認

React Native エージェントは、React Native v0.59.x と連携できることがテストされ、認定されています。

React Native は急速に開発されていて、正式には v1 がリリースされていないため、React Native のマイナー更新が React Native エージェントの機能に影響を与える可能性があります。 

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

コントローラの [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 エージェントをインストールしてリンクします。

   yarn add @appdynamics/react-native-agent
   react-native link @appdynamics/react-native-agent

   BASH

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

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

   BASH
   

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

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

React Native パッケージの手動インストール（必要な場合のみ）

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

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

必要なライブラリの追加（iOS のみ）

1. React Native アプリケーションルートから、XCode を含む ios ディレクトリで iOS プロジェクトファイルを開きます。

2. XCode から、Project Navigator のプロジェクトを選択します。

3. [Build Phases] タブに移動します。 

4. [Link Binary With Libraries,] の [Add.] をクリックします
5. [libsqlite3.tbd] を選択します。
6. [Add] をクリックします。

この要件は今後のリリースで排除される予定です。

権限の追加（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

    

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