Download PDF
Download page React Native インストゥルメンテーションのカスタマイズ.
React Native インストゥルメンテーションのカスタマイズ
以下のセクションでは、React Native API を使用してインストゥルメンテーションをカスタマイズする方法について説明します。
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);
アプリケーションキーの変更
React Native API を使用して、EUM アプリケーションキーを動的に変更できます。コントローラ UI でモバイルアプリケーションを作成する場合、アプリケーションキーを受信します。アプリケーションキーの詳細については、「Get Started with Mobile 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 つの基本タイプがあります。
データのタイプ | 説明 | 仕様 | データが表示される場所 |
---|---|---|---|
情報ポイント | メソッドが呼び出される頻度と実行される時間。 |
| |
カスタムタイマー | コード内の任意のイベントシーケンスが、 複数のメソッドにまたがる場合でも、時間を計測。 |
| |
カスタムメトリック | 収集する整数ベースのデータ。 |
| |
ユーザデータ | 有用と思われる任意の文字列キーと値のペア |
| |
トピックパス(パンくずリスト) | クラッシュのコンテキスト。 |
| |
ユーザインタラクション | ユーザがボタンを押したとき、リストをクリックしたとき、およびテキストを選択したときにキャプチャ。 |
|
情報ポイントの報告
情報ポイントを使用すると、独自のコードがどのように実行されているかを追跡できます。モジュールのインポートとそのモジュールのメソッドの使用を必要とする他の React Native API とは異なり、情報ポイントを報告するための注釈をコードに追加します。
クラス/インターフェイス
API は、InfoPoint
関数を介して使用できます。
import { InfoPoint } from '@appdynamics/react-native-agent';
仕組み
@InfoPoint
注釈を使用して、情報ポイントを報告する関数だけを提供する必要があります。@InfoPoint
注釈には、次の 2 つの署名があります。
@InfoPoint
@InfoPoint({className: string, fnName: string})
メソッドの署名
仕組み | パラメータ | 説明 |
---|---|---|
@InfoPoint | なし(None) | 注釈が付けられているメソッドの情報ポイントを自動的に報告します。 |
| オブジェクト
| 注釈を付けるクラスと関数名を手動で指定します。 たとえば、 |
例
次の例は、情報ポイントの自動または手動レポートを使用する方法を示しています。コードが縮小されない場合は、自動レポートを使用することをお勧めします。そのほうが簡単で、同じ情報が報告されます。ただし、コードが縮小される場合は、クラスと関数名を手動で報告し、不要なクラスと関数名が縮小によって報告されないようにする必要があります。Automatic Reporting
注釈 @InfoPoint
を追加して、その下にあるメソッドの情報ポイントを自動的に作成します。情報ポイントは、メソッドの呼び出し方法と実行にかかる時間を報告します。
import { InfoPoint } from '@appdynamics/react-native-agent';
class InfoPointsScreen extends Component {
@InfoPoint
public infoPointMethod(arg1, arg2, value) {
console.log("Executing infoPointMethod!");
}
}
手動報告
クラス(シンボル名)内の特定のメソッドに関する情報ポイントを作成するには、次のように、クラスとメソッドの名前を指定する @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!");
}
}
カスタムタイマーの設定
カスタムタイマーを作成して、コード内の任意のイベントシーケンスに時間をかけられます。これには、複数のメソッドがあります。
クラス/インターフェイス
カスタムタイマー 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 |
の値を入力します。 | 日付オブジェクト | |
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 イベントを追跡できます。ユーザインタラクションがキャプチャされると、UI イベントでセッションをソートし、セッション ウォーターフォールのタイムラインで UI イベントを表示できます。
サポートされるユーザインタラクション
ユーザが次のいずれかまたはすべてを実行するときにキャプチャできます。
- ボタンのクリック
- テーブルセルの選択
- テキストフィールドの選択
- テキストビューの選択
セキュリティおよびプライバシー上の懸念点
インタラクション キャプチャ モードは、セキュリティとプライバシー上の理由でデフォルトでは無効になっています。これは、ユーザインタラクションに機密情報が含まれている可能性があるためです。さらに、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
)
})
コレクタへのユーザデータの送信を停止する場合のエージェントの無効化
エージェントの初期化中および実行中に、エージェントを無効にしてコレクタへのすべてのデータの送信を停止できます。たとえば、プライバシー上の理由でユーザがモニタリングをオプトアウトするオプションがアプリにある場合は、エージェントを無効にできます。
shutdownAgent
shutdownAgent
コールはコレクタへの発信データを停止し、デバイスにデータを保持しません。
import { Instrumentation } from '@appdynamics/react-native-agent';
...
Instrumentation.shutdownAgent();
- このコールは、エージェントからのトラフィックのみを停止します。
- エージェントが初期化されると、コールは削除できず、ライセンスが消費されます。
restartAgent
エージェントを再度有効にして shutdownAgent
を無効にする場合は、restartAgent
を使用します。
import { Instrumentation } from '@appdynamics/react-native-agent';
...
Instrumentation.restartAgent();
- このコールは、同様にリモートでエージェントをシャットダウンできるサーバ側のコールにも対応します。
- コールは、アプリケーションの実行中にのみ有効です。
- エージェントがリモートで無効になっている場合、コールは無視されます。
- コールがメモリから削除され、アプリケーションが再起動されるか、デバイスが再起動されると、エージェントは通常どおり初期化されます。
プログラムによるセッションの制御
デフォルトでは、ユーザが非アクティブになってからモバイルセッションが終了します。たとえば、ユーザがアプリケーションを開くと、セッションは開始され、ユーザが設定した期間にアプリケーションを使用しなくなった後にのみ終了します。ユーザがアプリケーションの再使用を開始すると、新しいセッションが開始されます。セッションの期間を定義するために非アクティブな期間を設定するのではなく、この 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] ダイアログに表示されます。プログラムで手動でスクリーンショットを取得するには、コントローラ UI でスクリーンショットを有効にし、次のスクリーンショット API を追加する必要があります。
クラス
スクリーンショット 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
)
}
)
}
}
ネイティブクラッシュのクラッシュレポートの概要の受信
CrashReportCallback
を使用して、ネイティブクラッシュのレポートを受信できます。
クラス
CrashReportCallback
API には、Instrumentation
クラスからアクセスできます。
import { Instrumentation } from '@appdynamics/react-native-agent';
使用方法
crashReportCallback
ネイティブエージェント設定オプションとしてCrashReportCallback
オブジェクトを送信します。Instrumentation.start({ crashReportCallback: (summaries: CrashReportSummary[]) => { console.log(summaries); }, });
CODEアプリケーションを再起動すると、クラッシュごとに
CrashReportSummary
が表示されます。export type CrashReportSummary = { crashId: string; exceptionName: string; exceptionReason: string; signalName: string; signalCode: string; };
CODE
CrashReportSummary
プロパティ
CrashReportSummary
には次のプロパティがあります。
名前 | タイプ | 説明 |
---|---|---|
crashId | string | クラッシュを一意に定義します。コントローラ UI で完全なクラッシュレポートを検索したり、クラッシュを検索するためのキーとして使用できます。 |
exceptionName | string | 例外名。例外が発生しなかった場合は、 |
exceptionReason | string | 例外の理由。例外が発生しなかった場合は、 |
signalName | string | 例外信号名。 |
signalCode | string | 例外信号コード。 |
クラッシュレポートの無効化
クラッシュレポートはデフォルトで有効になっていますが、インストゥルメンテーション構成を使用して手動でクラッシュレポートを無効にできます。他のクラッシュレポートツールを使用している場合、競合を最小限に抑え、クラッシュレポートの結果を最適化するために、クラッシュレポートを無効にする場合があります。
次に示すように、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);
}
...
サイレントエラーのログ
React Native の ErrorBoundary
を使用すると、エラーはサイレントに検出されますが、エージェントはエラーを受信せずログにも記録されません。サイレントなクラッシュをログに記録する場合は、AppDynamics React Native パッケージで提供される ErrorBoundary
を使用することを推奨します。
import { ErrorBoundary } from '@appdynamics/react-native-agent'
カスタム HTTP ライブラリでのエージェントの使用
エージェントは、NSURLConnection
/NSURLSession
クラス(iOS)または HttpURLConnection
/OkHttp
(Android)によって基盤となる実装が処理されたときに、自動的にネットワークリクエストを検出します。これによりほとんどのネットワークリクエストに対応しますが、モバイルアプリケーションでカスタム HTTP ライブラリが使用される場合があります。
エージェントでカスタムライブラリからのリクエストを検出するには、RequestTracker
クラスを使用してアプリケーションに手動でリクエスト トラッキング コードを追加します。
この方法を使用する前に、Instrumentation.start()
インターフェイスを使用して有効なキーでエージェントを初期化する必要があります。
RequestTracker
のプロパティ
カスタムコールのパラメータについて説明するには、RequestTracker オブジェクトに次のプロパティを設定する必要があります。
プロパティ | 説明 | コード |
---|---|---|
error | JavaScript エラーまたは 応答を受信できなかったことを示すエラー(発生した場合)。リクエストが成功した場合は、 |
CPP
|
statusCode | 数値または 応答のステータスコード(受信した場合)。応答を受信した場合は、整数にする必要があります。エラーが発生し、応答が受信されなかった場合は、 |
CPP
|
requestHeaders | ディクショナリまたは クライアントのリクエストヘッダーのキーと値を表すディクショナリ。 |
CPP
|
responseHeaders | ディクショナリまたは サーバの応答ヘッダーのキーと値を表すディクショナリ。エラーが発生し、応答が受信されなかった場合、これは 「null」にする必要があります。 |
CPP
|
カスタム HTTP リクエストの追跡
リクエストの追跡を手動で追加するには、リクエストを開始および終了するタイミングと応答のステータスを指定する必要があります。
1. リクエストを送信する直前に RequestTracker
オブジェクトを作成します。
import { Instrumentation } from '@appdynamics/react-native-agent';
...
const tracker = new RequestTracker({ "My_URL" });
「MY_URL
」は呼び出される URL です。このパラメータに null
は使用できません。
2. (オプション)リクエストを送信する前に、トラッカーにカスタムヘッダーを追加します。
const headers = {
'Content-Length': '5000',
};
tracker.setRequestHeaders(headers);
requestHeaders
:リクエストヘッダーのキーと値を表すディクショナリ(または null
)。
3. (オプション)リクエストとサーバ側の処理との相関を有効にします。サーバ側エージェントが検出できる発信リクエストに特定のヘッダーを追加し、応答でサーバ側エージェントから取得したヘッダーを返して、次のエージェントが使用できるようにします。
tracker.addServerCorrelationHeaders()
4. 応答またはエラーを受信した直後に、リクエストが正常に終了したか、エラーで終了したかに基づいて次のようにトラッカーオブジェクトのプロパティを設定します。
try {
const response = await customRequest(url);
tracker.setResponseStatusCode(response.statusCode);
tracker.setResponseHeaders(response.headers);
} catch (e) {
tracker.setError(e);
}
6.reportDone()
を呼び出します。
tracker.reportDone();
別のリクエストを追跡するには、新しいトラッカーオブジェクトを再度インスタンス化します。
完全な例
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();
}
React Native API ドキュメント
React Native エージェント API 参照ドキュメントについては、最新の React Native エージェント API ドキュメントまたは以前のバージョンを参照してください。