以下のセクションでは、React Native API を使用してインストゥルメンテーションをカスタマイズする方法について説明します。

React Native エージェント API の使用

React Native エージェントをインストールして、初期化した後にアプリケーションコードをインストゥルメント化するには、クラス、インターフェイス、または列挙型をインポートしてから、API メソッドを呼び出します。

インポート構文

React Native エージェント API にアクセスするには、ファイルの先頭にインポートステートメントを使用します。次の行で、クラスがインポートされますInstrumentation:

import { Instrumentation } from '@appdynamics/react-native-agent';
JS

API メソッドの構文

クラス、インターフェイス、または列挙型がインポートされたら、インポートされたコンポーネントから API メソッドを呼び出します。次の例では、Instrumentation クラスの setUserDataBoolean を使用してカスタムユーザデータを設定します。

Instrumentation.setUserDataBoolean("Boolean Key", true);
JS

アプリケーションキーの変更

React Native API を使用して、EUM アプリケーションキーを動的に変更できます。コントローラ UI でモバイルアプリケーションを作成する場合、アプリケーションキーを受信します。アプリケーションキーの詳細については、「Get Started with Mobile RUM」を参照してください。 

クラス

アプリケーションキーを変更する API は、Instrumentation クラスを介して使用できます。

import { Instrumentation } from '@appdynamics/react-native-agent';
JS

仕組み

API は、次のメソッドで構成されます。

  • changeAppKey(appKey)

メソッドパラメータ

changeAppKey メソッドは次のパラメータを使用します。

パラメータ名データ タイプ説明
appKeystringEUM アプリケーションキー。

たとえば、新しいアプリケーションキーを引数として受け取り、API メソッド changeAppKey に渡すメソッドを作成できます。

import { Instrumentation } from '@appdynamics/react-native-agent';
...
private updateAppKey(newAppKey) {
    Instrumentation.changeAppKey(newAppKey);
}
JS

データの追加タイプの収集

React Native API には、モバイル RUM で収集して集約できるアプリケーション データ タイプを拡張するメソッドがあります。作成できる拡張には、次の 6 つの基本タイプがあります。

データのタイプ説明仕様データが表示される場所
情報ポイントメソッドが呼び出される頻度と実行される時間。
  • データは数値
  • 名前には、英数字
    とスペースを使用
カスタムタイマーコード内の任意のイベントシーケンスが、
複数のメソッドにまたがる場合でも、時間を計測。
  • データは数値
  • メトリック名には、英数字
    とスペースを使用
カスタムメトリック収集する整数ベースのデータ。
  • データは数値
  • メトリック名には、英数字
    とスペースを使用
ユーザデータ有用と思われる任意の文字列キーと値のペア
  • データは任意のタイプ
  • メトリック名には制限なし
トピックパス(パンくずリスト)クラッシュのコンテキスト。
  • データは任意のデータ型
  • メトリック名には制限なし
ユーザインタラクションユーザがボタンを押したとき、リストをクリックしたとき、およびテキストを選択したときにキャプチャ。
  • データは任意のデータ型
  • メトリック名には制限なし


情報ポイントの報告

情報ポイントを使用すると、独自のコードがどのように実行されているかを追跡できます。モジュールのインポートとそのモジュールのメソッドの使用を必要とする他の React Native API とは異なり、情報ポイントを報告するための注釈をコードに追加します。

クラス/インターフェイス

API は、InfoPoint 関数を介して使用できます。

import { InfoPoint } from '@appdynamics/react-native-agent';
JS

仕組み

@InfoPoint 注釈を使用して、情報ポイントを報告する関数だけを提供する必要があります。@InfoPoint 注釈には、次の 2 つの署名があります。

  • @InfoPoint
  • @InfoPoint({className: string, fnName: string})

メソッドの署名

仕組みパラメータ説明
@InfoPointなし(None)注釈が付けられているメソッドの情報ポイントを自動的に報告します。

@InfoPoint({className: string, fnName: string})

オブジェクト

  • className :情報ポイントが記録されているファイルまたはモジュールの名前。
  • fnName:情報ポイントをトラッキングするために beginCall を呼び出す関数。

注釈を付けるクラスと関数名を手動で指定します。

たとえば、 @InfoPoint({ className: 'Automobiles', fnName: 'checkInventory' })


次の例は、情報ポイントの自動または手動レポートを使用する方法を示しています。コードが縮小されない場合は、自動レポートを使用することをお勧めします。そのほうが簡単で、同じ情報が報告されます。ただし、コードが縮小される場合は、クラスと関数名を手動で報告し、不要なクラスと関数名が縮小によって報告されないようにする必要があります。

Automatic Reporting

注釈 @InfoPoint を追加して、その下にあるメソッドの情報ポイントを自動的に作成します。情報ポイントは、メソッドの呼び出し方法と実行にかかる時間を報告します。 


