Download PDF
Download page React Native インストゥルメンテーションのカスタマイズ.
React Native インストゥルメンテーションのカスタマイズ
コントローラ 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';
API メソッドの構文
クラス、インターフェイス、または列挙子がインポートされたら、 インポートしたコンポーネントから API メソッドを呼び出します。次の例では、Instrumentation
クラスの setUserDataBoolean
を使用してカスタムユーザデータを設定します。
Instrumentation.setUserDataBoolean("Boolean Key", true);
アプリケーションキーの変更
Native React エージェント API を使用して、EUM アプリケーションキーを動的に変更できます。コントローラ UI でモバイルアプリケーションを作成する場合、EUM アプリケーションキーを受信します。EUM アプリケーションキーの取得については、「モバイル RUM の設定およびアクセス」を参照してください。
クラス
アプリケーションキーを変更する API は、Instrumentation
クラスを介して使用できます。
import { Instrumentation } from '@appdynamics/react-native-agent';
仕組み
API は、次のメソッドで構成されます。
changeAppKey(appKey)
メソッドパラメータ
changeAppKey メソッドは次のパラメータを使用します。
パラメータ名 | データ タイプ | 説明 |
---|---|---|
appKey | string | EUM アプリケーションキー。 |
例
次の例では、新しいアプリケーションキーを 取得し、API メソッド changeAppKey
に渡すメソッドを作成します。
import { Instrumentation } from '@appdynamics/react-native-agent';
...
private updateAppKey(newAppKey) {
Instrumentation.changeAppKey(newAppKey);
}
データの追加タイプの収集
React Native API には、モバイル RUM で収集して集約できるアプリケーション データ タイプを拡張するメソッドがあります。作成できる拡張には、次の 6 つの基本タイプがあります。
データのタイプ | 説明 | 仕様 | データが表示される場所 |
---|---|---|---|
Info Points | メソッドが呼び出される頻度と実行される時間 |
| |
カスタムタイマー | カスタムタイマーを作成して、コード内の任意のイベントシーケンスに時間をかけることができます。 これには、複数のメソッドがあります。 |
| |
カスタムメトリック | 収集する整数ベースのデータ。 |
| |
ユーザデータ | 有用と思われる任意の文字列キーと値のペア |
| |
トピックパス(パンくずリスト) | クラッシュのコンテキスト。 |
| |
ユーザインタラクション | ユーザがボタンを押したとき、リストをクリックしたとき、およびテキストを選択したときにキャプチャ。 |
|
情報ポイントの報告
情報ポイントを使用すると、独自のコードがどのように実行されているかを追跡できます。モジュールのインポートとそのモジュールのメソッドの使用を必要とする他の React Native API とは異なり、情報ポイントを報告するための注釈をコードに追加します。
クラス/インターフェイス
API は、Instrumentation
クラスと InfoPoint
関数を介して使用できます。
import { Instrumentation, InfoPoint } from '@appdynamics/react-native-agent';
仕組み
@InfoPoint
注釈を使用して、情報ポイントを報告する関数だけを提供する必要があります。@InfoPoint
注釈には、次の 2 つの署名があります。
@InfoPoint
@InfoPoint({className: string, fnName: string})
メソッドの署名
仕組み | パラメータ | 説明 |
---|---|---|
@InfoPoint | なし(None) | 注釈が付けられているメソッドの情報ポイントを自動的に報告します。 |
| オブジェクト
| anually specify注釈を付けるクラスと関数名。 たとえば、
|
例
次の例は、情報ポイントの自動報告および手動報告を使用する方法を示しています。
コードが縮小されない場合は、自動報告を使用することをお勧めします。これは単純で、同じ情報を報告します。ただし、コードが縮小される場合は、クラスと関数名を手動で報告し、不要なクラスと関数名が縮小によって報告されないようにする必要があります。
Automatic Reporting
注釈 @InfoPoint
を追加して、その下にあるメソッドの情報ポイントを自動的に作成します。情報ポイントレポートメソッドの呼び出し方法と実行にかかる時間。
import { Instrumentation } from '@appdynamics/react-native-agent';
...
@InfoPoint
public infoPointMethod(arg1, arg2, value) {
console.log("Executing infoPointMethod!");
}
手動報告
クラス(シンボル名)内の特定のメソッドに関する情報ポイントを作成するには、クラスとメソッドを指定する @InfoPoint
注釈にオブジェクトを渡します name以下のとおりです。
import { Instrumentation } from '@appdynamics/react-native-agent';
...
@InfoPoint({ className: 'MyClass', fnName: 'infoPointMethod' })
...
public infoPointMethod(arg1, arg2, value) {
console.log("Executing infoPointMethod!");
}
カスタムタイマーの設定
カスタムタイマーを作成して、コード内の任意のイベントシーケンスに時間をかけられます。これには、複数のメソッドがあります。
クラス/インターフェイス
カスタムタイマー API には、Instrumentation
クラスから次のようにアクセスできます。
import { Instrumentation } from '@appdynamics/react-native-agent';
仕組み
カスタムタイマーを作成するには、次の React Native エージェント API メソッドを使用します。
startTimerWithName(name)
stopTimerWithName(name)
メソッド パラメータ
両方のメソッドは次のパラメータを使用します。
名前 | タイプ | 説明 |
---|---|---|
name | string | カスタムタイマーの名前。使用できる文字は [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");
}
カスタムメトリックの作成
React Native API を使用すると、カスタムメトリックをレポートできます。コントローラ UI に表示されるカスタムメトリックの名前を指定します。
クラス
カスタムメトリック API には、Instrumentation
クラスから次のようにアクセスできます。
import { Instrumentation } from '@appdynamics/react-native-agent';
仕組み
次を使用してカスタムメトリックを作成します。reportMetric
:
reportMetric(name, value)
メソッドパラメータ
reportMetric
メソッドは次のパラメータを使用します。
名前 | タイプ | 要件 | 説明 |
---|---|---|---|
name | string | メトリック名には英数字を使用する必要があります。不正な文字は、ASCII 16 進値に置き換えられます。 | カスタムメトリックの名前。 |
value | number | 値は整数でなければなりません。それ以外の場合は、エラーが返されます。 | カスタムメトリックに関連付けられている数値。 |
例
たとえば、次のメソッドを使用してカスタムメトリックをレポートすることができます。
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);
}
カスタムユーザデータの追加
カスタムユーザデータ API を使用して、異なるデータタイプのキー/値ペアを設定および削除します。キーは、アプリケーション全体で一意である必要があります。
クラス
カスタムユーザデータ API には、Instrumentation
クラスから次のようにアクセスできます。
import { Instrumentation } from '@appdynamics/react-native-agent';
仕組み
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);
}
トピックパスを残す
トピックパスを使用すると、ユーザエクスペリエンスのコンテキストでクラッシュの場所を特定できます。問題が発生したときに、トピックパスを設定します。その後のある時点でアプリケーションがクラッシュした場合、トピックパスはクラッシュレポートとともに表示されます。各クラッシュレポートには、最近の 99 件のトピックパスが表示されます。
クラス
トピックパス API には、Instrumentation
クラスから次のようにアクセスできます。
import { Instrumentation } from '@appdynamics/react-native-agent';
仕組み
次の API メソッドを使用して、トピックパスを作成して残します。
leaveBreadcrumb(breadcrumb, mode)
メソッドパラメータ
メソッド leaveBreadcrumb
は、次のパラメータを使用します。
名前 | タイプ | 説明 |
---|---|---|
breadcrumb | string | クラッシュレポートおよびセッションに含める文字列。2048 文字で切り捨てられます。空の値は無視されます。 |
mode | 列挙型 | トピックパスが表示される場所を決定するモード。次のモードを使用すると、クラッシュのみ、またはクラッシュおよびセッションを報告できます。
デフォルトモードは |
例
基本使用
次の例は、 ブレッドクラム API の構文および使用方法を示しています。
import { Instrumentation } from '@appdynamics/react-native-agent';
...
private leaveBreadcrumb() {
Instrumentation.leaveBreadcrumb("Drop a breadcrumb button implementation", BreadcrumbVisibility.CRASHES_AND_SESSIONS);
}
使用例の拡大
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();
}
}
ウィザードエンジンは、チェックアウトに使用できます。
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 }
)
アプリケーションが多数の 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';
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
})
ユーザ インタラクション モードの組み合わせ
次に、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
)
})
ユーザ インタラクション モードの除外
次の例では、ユーザ インタラクション モード 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
)
})
プログラムによるセッションの制御
デフォルトでは、ユーザが非アクティブになってからモバイルセッションが終了します。たとえば、ユーザがアプリケーションを開くと、セッションは開始され、ユーザが設定した期間にアプリケーションを使用しなくなった後にのみ終了します。ユーザがアプリケーションの再使用を開始すると、新しいセッションが開始されます。セッションの期間を定義するために非アクティブな期間を設定するのではなく、この API を使用して、セッションの開始と終了をプログラムで制御できます。
クラス
API には、Instrumentation
クラスからアクセスできます。
import { Instrumentation } from '@appdynamics/react-native-agent';
仕組み
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");
}
}
セッションフレームの開始と終了
React Native エージェント API を使用して、セッションアクティビティに表示されるセッションフレームを作成できます。セッションフレームは、セッション中にユーザが実行している内容のコンテキストを提供します。API を使用すると、ビジネスコンテキスト内のユーザ画面の名前とユーザフローの記録を向上させることができます。
使用例
次に、セッションフレームの一般的な使用例を示します。
- 1 つのページで複数の関数を実行し、個々の関数をより詳細に追跡する必要があります。
- ユーザフローは、複数のページまたはユーザのインタラクションに及びます。たとえば、API を使用してセッションフレーム「Login」、「Product Selection」、および「Purchase」を作成して、ユーザが購入のためにフローを記録することができます。
- ユーザの操作に基づいて動的情報をキャプチャし、オーダー ID などのセッションフレームに名前を付けることができます。
クラス/インターフェイス
Sessionframe API は、Instrumentation
クラスを介してアクセスできます。
import { Instrumentation } from '@appdynamics/react-native-agent';
名前を更新してセッションフレームを終了するには、SessionFrame
インターフェイスを使用します。
仕組み
次の表に、セッションフレームで使用できる 3 つのメソッドを示します。つまり、startSessionFrame
を使用してセッションフレームを開始してから、updateName
と end
を使用してセッションフレームの名前を変更し、終了します。
メソッド | [説明(Description)] |
---|---|
| セッションフレームを開始します。Instrumentation, からこのメソッドを呼び出し、SessionFrame オブジェクトを返します。 |
updateName(name) | セッションフレームの名前を更新します。SessionFrame オブジェクトからこのメソッドを呼び出します。 |
メソッドパラメータ
メソッド startSessionFrame
および updateName
は、次のパラメータを使用します。
パラメータ | データ タイプ | 説明 |
---|---|---|
| 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;
}
}
スクリーンショットの設定および作成
モバイルスクリーンショットはデフォルトで有効になっています。次のスクリーンショットは、 ダイアログに表示Sessions Detailsされます.
クラス
スクリーンショット API には、Instrumentation
クラスからアクセスできます。
import { Instrumentation } from '@appdynamics/react-native-agent';
仕組み
スクリーンショット API は、次のメソッドを提供します。
メソッド | 戻り値 | 説明 |
---|---|---|
| なし(None) | 現在の画面のスクリーンショットを非同期的に作成します。 これにより、個人情報を含むすべてがキャプチャされるため、 /スクリーンショットを作成するタイミングに注意する必要があります。 これらのスクリーンショットは、このユーザの [Sessions] 画面に表示されます。 スクリーンショットはバックグラウンドスレッドで作成され、圧縮され、非冗長部分のみがアップロードされるため、アプリケーションのパフォーマンスに影響を与えることなく、これらの多くを安全に実行できます。 |
screenshotsBlocked() | Promise<boolean> | スクリーンショットのキャプチャがブロックされているかどうかを示すブール値を返します。 |
blockScreenshots() | Promise<void> | スクリーンショットのキャプチャをブロックし、スクリーンショットが実際にブロックされたときに解決される Promise を返します。 |
unblockScreenshots() | Promise<void> | 現在ブロックされている場合は、スクリーンショットのキャプチャのブロックを解除します。それ以外の場合は、影響を与えません。 スクリーンショットが スクリーンショットがコントロール UI で手動モードに設定されている場合、このメソッドは手動モードでのみブロック解除します。 |
スクリーンショットの構成
スクリーンショットの無効化
スクリーンショットはコントローラ UI または React Native API を使用して無効にすることができます。スクリーンショットを無効にするには、React Native エージェントを初期化する場合にプロパティ screenshotsEnabled
を false
に設定します。
Instrumentation.start({
appKey: <EUM_APP_KEY>,
screenshotsEnabled: false,
...
});
オンプレミス スクリーンショット サービスの設定
オンプレミス EUM サーバを展開している場合は、プロパティ screenshotURL
を使用して EUM サーバに URL を指定する必要があります。
Instrumentation.start({
appKey: <EUM_APP_KEY>,
screenshotURL: "https://<COLLECTOR_URL>:<PORT>",
...
});
例
スクリーンショットの作成
スクリーンショットを自動的に作成するようにコントローラ UI を設定するか、または次に示すように React Native API を使用して手動でスクリーンショットを作成することができます。
private loadShoppingCart() {
// Load shopping cart
this.setState({
shoppingCart: this.state.cart
});
// Manually take screenshot
Instrumentation.takeScreenshot();
}
これにより、個人情報を含むすべてがキャプチャされるため、 スクリーンショットの作成には注意が必要です
スクリーンショットのブロックとブロック解除
コードブロックの実行中にスクリーンショットが作成されるのをブロックすることもできます。これにより、スクリーンショットのブロックを解除するまで、スクリーンショットの作成が一時的にブロックされます。これにより、ユーザがログインやアカウント画面などで個人データを入力する状況でのスクリーンショットの取得を停止できます。
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();
}
ロギングの有効化とロギングレベルの設定
ロギングを有効にするには、インストゥルメンテーションの構成でロギングレベルを設定します。実稼働のロギングを無効にすることをお勧めします。
クラス
ログレベルの API には、LoggingLevel
クラスからアクセスできます。
import { LoggingLevel } from '@appdynamics/react-native-agent';
構成プロパティ
次の構成プロパティを使用して、ログレベルを有効にして設定します。
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
)
}
)
}
}
React Native API ドキュメント
React Native エージェント API 参照ドキュメントについては、最新の React Native エージェント API ドキュメントまたは以前のバージョンを参照してください。