• EnglishEspañol日本語한국어Português
  • ログイン今すぐ開始

この機械翻訳は、参考として提供されています。

In the event of any inconsistency between the English version and the translated version, the English versionwill take priority. Please visit this page for more information.

問題を作成する

React Native モバイル アプリを監視する

New Relic React Native エージェントは、React Native モバイル アプリを監視し、アプリのパフォーマンス、エラー、ユーザー エクスペリエンスに関する深い洞察を提供します。JavaScript で書かれた React Native エージェントには、ネイティブ モバイル アプリ向けに提供するすべての New Relic モバイル監視機能が含まれています。React Native エージェントをインストールして構成すると、次のことができるようになります。

  • Capture JavaScript errors

    問題を迅速に特定して修正します。

  • Track network requests:

    アプリがバックエンドとどのように対話するかを確認します。

  • Use distributed tracing:

    処理された例外をドリルダウンして、根本原因を見つけます。

  • Create custom events and metrics:

    ユーザーがアプリをどのように操作するかを理解します。

one.newrelic.com > All capabilities > Mobile > (select an app) > Summary: React Native エージェントは New Relic にデータを送信し、そこでクラッシュ データ、ネットワーク トラフィック、およびハイブリッド アプリに関するその他の情報を分析できます。

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

互換性と要件

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

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

(推奨) ガイド付きインストール

React Native エージェントをインストールするには、UI に直接ある ガイド付きインストールに従ってください。

手動インストール

エージェントを手動でインストールする必要がある場合は、次の手順に従います。

React Native エージェントを追加する

次を実行します。

bash
$
npm i newrelic-react-native-agent

アプリケーションを構成する

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

import NewRelic from 'newrelic-react-native-agent';
import {name, version} from './package.json';
import {Platform} from 'react-native';
let appToken;
if (Platform.OS === 'ios') {
appToken = '<IOS-APP-TOKEN>';
} else {
appToken = '<ANDROID-APP-TOKEN>';
}
const agentConfiguration = {
//Android Specific
// Optional:Enable or disable collection of event data.
analyticsEventEnabled: true,
// Optional:Enable or disable crash reporting.
crashReportingEnabled: true,
// Optional:Enable or disable interaction tracing. Trace instrumentation still occurs, but no traces are harvested. This will disable default and custom interactions.
interactionTracingEnabled: true,
// Optional:Enable or disable reporting successful HTTP requests to the MobileRequest event type.
networkRequestEnabled: true,
// Optional:Enable or disable reporting network and HTTP request errors to the MobileRequestError event type.
networkErrorRequestEnabled: true,
// Optional:Enable or disable capture of HTTP response bodies for HTTP error traces, and MobileRequestError events.
httpRequestBodyCaptureEnabled: true,
// Optional:Enable or disable agent logging.
loggingEnabled: true,
// Optional:Specifies the log level. Omit this field for the default log level.
// Options include: ERROR (least verbose), WARNING, INFO, VERBOSE, AUDIT (most verbose).
logLevel: NewRelic.LogLevel.INFO,
// iOS Specific
// Optional:Enable/Disable automatic instrumentation of WebViews
webViewInstrumentation: true,
// Optional:Set a specific collector address for sending data. Omit this field for default address.
// collectorAddress: "",
// Optional:Set a specific crash collector address for sending crashes. Omit this field for default address.
// crashCollectorAddress: "",
// Optional:Enable or disable reporting data using different endpoints for US government clients
// fedRampEnabled: false
// Optional: Enable or disable offline data storage when no internet connection is available.
// offlineStorageEnabled:true
};
NewRelic.startAgent(appToken, agentConfiguration);
NewRelic.setJSAppVersion(version);
AppRegistry.registerComponent(name, () => App);

アプリトークンをコピー/ペーストします

上記のコードでは、アプリケーション トークンを上記のコードのappToken = ""に貼り付けます。ハイブリッド アプリを iOS と Android の両方のプラットフォームにデプロイした場合は、2 つの個別のトークン (iOS 用と Android 用) を追加する必要があります。同じアプリ トークンを使用する場合、プラットフォーム間でアプリのパフォーマンスを比較することはできません。