import { InfoPoint } from '@appdynamics/react-native-agent';

class InfoPointsScreen extends Component {

  @InfoPoint 
  public infoPointMethod(arg1, arg2, value) {
    console.log("Executing infoPointMethod!"); 
  }
} 
JS

手動報告

クラス(シンボル名)内の特定のメソッドに関する情報ポイントを作成するには、次のように、クラスとメソッドの名前を指定する @InfoPoint 注釈にオブジェクトを渡します。

import { InfoPoint } from '@appdynamics/react-native-agent';

class InfoPointsScreen extends Component {

  @InfoPoint({ className: 'MyClass', fnName: 'infoPointMethod' })
  public infoPointMethod(arg1, arg2, value) {
    console.log("Executing infoPointMethod!"); 
  }
}
JS


カスタムタイマーの設定

カスタムタイマーを作成して、コード内の任意のイベントシーケンスに時間をかけられます。これには、複数のメソッドがあります。

クラス/インターフェイス

カスタムタイマー API には、Instrumentation クラスから次のようにアクセスできます。

import { Instrumentation } from '@appdynamics/react-native-agent';
JS

仕組み

カスタムタイマーを作成するには、次の React Native エージェント API メソッドを使用します。

  • startTimerWithName(name)

  • stopTimerWithName(name)

メソッドパラメータ

両方のメソッドは次のパラメータを使用します。

名前タイプ説明
namestringカスタムタイマーの名前。使用できる文字は [A-Za-z\s0-9] です。不正な文字は、ASCII 16 進値に置き換えられます。

たとえば、ユーザが画面を表示する際にかかった時間を追跡する場合、インストゥルメンテーションは次のようになります。

import { Instrumentation } from '@appdynamics/react-native-agent';
...
private startCustomTimer() {
  Instrumentation.startTimer("My timer");
}
private stopCustomTimer() {
   Instrumentation.stopTimer("My timer");
}
JS

カスタムメトリックの作成

React Native API を使用すると、カスタムメトリックをレポートできます。コントローラ UI に表示されるカスタムメトリックの名前を指定します。

クラス

カスタムメトリック API には、Instrumentation クラスから次のようにアクセスできます。

import { Instrumentation } from '@appdynamics/react-native-agent';
JS

仕組み

reportMetric を使用してカスタムメトリックを作成します。

  • reportMetric(name, value) 

メソッドパラメータ

reportMetric メソッドは次のパラメータを使用します。

名前タイプ要件説明
namestringメトリック名には英数字を使用する必要があります。不正な文字は、ASCII 16 進値に置き換えられます。カスタムメトリックの名前。 
valuenumber値は整数でなければなりません。それ以外の場合は、エラーが返されます。カスタムメトリックに関連付けられている数値。

たとえば、次のメソッドを使用してカスタムメトリックをレポートすることができます。

import { Instrumentation } from '@appdynamics/react-native-agent';
...
private reportMetrics() {
    Instrumentation.reportMetric("Normal metric", 23);
    Instrumentation.reportMetric("Large metric", Number.MAX_SAFE_INTEGER + 1);
    Instrumentation.reportMetric("Small metric", Number.MIN_SAFE_INTEGER - 1);
}
JS

カスタムユーザデータの追加

カスタムユーザデータ API を使用して、異なるデータタイプのキー/値ペアを設定および削除します。キーは、アプリケーション全体で一意である必要があります。

クラス

カスタムユーザデータ API には、Instrumentation クラスから次のようにアクセスできます。

import { Instrumentation } from '@appdynamics/react-native-agent';
JS

仕組み

API は、カスタムユーザデータを設定および削除するために次のメソッドを提供します。

Methods for Setting Custom User Data

  • setUserData(key, value)
  • setUserDataBoolean(key, value)
  • setUserDataDate(key, value)
  • setUserDataDouble(key, value)
  • setUserDataInteger(key, value)

 

Methods for Removing Custom User Data

  • removeUserData(key)
  • setUserDataBoolean(key)
  • setUserDataDate(key)
  • setUserDataDouble(key)
  • setUserDataInteger(key)

メソッドパラメータ

次の表に、カスタムユーザデータを設定するメソッドのパラメータを示します。

カスタムユーザデータを設定するためのメソッドパラメータデータ タイプ
setUserData

キー

string

の値を入力します。

文字列 || null
setUserDataBooleanキーstring
の値を入力します。boolean
setUserDataDateキーstring
の値を入力します。日付オブジェクト
setUserDataDoubleキーstring
の値を入力します。番号を入力します
setUserDataIntegerキーstring
の値を入力します。番号を入力します

次の表に、カスタムユーザデータを削除するメソッドのパラメータを示します。

