• ログイン今すぐ開始

本書は、お客様のご参考のために原文の英語版を機械翻訳したものです。

英語版と齟齬がある場合、英語版の定めが優先するものとします。より詳しい情報については、本リンクをご参照ください。

問題を作成する

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

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

one.newrelic.com > モバイル > (アプリを選択) > 概要: React Native エージェントは New Relic にデータを送信します。そこで、ハイブリッド アプリのクラッシュ データ、ネットワーク トラフィック、およびその他の情報を分析できます。

エージェントを使用すると、プラットフォームに関係なく、チームがハイブリッドアプリの状態を理解できます。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 {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,
//Android Specific
// Optional: Enable or disable agent logging.
loggingEnabled: true,
//iOS Specific
// Optional:Enable/Disable automatic instrumentation of WebViews
webViewInstrumentation: true
};
NewRelic.startAgent(appToken,agentConfiguration);
NewRelic.setJSAppVersion(version);
AppRegistry.registerComponent(name, () => App);

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

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

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

  2. build.gradleを更新:

    buildscript {
    ...
    repositories {
    ...
    mavenCentral()
    }
    dependencies {
    ...
    classpath "com.newrelic.agent.android:agent-gradle-plugin:6.6.0"
    }
  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" />

ステップ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

While you wait for your data to come in...

Did this doc help you install?

Expo統合(オプション)

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

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

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

ルーティング インストルメンテーション (現在のスクリーン名の取得)

現在、2 つのルーティング インストルメンテーションをすぐに使用して、ルートの変更を計測し、ルートの変更をブレッドクラムとして記録します。

  • React ナビゲーション

  • React ネイティブ ナビゲーション

  • 反応ナビゲーション

    • v5は、次のように、NavigationContainer でonStateChangeNewRelic.onStateChangeに設定します。

      <NavigationContainer
      onStateChange={ NewRelic.onStateChange } />
    • '<='v4は、次のようにアプリ ラッパーでonNavigationStateChangeNewRelic.onNavigationStateChangeに設定します。

      export default () => (
      <App
      onNavigationStateChange={ NewRelic.onNavigationStateChange } />
      );
  • 反応ネイティブナビゲーション

    次を使用してNewRelic.componentDidAppearListenerリスナーを登録します。

    Navigation.events().registerComponentDidAppearListener( NewRelic.componentDidAppearListener );

    または、次の API を使用して、画面の変更を手動で報告することもできます。

var params = {
'screenName':'screenName'
};
NewRelic.recordBreadcrumb('navigation',params);

APIコール

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

React Native に固有のエラーについては、次のようにNewRelic.recordError(error)を呼び出すことができます。

import ErrorBoundary from 'react-native-error-boundary';
const errorHandler = (error: Error, stackTrace: string) => {
NewRelic.recordError(error);
};
const App = () => (
<ErrorBoundary onError={errorHandler}>
<ChildrenThatCouldThrowEror />
</ErrorBoundary>
);

JavaScriptのエラー

React Native エージェントは、JavaScript エラーのカスタム イベントを作成し、New Relic に報告します。UI では、これらの JavaScript エラー イベントをカスタム ダッシュボードで追跡できます。

カスタム ダッシュボードを作成するには:

  1. one.newrelic.comにアクセスします。

  2. [クエリ ビルダー]をクリックします。

  3. 次のクエリを実行します。

    SELECT * FROM `JS Errors`
  4. ダッシュボードに追加をクリックします。

one.newrelic.com > Query builder : Query builderを使用して、React アプリから JavaScript エラーを追跡するためのカスタム ダッシュボードを作成します。

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

Copyright © 2022 New Relic Inc.

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