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

このコマンドを使用すると、設定なしで React Native アプリケーションを迅速にセットアップして実行できますが、React Native エージェントが必要とする完全な開発環境は提供されません

expo init

Expo プロジェクトは、現在、React Native エージェントモジュールをサポートしていません。 


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

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

 npm run eject
BASH
expo eject
BASH

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 パッケージを手動でインストールするには、次の手順を実行します。

  1. 次の行を android/build.gradle に追加します。

    apply from: '../node_modules/@appdynamics/react-native-agent/android/adeum.gradle'
    JAVA
  2. settings.gradle ファイルに次の Appdynamics エージェントモジュールへの参照が含まれていることを確認してください。

    include ':@appdynamics_react-native-agent'
    project(':@appdynamics_react-native-agent').projectDir = new File(rootProject.projectDir, '../node_modules/@appdynamics/react-native-agent/android')
    JAVA
  3. また、android/app/build.gradle に Appdynamics エージェントモジュールへの参照も含まれている必要があります。

    dependencies {
        implementation project(':@appdynamics_react-native-agent')
        // ...
    }
    JAVA

iOS の場合は、次のファイルが存在することを確認します。

ファイルファイルの場所
ADEUMReactNative.xcodeproj

Libraries または node_modules ディレクトリ

<your_react_native_app>/node_modules/@appdynamics/react-native-agent/ios/ADEUMReactNative.xcodeproj
libADEUMReactNative.a

Xcode から、このファイルは [Build Phases > Link Binary With Libraries] タブ
または次のディレクトリにリストされている必要があります。<your_react_native_app>/ios/build/<your_react_native_app>/Build/Products/Debug-iphonesimulator/

<your_react_native_app>/ios/build/<your_react_native_app>/Build/Products/Debug-iphonesimulator/libADEUMReactNative.a

libsqlite3 を「必要なライブラリの追加(iOS のみ)」の説明のとおりにプロジェクトに追加してください。

権限の追加(Android のみ)

次の権限をアプリケーションの AndroidManifest.xmlandroid/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>
XML

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 = () =&gt; (
      // Other components
    );
    
    // Register the App component
    AppRegistry.registerComponent('my-application', () =&gt; App);
    JS
  4. (古い React Native の設定で作成した場合)use_frameworks! をお使いの ios/Podfile で定義した場合は、次を追加することを推奨します。

    $ toggleADEUMRNStaticFramework = true
    CODE


React Native アプリケーションの作成および実行(オプション)

  1. コマンドを実行して、プラットフォームのアプリケーションを作成および実行します。

     react-native run-android
    BASH
    react-native run-ios 
    BASH
  2. コントローラ UI から、インストゥルメンテーションが成功したことを確認します。

オンプレミス EUM サーバをポイントする(オプション)

オンプレミス EUM サーバーを使用するには、「アプリケーションキーの取得」から EUM アプリケーションキーを使用してインストゥルメンテーションを初期化するときに、オンプレミス EUM サーバーに URL を渡します。 

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