カスタムユーザデータを削除するためのメソッドパラメータデータ タイプ
removeUserData

キー

string
removeUserDataBoolean
removeUserDataDate
removeUserDataDouble
removeUserDataInteger
メソッド removeUserData は、カスタムデータを値 null に設定するときに呼び出されます。たとえば、メソッド Instrumentation.setUserData("name", null)Instrumentation.removeUserData("name") を呼び出します。

次のコード例は、カスタムユーザデータ API を使用してユーザデータを設定および削除する方法を示しています。

import { Instrumentation } from '@appdynamics/react-native-agent';
...
private setUserData() {
    Instrumentation.setUserData("userId", "AISJ1723871");
    Instrumentation.setUserDataBoolean("isVip", true);
    Instrumentation.setUserDataDate("purchaseDate", new Date(1234567890));
    Instrumentation.setUserDataDouble("monthlyVisits", 1.2345);
    Instrumentation.setUserDataInteger("totalPurchasedItems", 42);
}
private clearUserData() {
    Instrumentation.removeUserData("userId", null);
    Instrumentation.removeUserDataBoolean("isVip", null);
    Instrumentation.removeUserDataDate("purchaseDate", null);
    Instrumentation.removeUserDataDouble("monthlyVisits", null);
    Instrumentation.removeUserDataInteger("totalPurchasedItems", null);
}
JS

トピックパスを残す

トピックパスを使用すると、ユーザエクスペリエンスのコンテキストでクラッシュの場所を特定できます。問題が発生したときに、トピックパスを設定します。その後のある時点でアプリケーションがクラッシュした場合、トピックパスはクラッシュレポートとともに表示されます。各クラッシュレポートには、最近の 99 件のトピックパスが表示されます。

クラス

トピックパス API には、Instrumentation クラスから次のようにアクセスできます。

import { Instrumentation } from '@appdynamics/react-native-agent';
JS

仕組み

次の API メソッドを使用して、トピックパスを作成して残します。

  • leaveBreadcrumb(breadcrumb, mode)

メソッドパラメータ

メソッド leaveBreadcrumb は、次のパラメータを使用します。

名前タイプ説明
breadcrumbstringクラッシュレポートおよびセッションに含める文字列。2048 文字で切り捨てられます。空の値は無視されます。
mode列挙型

トピックパスが表示される場所を決定するモード。次のモードを使用すると、クラッシュのみ、またはクラッシュおよびセッションを報告できます。

  • BreadcrumbVisibility.CRASHES_ONLY
  • BreadcrumbVisibility.CRASHES_AND_SESSIONS

デフォルトモードは BreadcrumbVisibility.CRASHES_ONLY. になります。値が無効な場合は、デフォルトモードが適用されます。

基本使用

次の例は、トピックパス API の構文と使用方法を示しています。 

import { Instrumentation } from '@appdynamics/react-native-agent';
...
private leaveBreadcrumb() {
    Instrumentation.leaveBreadcrumb("Drop a breadcrumb button implementation", BreadcrumbVisibility.CRASHES_AND_SESSIONS);
}
JS

使用例の拡大

React Native アプリケーションには、同じ画面上でプロセスのさまざまな手順を順番に表示するウィザードがあります。クラッシュまたは「Application Not Responding」(ANR)エラーの場合は、ウィザードのどのステップでクラッシュまたは ANR が発生したかを確認する必要があります。

アプリケーションに次のようなウィザードエンジンがある場合は、イベントと問題を追跡するために、各画面のトピックパスを残すことができます。

async function wizard(...screens) {
    let currentScreen = 0;
    while (true) {
        const screen = screens[currentScreen];
        if (screen == null) return;
        // Report the current screen with AppDynamics instrumentation
        Instrumentation.leaveBreadcrumb('wizard screen ' + screen.name);
        currentScreen += await screen.action();
    }
}
JS

ウィザードエンジンは、チェックアウトに使用できます。

wizard(
    { name: 'review cart', action:reviewCartAction },
    { name: 'chose payment', action:chosePaymentAction },
    { name: 'chose address', action:choseAddressAction },
    { name: 'review order', action:reviewOrderAction },
    { name: 'checkout', action:checkoutAction }
)
JS

アプリケーションが多数の ANR をトリガーしていることを示すアラートを受信した場合は、ANR が発生しているモバイルセッションで問題を診断できます。このセッションで、ANR に関連するトピックパスを確認します。たとえば、トピックパス「review cart」と「chose payment」は ANR に関連付けられているけれども、「chose address」は関連付けられていないことがわかります。支払い画面をさらに調査すると、クレジットカード番号を暗号化するプロセスがメインスレッドで実行されていて、アプリケーションがフリーズしていることがわかります。

ユーザインタラクションの把握

