コントローラ UI に表示されるアプリケーションのデータをカスタマイズするには、API を使用します。このページでは、コード例を使用して React Native エージェント API を使用する方法を示します。 

React Native エージェントバージョン

React Native エージェントのバージョン番号は、コントローラおよび AppDynamics プラットフォーム コンポーネントのバージョン番号とは異なります。この違いがあるため、すべての React Native エージェント機能を完全にサポートするために必要な最小バージョンのコントローラおよび EUM サーバについては、「 モバイル エージェント バージョンおよび展開サポートマトリックスを参照してください。

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

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

Native React エージェント API を使用して、EUM アプリケーションキーを動的に変更できます。コントローラ UI でモバイルアプリケーションを作成する場合、EUM アプリケーションキーを受信します。EUM アプリケーションキーの取得については、「モバイル 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 つの基本タイプがあります。

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


情報ポイントの報告

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

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

API は、Instrumentation クラスと InfoPoint 関数を介して使用できます。

import { Instrumentation, 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呼び出す関数。

anually specify注釈を付けるクラスと関数名。

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

 

次の例は、情報ポイントの自動報告および手動報告を使用する方法を示しています。

コードが縮小されない場合は、自動報告を使用することをお勧めします。これは単純で、同じ情報を報告します。ただし、コードが縮小される場合は、クラスと関数名を手動で報告し、不要なクラスと関数名が縮小によって報告されないようにする必要があります。

Automatic Reporting

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

 

import { Instrumentation } from '@appdynamics/react-native-agent';
...
@InfoPoint
public infoPointMethod(arg1, arg2, value) {
    console.log("Executing infoPointMethod!");
} 
JS

手動報告

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

import { Instrumentation } from '@appdynamics/react-native-agent';
...
@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
の値を入力します。Dデータオブジェクト
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 イベントを追跡できます。Once user interactions have been captured, you can sort sessions by UI event and view UI events in the timeline of the session waterfall.  

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

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

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

Security and Privacy Concerns

セキュリティおよびプライバシー上の理由により、インタラクション キャプチャ モードは、 デフォルトでは無効になっています。これは、ユーザインタラクションに機密情報が含まれるためです。さらに、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

 

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

デフォルトでは、ユーザが非アクティブになってからモバイルセッションが終了します。たとえば、ユーザがアプリケーションを開くと、セッションは開始され、ユーザが設定した期間にアプリケーションを使用しなくなった後にのみ終了します。ユーザがアプリケーションの再使用を開始すると、新しいセッションが開始されます。セッションの期間を定義するために非アクティブな期間を設定するのではなく、この 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されます.

クラス

スクリーンショット 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

React Native API ドキュメント

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