React Native インストゥルメンテーションのカスタマイズ

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 でモバイルアプリケーションを作成する場合、アプリケーションキーを受信します。アプリケーションキーの詳細については、「モバイル RUM を使ってみる」を参照してください。

クラス

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

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

メソッド

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

• changeAppKey(appKey)

メソッドパラメータ

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

例

たとえば、新しいアプリケーションキーを引数として受け取り、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 を追加して、その下にあるメソッドの情報ポイントを自動的に作成します。情報ポイントは、メソッドの呼び出し方法と実行にかかる時間を報告します。

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)

メソッドパラメータ

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

例

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

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 メソッドは、次のパラメータを使用します。

例

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

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 は、カスタムユーザデータを設定および削除するために次のメソッドを提供します。

メソッドパラメータ

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

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

例

次のコード例は、カスタムユーザーデータ 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 メソッドは、次のパラメータを使用します。

例

基本使用

次の例は、トピックパス（パンくずリスト）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 }
)

次の API を使用して UI イベントをキャプチャできます。

メソッド

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

Instrumentation.trackUIEvent()

パラメータ

UIEventInfo タイプのオブジェクト

export interface UIEventInfo {
/** Name of the current screen */
screenName: string;
/**  Name of the action, e.g. "Button Pressed", "Text View Unfocused" */
eventName: string;
/**  Class of the UI element, e.g. TouchableOpacity */
className: string;
/**  Tag value for the component. */
tag?: number;
/**  The title of a component. */
label?: string;
/**  The accessibility label of the component. */
accessibilityLabel?: string;
/**  Index in a FlatList. */
index?: string;
/**  Name of the method called onPress. */
uiResponder?: string;
}

例

export default Example = () => {
const buttonTitle = "Login";
const accessibilityLabel = "loginButton";
return (
<Button testID={accessibilityLabel} title={buttonTitle} onPress={async ()> {
await Instrumentation.trackUIEvent({
screenName: "UIInteractionScreen",
eventName: "Login button pressed",
className: "Button",
label: buttonTitle,
accessibilityLabel: accessibilityLabel,
uiResponder: "loginPressed",
});
}}
/>
);
};

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

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 は、現在のセッションを終了し、新しいセッションを開始するための次のメソッドを提供します。

例

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

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 を使用してセッションフレームの名前を変更し、終了します。

メソッドパラメータ

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

セッションフレームの例

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

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 は、次のメソッドを提供します。

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

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

スクリーンショットは、コントローラ 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.NONE

LoggingLevel.INFO

LoggingLevel.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';

使用方法

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

   JSONCopy

   Instrumentation.start({ crashReportCallback: (summaries: CrashReportSummary[]) => { console.log(summaries); }, });

   Instrumentation.start({
   crashReportCallback: (summaries: CrashReportSummary[]) => {
   console.log(summaries);
   },
   });

2. アプリケーションを再起動すると、クラッシュごとに CrashReportSummary が表示されます。

   JSONCopy

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

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

CrashReportSummary プロパティ

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

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

次に示すように、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 ファイルへの書き込み時に重大度レベルを ErrorSeverityLevel.CRITICAL（重大）に設定します。

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

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

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

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

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

リクエスト トラッカー プロパティの設定

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

tracker.setError(e);

tracker.setResponseStatusCode(response.statusCode);

tracker.setRequestHeaders(headers);

tracker.setResponseHeaders(headers);

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

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

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

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

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

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

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 ドキュメントまたは以前のバージョンを参照してください。

• https://sdkdocs.appdynamics.com/react-native-agent/22.5/
• https://sdkdocs.appdynamics.com/react-native-agent/21.11/
• https://sdkdocs.appdynamics.com/react-native-agent/21.4/
• https://sdkdocs.appdynamics.com/react-native-agent/21.2/