React Native エージェントは、ユーザインタラクションによってトリガーされた特定の UI イベントを追跡できます。ユーザインタラクションがキャプチャされると、UI イベントでセッションをソートし、セッション ウォーターフォールのタイムラインで UI イベントを表示できます。 

サポートされるユーザインタラクション

ユーザが次のいずれかまたはすべてを実行するときにキャプチャできます。

  • ボタンのクリック
  • テーブルセルの選択
  • テキストフィールドの選択
  • テキストビューの選択

セキュリティおよびプライバシー上の懸念点

インタラクション キャプチャ モードは、セキュリティとプライバシー上の理由でデフォルトでは無効になっています。これは、ユーザインタラクションに機密情報が含まれている可能性があるためです。さらに、UI インタラクションとスクリーンショットのキャプチャの両方を有効にすると、このような潜在的なセキュリティとプライバシー上の問題が複合化する場合があります。 

クラス

インタラクション キャプチャ モード API は InteractionCaptureMode クラスからアクセスできますが、設定されたユーザキャプチャモードでインストゥルメンテーションを開始するには、Instrumentation クラスも必要です。

import { Instrumentation, InteractionCaptureMode } from '@appdynamics/react-native-agent';
JS

Properties

次のプロパティは、InteractionCaptureMode クラスを介してアクセスし、ユーザ インタラクション キャプチャを設定するために使用されます。例: InteractionCaptureMode.All

プロパティ説明プラットフォームのサポート
Allすべてのユーザインタラクションを追跡します。iOS、Android
ButtonPressedトラックボタンを押します。iOS、Android
ListViewItemsSelected「リストアイテム」のクリックを追跡し、android.widget.AbsListView とそのサブクラスの変更に注目します。Android
Noneユーザインタラクションの追跡を無効にします。iOS、Android
TableCellSelectedテーブルセルの選択を追跡します。iOS
TextFieldSelectedテキストフィールドの選択を追跡します。iOS、Android
TextViewSelectedテキストビューの選択を追跡します。iOS

仕組み

API メソッドは、ユーザ インタラクション キャプチャ モードの配列を取得し、キャプチャするユーザインタラクションを決定する InteractionCaptureMode オブジェクトを返します。このメソッドによって、オブジェクトは変更されません。

メソッド[説明(Description)]
with複数のユーザ インタラクション キャプチャ モードを組み合わせます。
without指定されたユーザ インタラクション モードをキャプチャから除外します。

API プロパティを使用したユーザ インタラクション モードの設定

次の例では、すべてのユーザインタラクションをキャプチャできるように React Native エージェントを設定します。

import { Instrumentation, InteractionCaptureMode } from '@appdynamics/react-native-agent';
...
Instrumentation.start({
     appKey: <EUM_APP_KEY>,
     // ...your other configurations

     // Capture all user interactions
     interactionCaptureMode: InteractionCaptureMode.All
 })
JS

ユーザ インタラクション モードの組み合わせ

次の例では、with メソッドは ButtonPressed(ボタンが押される)モードと TextFieldSelected(テキストフィールドが選択される)モードを None モードと組み合わせ、これら 2 つのユーザ インタラクション モードのみを有効にします。 

import { Instrumentation, InteractionCaptureMode } from '@appdynamics/react-native-agent';
...
Instrumentation.start({
    appKey: <EUM_APP_KEY>,
    // ...your other configurations

    // Only enable "ButtonPressed" and "TextFieldSelected" interaction modes, and disable the rest.
    interactionCaptureMode: InteractionCaptureMode.None.with(
        InteractionCaptureMode.ButtonPressed,
        InteractionCaptureMode.TextFieldSelected
    )
})
JS

ユーザ インタラクション モードの除外

次の例では、ユーザ インタラクション モード ButtonPressed(ボタンの押下)と TextFieldSelected(選択されたテキストフィールド)をモード InteractionCaptureMode.All(すべてのユーザインタラクション)から除外します。実際には、React Native エージェントは、ListViewItemSelected(「リストアイテム」のクリック)、TableCellSelected(テーブルセルの選択)、TextViewSelected(選択したテキストビュー)モードのみをキャプチャするように設定されます。


import { Instrumentation, InteractionCaptureMode } from '@appdynamics/react-native-agent';
...
Instrumentation.start({
    appKey: <EUM_APP_KEY>,
    // ...your other configurations

    // Include all capture modes except "ButtonPressed" and "TextFieldSelected".
    interactionCaptureMode: InteractionCaptureMode.All.without(
        InteractionCaptureMode.ButtonPressed,
        InteractionCaptureMode.TextFieldSelected
    )
})
JS

コレクタへのユーザデータの送信を停止する場合のエージェントの無効化