アプリトークンをコピー/ペーストするには:

  1. one.newrelic.com > All capabilities > Mobile > (select your mobile app) > Settings

    に移動します。

  2. アプリケーショントークンをコピーします。

    上記のコードでは、 <IOS-APP-TOKEN>および/または<ANDROID-APP-TOKEN>をアプリ トークンに置き換えます。Android と iOS の両方にデプロイする場合は、このプロセスを繰り返して 2 番目のアプリ トークンを取得します。

(Android ネイティブ アプリのみ) Android エージェントをインストールする

  1. New Relic ネイティブ Android エージェントをインストールします

  2. build.gradleを更新:

    buildscript {
    ...
    repositories {
    ...
    mavenCentral()
    }
    dependencies {
    ...
    classpath "com.newrelic.agent.android:agent-gradle-plugin:${latest_android_version}"
    }
  3. app/build.gradleを更新:

    apply plugin: "com.android.application"
    apply plugin: 'newrelic' // <-- add this
  4. AndroidManifest.xmlに次の行を追加して、アプリがINTERNETACCESS_NETWORK_STATEの権限をリクエストしていることを確認してください。

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

(iOS ネイティブ アプリのみ) iOS エージェントをインストールする

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

bash
$
npx pod-install

自動リンクと再構築を構成する

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

アンドロイド用:

bash
$
npx react-native run-android

iOSの場合:

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

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

アンドロイド用:

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

iOSの場合:

bash
$
npx react-native run-ios --configuration Release

(オプション) Expo との統合

React Native エージェントをインストールすると、 ベア ワークフロー では Expo との統合が自動的に行われますが、 構成プラグイン を介した カスタム管理ワークフロー の場合は追加の手順が必要になります。

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

{
"name": "my app",
"plugins": ["newrelic-react-native-agent"]
}

マネージド ワークフローの場合は、 カスタム ネイティブ コードの追加 ガイドで説明されているように expo prebuild --clean コマンドを使用して、プラグインの変更を反映してアプリを再構築します。このコマンドが実行されていない場合、New Relic エージェントの起動時にエラーが発生します。Expo Go ユーザーの場合、エージェントはネイティブ コードを使用する必要があります。Expo Go はカスタム ネイティブ コードの無線送信をサポートしていないため、 Expo Go でカスタム ネイティブ コードを使用する方法については Expo のドキュメントに従ってください。

(オプション) 機器のルーティングとナビゲーションを構成する

React Native アプリのルーティングとナビゲーションを計測するには:

エージェントのインストルメンテーションをカスタマイズする

エージェントのインストルメンテーションをカスタマイズする必要がありますか?パブリック モバイル SDK API メソッドを使用すると、カスタム データの収集、デフォルト設定の構成などが可能になります。

React Native エージェントでは次のカスタマイズが可能です。

あなたがしたい場合は...

この方法を使用してください

ブレッドクラムを記録して、クラッシュのトラブルシューティングに役立つアプリのアクティビティを追跡します。

パン粉の記録

メソッドをインタラクションとして追跡します。

インタラクションを開始する

インタラクションを停止する

カスタムメトリクスの記録

カスタムメトリクスの記録

カスタムエラーを記録します。

カスタムエラーを記録する

カスタム属性とイベントを記録します。

カスタム属性とイベントをレポートするには、いくつかの方法があります。

カスタム ネットワーク リクエストと障害を追跡します。

HTTPリクエストを追跡する

失敗したHTTPリクエストを追跡する

エージェントをシャットダウンします。

エージェントのシャットダウン

デフォルトのモバイル監視設定を有効/無効にします。

監視機能の有効化/無効化

テストクラッシュレポートを実行します。

テストクラッシュレポート

JavaScript エラーのトラブルシューティング

JavaScript コンソールのログ

New Relic で JavaScript コンソール ログを表示するには、 one.newrelic.com > Query your dataに移動し、次のクエリを追加して JavaScript コンソール ログを検索します。

SELECT * FROM consoleEvents SINCE 24 HOURS AGO
Copyright © 2024 New Relic株式会社。

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.