ReactNativeアプリケーションを監視する

React Nativeエージェントを使用すると、チームはハイブリッドアプリのパフォーマンスを監視し、コードエラーを特定できます。エージェントは、ネイティブコンポーネントを使用して、ハイブリッドアプリのクラッシュデータ、ネットワークトラフィック、およびその他の情報を収集します。

エージェントを使用すると、プラットフォームに関係なく、チームがハイブリッドアプリの状態を理解できます。Javascriptエラー、分散トレース、ネットワークインストルメンテーションなどに関する洞察を提供することで、チームがより多くの情報に基づいて開発を選択できるようにします。

要件

React Nativeエージェントをインストールする前に、アプリが次の要件を満たしていることを確認してください。

ネイティブサポートレベルは、 ReactNativeの要件に基づいています。

セットアップ

これらの5つのステップを実行して、ReactNativeアプリケーションを監視します。

ステップ1：エージェントのインストール

次を実行します。

bash

$npm i newrelic-react-native-agent

ステップ2：ReactNativeのセットアップ

次に、 index.jsを開き、次のコードを追加してNewRelicを起動します。

重要

必ず適切なアプリケーショントークンを入力してください。appTokenはプラットフォーム固有です。AndroidアプリとiOSアプリ用に別々のトークンを生成する必要があります。

import NewRelic from 'newrelic-react-native-agent';
import * as appVesrion from './package.json';
import {Platform} from 'react-native';

    let appToken;

    if (Platform.OS === 'ios') {
        appToken = '<IOS-APP-TOKEN>';
    } else {
        appToken = '<ANDROID-APP-TOKEN>';
    }


NewRelic.startAgent(appToken);
NewRelic.setJSAppVersion(appVesrion.version);
AppRegistry.registerComponent(appName, () => App);

ステップ3：Androidのセットアップ

React NativeエージェントがAndroidと互換性があることを確認するには、Android固有のエージェントをインストールします。

これらの手順を使用して、NewRelicネイティブAndroidエージェントをインストールします。

build.gradleを更新：

buildscript {
  ...
  repositories {
    ...
    mavenCentral()
  }
  dependencies {
    ...
    classpath "com.newrelic.agent.android:agent-gradle-plugin:6.6.0"
  }

app/build.gradleを更新：

apply plugin: "com.android.application"
apply plugin: 'newrelic' // <-- add this

AndroidManifest.xmlに次の行を追加して、アプリがINTERNETとACCESS_NETWORK_STATEの権限をリクエストしていることを確認してください。
```
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```

ステップ4：iOSのセットアップ

React NativeエージェントがすべてのiOSフレームワークと互換性があることを確認するには、NewReliciOSエージェントをインストールします。

bash

$npx pod-install

ステップ5：自動リンクと再構築

React Native New Relicライブラリをプロジェクトにリンクし、アプリケーションを再構築する必要があります。React Native 0.60+を使用している場合は、自動的に自動リンクにアクセスできるため、手動でインストールする必要はありません。

Androidアプリケーション

npx react-native run-android

iOSアプリケーション

cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

React Nativeアプリケーションが正しく機能していることを確認するために、次のコマンドを実行できます。致命的なJSエラーは、NewRelicUIでクラッシュとして表示されます。

npx react-native run-ios --configuration Release

npx react-native run-android --variant=release

Expo統合（オプション）

Expoとの統合は、ベアワークフローでは自動的に行われますが、構成プラグインを介したカスタム管理ワークフローにはいくつかの追加手順が必要です。

カスタム管理ワークフローを設定するには、パッケージをインストールした後、構成プラグインをapp.jsonまたはapp.config.jsのプラグイン配列に追加します。

管理されたワークフローの場合、プラグインの変更を使用してアプリを再構築するには、カスタムネイティブコードの追加ガイドで説明されているexpo prebuild --cleanコマンドを使用する必要があります。このコマンドが実行されていない場合、NewRelicエージェントの起動時にエラーが発生します。

APIコール

React Nativeエージェントは、iOSおよびAndroidSDKエージェントと同じAPI呼び出しを利用します。 New ReliciOSSDKドキュメントまたはAndroidSDKを参照してください。

JavaScriptのエラー

New Relicデータエクスプローラーでは、カスタムイベントセクションでJavaScriptエラーを確認でき、NRQLを使用してクエリを実行することもできます。

このクエリを使用して、エラーのダッシュボードを作成することもできます。

SELECT jsAppVersion,name,Message,errorStack,isFatal FROM `JS Errors` SINCE 24 hours ago

ダッシュボードの使用を開始するためのヘルプが必要な場合は、ダッシュボードの概要を参照してください。