エージェントの初期化中および実行中に、エージェントを無効にしてコレクタへのすべてのデータの送信を停止できます。たとえば、プライバシー上の理由でユーザがモニタリングをオプトアウトするオプションがアプリにある場合は、エージェントを無効にできます。

shutdownAgent

shutdownAgent  コールはコレクタへの発信データを停止し、デバイスにデータを保持しません。

import { Instrumentation } from '@appdynamics/react-native-agent';
...
Instrumentation.shutdownAgent();
C#
  • このコールは、エージェントからのトラフィックのみを停止します。
  • エージェントが初期化されると、コールは削除できず、ライセンスが消費されます。

restartAgent

エージェントを再度有効にして shutdownAgent を無効にする場合は、restartAgent を使用します。

import { Instrumentation } from '@appdynamics/react-native-agent';
...
Instrumentation.restartAgent();
C#
  • このコールは、同様にリモートでエージェントをシャットダウンできるサーバ側のコールにも対応します。 
  • コールは、アプリケーションの実行中にのみ有効です。
  • エージェントがリモートで無効になっている場合、コールは無視されます。
  • コールがメモリから削除され、アプリケーションが再起動されるか、デバイスが再起動されると、エージェントは通常どおり初期化されます。

プログラムによるセッションの制御

デフォルトでは、ユーザが非アクティブになってからモバイルセッションが終了します。たとえば、ユーザがアプリケーションを開くと、セッションは開始され、ユーザが設定した期間にアプリケーションを使用しなくなった後にのみ終了します。ユーザがアプリケーションの再使用を開始すると、新しいセッションが開始されます。セッションの期間を定義するために非アクティブな期間を設定するのではなく、この API を使用して、セッションの開始と終了をプログラムで制御できます。

クラス

API には、Instrumentation クラスからアクセスできます。


import { Instrumentation } from '@appdynamics/react-native-agent';
JS

仕組み

API は、現在のセッションを終了し、新しいセッションを開始するための次のメソッドを提供します。

メソッド[説明(Description)]
startNextSession()
Instrumentation からメソッド startNextSession を呼び出すと、現在のセッションが終了し、新しいセッションが開始されます。API を使用すると、セッションを定義してフレーム化することができます。これにより、ビジネス目標と予想されるユーザフローをより厳密に合わせることができます。たとえば、API を使用して、製品の購入を追跡するセッションを定義したり、新しいユーザを登録したりすることができます。 

この API を過剰に使用すると、セッションが調整されます(過剰使用は 1 分あたり 10 コールを超えた場合になりますが、変更される可能性があります)。API を使用しない場合、セッションは、ユーザが非アクティブになった後、デフォルトの終了にフォールバックします。 

次の例では、現在のセッションが終了し、チェックアウトが行われると新しいセッションが開始されます。

import { Instrumentation } from '@appdynamics/react-native-agent';
...
private checkoutCart(){
    if (currentCartItems!=null && currentCartItems.size()>0){
	    CheckoutTask checkoutReq = new CheckoutTask();
		checkoutReq.execute(getEndpoint() + "cart/co");
		currentCartItemsMap.clear();
		convertItemsMaptoList();
        Instrumentation.startNextSession();
	} else {
	    displayToast("There are no items in the cart");
	}
}
JS

セッションフレームの開始と終了

React Native エージェント API を使用して、セッションアクティビティに表示されるセッションフレームを作成できます。セッションフレームは、セッション中にユーザが実行している内容のコンテキストを提供します。この API を使用すると、ユーザ画面の命名方法が向上し、ビジネスコンテキスト内のユーザフローを記録できます。 

使用例

次に、セッションフレームの一般的な使用例を示します。

  • 1 つのページで複数の関数を実行し、個々の関数をより詳細に追跡する必要があります。
  • ユーザフローは、複数のページまたはユーザのインタラクションに及びます。たとえば、API を使用してセッションフレーム「Login」、「Product Selection」、および「Purchase」を作成して、ユーザが購入のためにフローを記録することができます。
  • ユーザの操作に基づいて動的情報をキャプチャし、オーダー ID などのセッションフレームに名前を付けることができます。

クラス/インターフェイス

Sessionframe API は、Instrumentation クラスを介してアクセスできます。

import { Instrumentation } from '@appdynamics/react-native-agent';
JS

名前を更新してセッションフレームを終了するには、SessionFrame インターフェイスを使用します。

仕組み

次の表に、セッションフレームで使用できる 3 つのメソッドを示します。つまり、startSessionFrame を使用してセッションフレームを開始してから、updateNameend を使用してセッションフレームの名前を変更し、終了します。 

メソッド[説明(Description)]

startSessionFrame(name)

セッションフレームを開始します。Instrumentation, からこのメソッドを呼び出し、SessionFrame オブジェクトを返します。
updateName(name)セッションフレームの名前を更新します。SessionFrame オブジェクトからこのメソッドを呼び出します。

