New Relic React Native統合設定 - クロスプラットフォーム監視の完全ガイド ​

React Nativeアプリでは、JavaScriptとiOS・Androidのネイティブコードの両方を監視する必要があります。New Relic React Native Agentは、このクロスプラットフォームの特性に対応した統合監視ソリューションです。ここでは、React Native環境での基本的な導入手順を解説します。

New Relic React Native Agentの基本機能 ​

New Relic React Native Agentは、React Native 0.60以上で動作し、JavaScriptとネイティブコードの両方を統合的に監視できます。

監視できる項目 ​

React Nativeアプリ特有の以下の項目を監視できます。

JavaScriptの実行時間やコンポーネントのレンダリングパフォーマンスを追跡します。Metroバンドラーの動作状況やReduxの状態管理も確認できます。

JavaScriptとネイティブコード間のブリッジ通信を監視し、データのやり取りや通信遅延を把握できます。

iOSとAndroidでの動作の違いや、デバイス固有の問題を統一的に把握できます。

JavaScriptエラーやPromiseの失敗、コンポーネントエラーなどを統合的に収集し、問題の特定に役立ちます。

画面遷移やユーザーのアプリ内での操作パターンを分析し、ユーザビリティの改善に役立ちます。

導入前の準備 ​

動作環境 ​

  • React Native 0.60以上
  • Node.js 16以上
  • iOS: Xcode 12以上、iOS 10以上
  • Android: Android Studio 4.0以上、Android API 24以上
  • New Relicアカウント

開発環境の確認 ​

既存のReact Nativeプロジェクトで、以下のコマンドで環境を確認してください。

bash
npx react-native info

New Relicアカウントの設定 ​

New Relicの管理画面で「Add Data」→「Mobile」→「React Native」を選択し、新しいアプリを作成します。アプリケーショントークンをメモしておいてください。

パッケージのインストール ​

プロジェクトルートディレクトリで以下のコマンドを実行してください。

bash
npm install @newrelic/react-native-agent

React Native 0.60以降では自動リンキングが有効になっているため、追加設定は不要です。

プラットフォーム固有の設定 ​

iOS設定 ​

ios/ディレクトリでpod installを実行します。

bash
cd ios && pod install && cd ..

AppDelegate.mファイルを編集します。

objective-c
#import <NewRelic/NewRelic.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [NewRelic startWithApplicationToken:@"YOUR_APPLICATION_TOKEN"];
    return YES;
}

Android設定 ​

React Native AndroidでNew Relicを有効にするには、Gradle設定とMainApplicationの両方が必要です。以下の手順を順番に実行してください。

プロジェクトレベルのbuild.gradle設定 ​

android/build.gradleファイルのbuildscriptブロック内のdependenciesに以下を追加：

gradle
buildscript {
    dependencies {
        classpath "com.newrelic.agent.android:agent-gradle-plugin:7.0.0"
    }
}

アプリレベルのbuild.gradle設定 ​

android/app/build.gradleファイルの先頭付近とdependenciesブロックに以下を追加：

gradle
apply plugin: "com.android.application"
apply plugin: "newrelic" // この行を追加

dependencies {
    implementation 'com.newrelic.agent.android:android-agent:7.0.0'
}

重要: Gradle設定が完了したら、次のMainApplicationの設定も必要です。

MainApplication.javaの設定 ​

MainApplication.javaファイルを編集します：

java
import com.newrelic.agent.android.NewRelic;

public void onCreate() {
    super.onCreate();
    NewRelic.withApplicationToken("YOUR_APPLICATION_TOKEN")
           .start(this.getApplicationContext());
}

JavaScript での実装 ​

App.jsファイルでAgentを初期化します。

javascript
import { NewRelic } from '@newrelic/react-native-agent';

NewRelic.startAgent('YOUR_APPLICATION_TOKEN');

const App = () => {
  // アプリケーションコンポーネント
};

基本的なカスタマイズ ​

ユーザー情報の追加 ​

javascript
// ユーザー情報設定
NewRelic.setUserId('user_12345');
NewRelic.setAttribute('userSubscription', 'premium');

カスタムイベントの記録 ​

javascript
// 重要な操作の記録
NewRelic.recordCustomEvent('PurchaseCompleted', {
  itemId: 'item_123',
  price: 29.99
});

よくある問題と解決方法 ​

ビルドエラー ​

Metro bundlerや依存関係の問題が発生した場合は、以下を試してください。

bash
# キャッシュクリア
npx react-native start --reset-cache

データが表示されない ​

アプリケーショントークンが正しく設定されているか、ネットワーク接続に問題がないかを確認してください。

プラットフォーム固有の問題 ​

iOS SimulatorやAndroidエミュレータではなく、実機での動作確認を推奨します。

まとめ ​

New Relic React Native Agentを導入することで、React Nativeアプリの包括的な監視が可能になります。JavaScriptとネイティブコードの統合監視により、クロスプラットフォーム特有の課題を効果的に解決できます。

継続的に監視データを活用し、ユーザー体験とアプリパフォーマンスの改善に役立ててください。次はFlutter環境での設定方法も学んでいくと良いでしょう。

関連記事: New Relic Flutter統合設定関連記事: New Relicモバイル監視概要