ヘルプ APM React Native アプリケーション用のAPM

React Native アプリケーション用のAPM

Site24x7のリアルユーザー監視(RUM）SDKを使用して、React Native上に構築されたモバイルアプリのパフォーマンスを監視します。さまざまなデバイスや地域でのアプリのパフォーマンスを分析、エラー検出、問題を検査します。

このドキュメントでは、RUM SDKをReactJSアプリケーションにインストールする方法と、監視プロセスを開始する方法について説明します。

前提条件:

  • iOS: 最小展開ターゲットはiOS10に設定してください。
  • Android: Android API レベル16以上
  • React Native: バージョン0.60以降

コンテンツ:

  1. RUM SDKのインストール
  2. iOSプロジェクトにRUMSDKをインストール
  3. AndroidプロジェクトにRUMSDKをインストール
  4. 監視の初期化
  5. 他のパラメータを取得するためのAPI

1. RUM SDKのインストール

以下のコマンドを使用して、RUMSDKをreact-nativeプロジェクトにインストールします。

RUM SDKのインストール

以下のコマンドを使用してパッケージをインストールします。React Nativeアプリケーションを開き、ターミナルで以下のコマンドを実行します。

npm install --save react-native-site24x7-rn # OR yarn add react-native-site24x7-rn

以下のコマンドを使用して、モジュールをReactNativeアプリにリンクします。

react-native link react-native-site24x7-rn

このステップでは、RUMSDKをReactNativeプロジェクトにインストールします。

2.iOSにインストール

以下のコマンドを使用して、iOSプロジェクトにSDKをインストールします。

iOSにインストール

  1. iOSフォルダーに移動し、次のコマンドを実行します:
    プロジェクトディレクトリ/ ios /にあるpodfileの上部にソースを追加します。
    1.require_relative
    '../node_modules/react-native/scripts/react_native_pods'
    2.require_relative
    '../node_modules/@react-native-community/cli-platform-ios/native_modules'
    3.source'https://github.com/site24x7/MobileAPM-IOS-SDK.git'
  2. 同じディレクトリで以下のコマンドを実行します。
    pod repo update
    pod install
  3. iOS用にSDKを手動でインストールするには次の手順を行ってください。
    • 以下のリンクを使用してzipファイルをダウンロードします。:
      https://raw.githubusercontent.com/site24x7/MobileAPM-IOS-SDK/v1.0.0/APM.framework.zip
      https://github.com/site24x7/MobileAPM-IOS-SDK/raw/master/ZAnalytics.framework.zip
    • プロジェクト設定に移動します。: iOSプロジェクト > 一般タブ > フレームワーク、ライブラリ、および埋め込みコンテンツ (または古いXcodeバージョンの埋め込みバイナリ)。+をクリックして、新しいフレームワーク/ xcframeworkを追加します。
  4. コマンドまたは手動でインストールした後、フレームワークの選択 > その他の追加 > ファイルの追加をクリックします。
  5. APM.frameworkとZAnalytics.frameworkファイルを選択して、Site24x7モバイルRUM SDKをプロジェクトに含めます。
  6. すでに追加されている場合は、フレームワークの埋め込み&署名を選択します。
  7. 必要に応じて、[宛先]でプロンプトが表示されたら、アイテムのコピーを選択します。
  8. こちらからdysm_uploadをダウンロードします。
    https://github.com/site24x7/MobileAPM-IOS-SDK/releases/download/v1.0.0/dsym_upload
    ここからスクリプトを実行します。:
    https://github.com/site24x7/MobileAPM-IOS-SDK/releases/download/v1.0.0/run
    ビルドフェーズに移動し、新しい実行を追加します。
  9. スクリプトの実行で、次のコマンドを入力します。:
    eval"./{上記でダウンロードした実行スクリプトへのパス}" --api-key={site24x7から取得したapikey} --upload-symbols={true or false}
  10. スクリプトを実行した後、APIトークンが info.plistファイルがZ_APP_CONFIG キーの下にあることを確認してください。

3.Androidにインストール

Android StudioまたはAndroid開発用に選択したその他のプラットフォームを使用して、プロジェクトディレクトリ内のAndroidフォルダーに移動します。以下のコマンドを使用してインストールします。

Androidにインストール

次のMavenリポジトリをアプリレベルbuild.gradleファイルに追加します。

    • zanalytics-pluginをアプリレベルのbuild.gradleに追加して、エラーを難読化するために、ビルド時にプロガードマッピングファイルをSite24x7サーバーにアップロードします。
      buildscript{
      repositories{
      jcenter()
      maven { url 'https://maven.zohodl.com' }
      }
      dependencies{
      classpath 'com.zoho.site24x7:mobileapm-analytics-plugin:1.1.1'
      }
      }

      apply plugin: 'zanalytics-plugin'
      repositories{
      jcenter()
      maven { url 'https://maven.zohodl.com' }
    • APIトークンをZanalyticsプラグインに追加します。
      zanalytics{
      debug{
      apiToken="412xxxx2131_US_3afdaxxxxxxd"
      }
      release{
      apiToken="412xxxx2131_US_3afdaxxxxxxd"
      }
      }
APIトークンは、キャメルケース {productflavor} {buildtype} のすべてのビルドバリアントについて、 Zanalytics {} で定義する必要があります。たとえば、以下のようにproductflavorを構成した場合flavorDimensionsの「バージョン」、
productFlavors {
develop {
dimension 'version'
}
}
次に、buildTypesのデバッグとリリースに次のようにAPIトークンを割り当てる必要があります。
zanalytics{
developDebug{
apiToken="412xxxx2131_US_3afdaxxxxxxd"
}
developRelease{
apiToken="412xxxx2131_US_3afdaxxxxxxd"
}
debug{
apiToken="412xxxx2131_US_3afdaxxxxxxd"
}
release{
apiToken="412xxxx2131_US_3afdaxxxxxxd"
}
}
  • 統合開発環境のツールバーから今すぐ同期をクリックします。

4. SDKの初期化

以下のコマンドを使用して、SDKを初期化し、監視を開始します。

SDKの初期化

  • 以下のコードを使用してSDKを初期化します。
    import {s247r} from 'react-native-site24x7-rn';
  • 次のコマンドを実行して、監視を開始します。
    s247r.startMonitoring()
  • カスタム構成で監視を開始するには、以下のコマンドを使用します。このコマンドを使用して、エンドポイントとアップロード間隔をカスタマイズできます。デフォルトでは、アップロード間隔は60秒です。
    const config = {
    "apiKey" : "58de19c3cc53deccdccc96faf719f74c",
    "endPoint" : "http://localhost:6060/",
    "uploadInterval" : 20
    }
    s247r.startMonitoringWithConfig(config);

5. 他のパラメータをキャプチャするためのAPI

上記のコマンドは、監視プロセスを開始します。ただし、HTTP呼び出し、エラー、アプリのクラッシュなどの個々のパラメーターを追跡するには、以下に示すようにそれぞれのコマンドを開始することをお勧めします。:

その他の推奨API

  • ネットワーク監視を開始します。
    s247r.initializeNetworkMonitoring();
  • エラー報告を開始します。
    const errorConfig = {
    "trackUnhandledErrors" : true,
    "trackConsoleErrors" : false,
    "trackUnhandledRejections" : true,
    "trackNativeErrors": false
    }
    s247r.initializeErrorMonitoring(errorConfig);
  • トランザクションとコンポーネントを開始または停止します。

    次のコマンドを使用して、個々のトランザクションとトランザクションに関連するコンポーネントを追跡します。コンポーネントごとにトランザクションをグループ化することもできます。

    カスタムの一意のトランザクション名でトランザクションを開始するには：

    s247r.startTransaction("testTxn");

    カスタムの一意のトランザクション名でトランザクションを停止するには：

    s247r.stopTransaction("testTxn");

    カスタムの一意のトランザクション名と一意のコンポーネント名を使用してトランザクションを開始するには：

    s247r.startComponent("testTxn","testComponent");

    同じカスタムの一意のトランザクション名と一意のコンポーネント名でトランザクションを停止するには：

    s247r.stopComponent("testTxn","testComponent");
  • 一意のIDを設定するには、ユーザーセッションを監視し、個々のユーザーの行動を追跡します。
    s247r.setUserId("test user");
  • 画面の読み込み時間とともに手動で画面を追加します。
    s247r.addScreen("screen name", loadTime);
  • このコマンドを使用して、アプリのクラッシュをシミュレートし、パフォーマンスのボトルネックを特定できます。
    s247r.crashApplication();
  • データをSite24x7サーバーにフラッシュします。
    s247r.flush();

トップ