メソッドパラメータ

メソッド startSessionFrame および updateName は、次のパラメータを使用します。

パラメータデータ タイプ
説明

name

string

セッションフレームの名前。

セッションフレームの例

次の例では、チェックアウトプロセス中にユーザアクティビティを追跡するためにセッションフレームが使用されます。

let sessionFrame: SessionFrame | undefined;

private onCheckoutCartButtonClicked() {
    // The user starts the checkout by clicking the checkout button.
    // This may be after they have updated the quantities of items in the cart, etc.
    sessionFrame = Instrumentation.startSessionFrame("Checkout");
}
private onConfirmOrderButtonClicked() {
    // Once they have confirmed payment info and shipping information, and they
    // are clicking the "Confirm" button to start the backend process of checking out,
    // we may know more information about the order itself, such as an order ID.
    if (sessionFrame) {
        sessionFrame.updateName("Checkout: Order ID " + orderId);
    }
}
private onProcessOrderCompleted() {
    // Once the order is processed, the user is done "checking out", so we end the session frame.
    if (sessionFrame) {
            sessionFrame.end();
            sessionFrame = null;
    }
}
private onCheckoutCancled() {
  // If the user cancels or returns to the cart, you'll want to end the session frame also, or else it will be
    // left open and appear to have never ended.
    sessionFrame.end();
    sessionFrame = null;
  }
}
JS

スクリーンショットの設定および作成

デフォルトでは、モバイルスクリーンショットはエージェント側で有効になりますが、コントローラ側では無効になります。これらのスクリーンショットはコントローラの [Sessions Details] ダイアログに表示されます。プログラムで手動でスクリーンショットを取得するには、コントローラ UI でスクリーンショットを有効にし、次のスクリーンショット API を追加する必要があります。 

クラス

スクリーンショット API には、Instrumentation クラスからアクセスできます。

import { Instrumentation } from '@appdynamics/react-native-agent';
JS

仕組み

スクリーンショット API は、次のメソッドを提供します。

メソッド戻り値説明

takeScreenshot()

なし(None)

現在の画面のスクリーンショットを非同期的に作成します。

これにより、個人情報を含むすべてがキャプチャされるため、スクリーンショットを作成するタイミングに注意する必要があります。

これらのスクリーンショットは、このユーザの [Sessions] 画面に表示されます。

スクリーンショットはバックグラウンドスレッドで作成され、圧縮され、非冗長部分のみがアップロードされるため、アプリケーションのパフォーマンスに影響を与えることなく、これらの多くを安全に実行できます。

screenshotsBlocked()Promise<boolean>スクリーンショットのキャプチャがブロックされているかどうかを示すブール値を返します。
blockScreenshots()Promise<void>スクリーンショットのキャプチャをブロックし、スクリーンショットが実際にブロックされたときに解決される Promise を返します。
unblockScreenshots()Promise<void>

現在ブロックされている場合は、スクリーンショットのキャプチャのブロックを解除します。それ以外の場合は、影響を与えません。

スクリーンショットが AgentConfiguration.screenshotsEnabled またはコントローラ UI を使用して無効になっている場合、このメソッドは効果がありません。

コントローラ UI でスクリーンショットが手動モードに設定されている場合、このメソッドは手動モードの場合のみブロック解除されます。

スクリーンショットの構成

スクリーンショットの無効化

スクリーンショットはコントローラ UI または React Native API を使用して無効にすることができます。スクリーンショットを無効にするには、React Native エージェントを初期化する場合にプロパティ screenshotsEnabledfalse に設定します。

Instrumentation.start({
    appKey: <EUM_APP_KEY>,
    screenshotsEnabled: false,
    ...
});
JS

オンプレミス スクリーンショット サービスの設定

オンプレミス EUM サーバを展開している場合は、プロパティ screenshotURL を使用して EUM サーバに URL を指定する必要があります。

Instrumentation.start({
    appKey: <EUM_APP_KEY>,
    screenshotURL: "https://<COLLECTOR_URL>:<PORT>",
    ...
});
JS

スクリーンショットの作成

スクリーンショットを自動的に作成するようにコントローラ UI を設定するか、または次に示すように React Native API を使用して手動でスクリーンショットを作成することができます。

private loadShoppingCart() {
  // Load shopping cart
  this.setState({
      shoppingCart: this.state.cart
  });
  // Manually take screenshot
  Instrumentation.takeScreenshot();
}
JS

これにより、個人情報を含むすべてがキャプチャされるため、スクリーンショットを作成するタイミングに注意する必要があります。

スクリーンショットのブロックとブロック解除

