Download PDF
Download page React Native アプリケーションのインストゥルメント化.
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 アプリケーションを作成した場合は、そのアプリケーションを取り出す必要があります。
コマンド | 取り出しが必要な理由 |
---|---|
| このコマンドを使用すると、設定なしで React Native アプリケーションを迅速にセットアップして実行できますが、React Native エージェントが必要とする完全な開発環境は提供されません。 |
| Expo プロジェクトは、現在、React Native エージェントモジュールをサポートしていません。 |
create-react-native-app を使用してアプリケーションを作成した場合は、npm
を使用してアプリケーションを取り出します。expo
を使用した場合は、次の expo
コマンドを実行してアプリケーションを取り出します。
プロジェクトディレクトリから、使用例に適したコマンドを実行します。
npm run eject
expo eject
React Native エージェントのインストール
このモジュールは、ネイティブ AppDynamics エージェントをアプリケーションに挿入し、Instrumentation
管理インターフェイスに JavaScript ブリッジを提供します。
React Native エージェントをインストールしてリンクします。
yarn add @appdynamics/react-native-agent react-native link @appdynamics/react-native-agent
BASHアプリケーションの作成時間インストゥルメンテーションを有効にするように設定を作成します。
node node_modules/@appdynamics/react-native-agent/bin/cli.js install
BASHReact Native エージェント CLI は、
react-native
CLI ツールで作成されたデフォルトのプロジェクト構造を維持していることを前提としています。上記のコマンドが失敗した場合は、「React Native パッケージの手動インストール」を参照してください。それ以外の場合は、「必要なライブラリの追加(iOS のみ)」や「権限の追加(Android のみ)」に進みます。
React Native パッケージの手動インストール(必要な場合のみ)
ほとんどのユーザは手動でパッケージをインストールする必要はありませんが、iOS および Android プロジェクトが大幅に変更されると、上記のコマンドが失敗することがあります。
React Native パッケージを手動でインストールする必要がある場合は、次の手順を実行します。
次の行を
android/build.gradle
に追加します。apply from: '../node_modules/@appdynamics/react-native-agent/android/adeum.gradle'
JAVAファイル
settings.gradle
に次の Appdynamics エージェントモジュールへの参照が含まれていることを確認してください。これはコマンドreact-native link
によって自動的に追加されます。include ':@appdynamics_react-native-agent' project(':@appdynamics_react-native-agent').projectDir = new File(rootProject.projectDir, '../node_modules/@appdynamics/react-native-agent/android')
JAVAまた、
android/app/build.gradle
に Appdynamics エージェントモジュールへの参照も含まれている必要があります。dependencies { implementation project(':@appdynamics_react-native-agent') // ... }
JAVA
iOS の場合は、次のファイルが存在することを確認します。
ファイル | ファイルの場所 | 例 |
---|---|---|
ADEUMReactNative.xcodeproj |
| <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/libADEUMReactNative.a |
さらに、他のネイティブモジュールのように Appdynamics エージェントモジュールをリンクします。libsqlite3
を「必要なライブラリの追加(iOS のみ)」の説明のとおりにプロジェクトに追加してください。
必要なライブラリの追加(iOS のみ)
- React Native アプリケーションルートから、XCode を含む
ios
ディレクトリで iOS プロジェクトファイルを開きます。 XCode から、Project Navigator のプロジェクトを選択します。
[Build Phases] タブに移動します。
- [Link Binary With Libraries,] の [Add.] をクリックします
- [
libsqlite3.tbd
] を選択します。 - [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
ファイルで、次の手順を実行します。
他の
import
ステートメント付近のファイルの先頭で、Native React エージェントをインポートするため、次のコード行を追加します。import { Instrumentation } from '@appdynamics/react-native-agent';
JS同じファイルおよびグローバルスコープで、次のようにインストゥルメンテーションを初期化し、
<EUM_APP_KEY>
を EUM アプリケーションキーを含む文字列で置き換えてください。Instrumentation.start({ appKey: <EUM_APP_KEY>, });
JSindex.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
React Native アプリケーションの作成および実行(オプション)
コマンドを実行して、プラットフォームのアプリケーションを作成および実行します。
react-native run-android
BASHreact-native run-ios
BASHコントローラ UI から、インストゥルメンテーションが成功したことを確認します。
オンプレミス EUM サーバをポイントする(オプション)
オンプレミス EUM サーバを使用するには、「アプリケーションキーの取得」から EUM アプリケーションキーを使用してインストゥルメンテーションを初期化するときに、オンプレミス EUM サーバに URL を渡します。
Instrumentation.start({
appKey: <EUM_APP_KEY>,
collectorURL: <COLLECTOR_URL>
});