コードブロックの実行中にスクリーンショットが作成されるのをブロックすることもできます。これにより、スクリーンショットのブロックを解除するまで、スクリーンショットの作成が一時的にブロックされます。これにより、ユーザがログインやアカウント画面などで個人データを入力する状況でのスクリーンショットの作成を停止できます。 

private displayCustomerAccount() {
    // Check to see if screenshots are blocked
    if (! Instrumentation.screenshotsBlocked()) {
        // If screenshots aren't blocked, block them before showing customer details 
        Instrumentation.blockScreenshots();     
    }  
    // Code to display customer details
    
    // After you're done, unblock screenshots
    Instrumentation.unblockScreenshots();
}
JS

ロギングの有効化とロギングレベルの設定

ロギングを有効にするには、インストゥルメンテーションの構成でロギングレベルを設定します。実稼働のロギングを無効にすることをお勧めします。 

クラス

ログレベルの API には、LoggingLevel クラスからアクセスできます。

import { LoggingLevel } from '@appdynamics/react-native-agent';
JS

構成プロパティ

次の構成プロパティを使用して、ログレベルを有効にして設定します。

  • loggingLevel

ログレベル

ロギングは、次のいずれかのレベルに設定できます。

列挙型ログ レベル説明
LoggingLevel.NONE
なし(None)ログは表示されません。 This level disables logging.
LoggingLevel.INFO
情報警告、エラー、および開発者に焦点を当てたメッセージが表示されます。
LoggingLevel.VERBOSE
Verboseエラー、警告、開発者の情報、デバッグ、およびトラブルシューティング メッセージが表示されます。

次の例では、ロギングが有効になっていて、ロギングレベルが VERBOSE に設定されています。

private async start() {
        try {
            await Instrumentation.start({
                appKey: this.state.appKey,
                loggingLevel: LoggingLevel.VERBOSE, 
                anrDetectionEnabled: true,
                interactionCaptureMode: InteractionCaptureMode.None.with(
                    InteractionCaptureMode.ButtonPressed,
                    InteractionCaptureMode.ListViewItemSelected,
                    InteractionCaptureMode.TableCellSelected,
                    InteractionCaptureMode.TextFieldSelected,
                    InteractionCaptureMode.TextViewSelected
                )
            }
        )
    }
}
JS

ネイティブクラッシュのクラッシュレポートの概要の受信

CrashReportCallback を使用して、ネイティブクラッシュのレポートを受信できます。 

クラス

CrashReportCallback API には、Instrumentation クラスからアクセスできます。

import { Instrumentation } from '@appdynamics/react-native-agent';
JS

使用方法

  1. crashReportCallback ネイティブエージェント設定オプションとして CrashReportCallback オブジェクトを送信します。 

    Instrumentation.start({
          crashReportCallback: (summaries: CrashReportSummary[]) =&gt; {
              console.log(summaries);
          },
     });
    CODE
  2. アプリケーションを再起動すると、クラッシュごとに CrashReportSummary が表示されます。

    export type CrashReportSummary = {
      crashId: string;  
      exceptionName: string; 
      exceptionReason: string;
      signalName: string;
      signalCode: string;
    };
    CODE

CrashReportSummary プロパティ

CrashReportSummary には次のプロパティがあります。

名前タイプ説明
crashId
string

クラッシュを一意に定義します。コントローラ UI で完全なクラッシュレポートを検索したり、クラッシュを検索するためのキーとして使用できます。

exceptionNamestring

例外名。例外が発生しなかった場合は、null になります。

exceptionReasonstring

例外の理由。例外が発生しなかった場合は、null になります。

signalNamestring

例外信号名。

signalCodestring例外信号コード。

クラッシュレポートの無効化

クラッシュレポートはデフォルトで有効になっていますが、インストゥルメンテーション構成を使用して手動でクラッシュレポートを無効にできます。他のクラッシュレポートツールを使用している場合、競合を最小限に抑え、クラッシュレポートの結果を最適化するために、クラッシュレポートを無効にする場合があります。 

次に示すように、crashReportingEnabled プロパティを使用してインストゥルメンテーションを構成することにより、クラッシュレポートを無効にできます。

import { Instrumentation } from '@appdynamics/react-native-agent';

Instrumentation.start({
        appKey: <#EUM_APP_KEY#>,
        crashReportingEnabled: false
})


エラーと例外のレポート

Instrumentation クラスの reportError メソッドを使用して例外を報告できます。報告された例外は、セッション詳細に表示されます。

また、問題に対して次の重大度レベルの 1 つを設定することもできます。重大度レベルを使用すると、[Code Issues Dashboard] または [Code Issues Analyze] でエラーをフィルタリングできます。

  • ErrorSeverityLevel.INFO
  • ErrorSeverityLevel.WARNING
  • ErrorSeverityLevel.CRITICAL

次の例では、API を使用して考えられる例外を報告し、ファイルへの書き込み時に重大度レベルを ErrorSeverityLevel.CRITICAL(クリティカル)に設定します。

import { Instrumentation, ErrorSeverityLevel} from '@appdynamics/react-native-agent';
...
try {
  await asyncTask();
catch (error) {
  Instrumentation.reportError(error, ErrorSeverityLevel.CRITICAL);
}
...
XML

サイレントエラーのログ

React Native の ErrorBoundary を使用すると、エラーはサイレントに検出されますが、エージェントはエラーを受信せずログにも記録されません。サイレントなクラッシュをログに記録する場合は、AppDynamics React Native パッケージで提供される ErrorBoundary を使用することを推奨します。

import { ErrorBoundary } from '@appdynamics/react-native-agent'
JS

カスタム HTTP ライブラリでのエージェントの使用

エージェントは、NSURLConnection/NSURLSession クラス(iOS)または HttpURLConnection/OkHttp(Android)によって基盤となる実装が処理されたときに、自動的にネットワークリクエストを検出します。これによりほとんどのネットワークリクエストに対応しますが、モバイルアプリケーションでカスタム HTTP ライブラリが使用される場合があります。 

エージェントでカスタムライブラリからのリクエストを検出するには、RequestTracker クラスを使用してアプリケーションに手動でリクエスト トラッキング コードを追加します。 

この方法を使用する前に、Instrumentation.start() インターフェイスを使用して有効なキーでエージェントを初期化する必要があります。

RequestTracker のプロパティ

カスタムコールのパラメータについて説明するには、RequestTracker オブジェクトに次のプロパティを設定する必要があります。

プロパティ説明コード
error

JavaScript エラーまたは null

応答を受信できなかったことを示すエラー(発生した場合)。リクエストが成功した場合は、null のままにする必要があります。

tracker.setError(e);
CPP
statusCode

数値または null

応答のステータスコード(受信した場合)。応答を受信した場合は、整数にする必要があります。エラーが発生し、応答が受信されなかった場合は、null のままにする必要があります。

tracker.setResponseStatusCode(response.statusCode); 
CPP
requestHeaders

ディクショナリまたは null

クライアントのリクエストヘッダーのキーと値を表すディクショナリ。

tracker.setRequestHeaders(headers); 
CPP
responseHeaders

ディクショナリまたは null

サーバの応答ヘッダーのキーと値を表すディクショナリ。エラーが発生し、応答が受信されなかった場合、これは 「null」にする必要があります。

tracker.setResponseHeaders(headers);
CPP


カスタム HTTP リクエストの追跡

リクエストの追跡を手動で追加するには、リクエストを開始および終了するタイミングと応答のステータスを指定する必要があります。 


1. リクエストを送信する直前に RequestTracker オブジェクトを作成します。

import { Instrumentation } from '@appdynamics/react-native-agent';
...
const tracker = new RequestTracker({ "My_URL" }); 
JS

MY_URL」は呼び出される URL です。このパラメータに null は使用できません。


2. (オプション)リクエストを送信する前に、トラッカーにカスタムヘッダーを追加します。

 const headers = {
  'Content-Length': '5000',
 	};
 tracker.setRequestHeaders(headers);
JS

requestHeaders:リクエストヘッダーのキーと値を表すディクショナリ(または null)。


3. (オプション)リクエストとサーバ側の処理との相関を有効にします。サーバ側エージェントが検出できる発信リクエストに特定のヘッダーを追加し、応答でサーバ側エージェントから取得したヘッダーを返して、次のエージェントが使用できるようにします。

tracker.addServerCorrelationHeaders()
CODE


4. 応答またはエラーを受信した直後に、リクエストが正常に終了したか、エラーで終了したかに基づいて次のようにトラッカーオブジェクトのプロパティを設定します。

try {
    const response = await customRequest(url);
    tracker.setResponseStatusCode(response.statusCode);
    tracker.setResponseHeaders(response.headers);
} catch (e) {
    tracker.setError(e);
}
JS


6.reportDone() を呼び出します。

tracker.reportDone();
CODE

別のリクエストを追跡するには、新しいトラッカーオブジェクトを再度インスタンス化します。

完全な例

const tracker = new requestTracker({
  url: <MY_URL>
});


const headers = {
  'Content-Length': '5000',
};
tracker.setRequestHeaders(headers);
tracker.addServerCorrelationHeaders();


try {
  const response = await customRequest(url);
  tracker.setResponseStatusCode(response.statusCode);
  tracker.setResponseHeaders(response.headers);
} catch (e) {
  tracker.setError(e);
} finally {
  tracker.reportDone();
}
JS

React Native API ドキュメント

React Native エージェント API 参照ドキュメントについては、最新の React Native エージェント API ドキュメントまたは以前のバージョンを参照してください。