React Native モニタリング API

React Native ( API )を使用して、 Instana で React Native アプリケーションを監視および計測する方法について学びましょう。 これにより、ハイブリッドモバイルアプリケーションのリアルタイムな可観測性とパフォーマンスに関する洞察が可能になります。

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

React Native エージェントの更新内容、機能強化、および変更点については、 GitHub: の 「変更履歴 」ファイルをご覧ください

Instana React Native エージェント API

ここで説明されているクラ Instana スメソッドを通じて、 InstanaReact Native エージェントを使用できます。

React Native このエージェントは、バージョン 2.0.6 以降の TypeScript プロジェクトに対応しています。

セットアップ

クラス App 内で componentDidMount()Instana を初期化してください:

export default class App extends Component {
  componentDidMount() {
    Instana.setup(YOUR_INSTANA_APP_KEY, YOUR_INSTANA_REPORTING_URL, null);
    // Alternatively with configuration options
    Instana.setup(YOUR_INSTANA_APP_KEY, YOUR_INSTANA_REPORTING_URL, {'collectionEnabled': false});
  }
}

次のコードはTypeScriptの定義です:

setup(your_instana_app_key: string, your_instana_app_reportingUrl: string, options?: Object): void;
setup(your_instana_app_key: string, your_instana_app_reportingUrl: string, {collectionEnabled: boolean}): void;

セットアップ・パラメーター

次の表に設定パラメータを一覧で示します:

パラメーター 説明
key (String) Instana モニタリング構成キー
reportingURL (String) URL は、監視データを送信すべき Instana インスタンスを指しています

セッション ID

各Instanaエージェント・インスタンスには、アプリで他の目的に使用できる固有のセッション識別子があります。

static getSessionID()

次のコードはTypeScriptの定義です:

getSessionID(): Promise<string>;

自動 HTTP モニタリング

Instana このエージェントは、 HTTP へのリクエストを自動的に監視します。

ビュー

Instana は、モバイル・アプリケーションの洞察を論理ビューによってセグメント化することができます。 メソッド Instana.setView(String) を使用して、ビュー名を設定できます。 その後、setViewが再び呼ばれたときにビューが変更されるまで、ビューは監視されているすべてのビーコンに関連付けられます。

ビューを定義する際は、「Class」などの技術用語や一般的な名称(例: WebViewActivity)を使用しないでください。 その代わりに、ビューには読みやすい名前を使いましょう(例えば、product detail pagepayment selectionなど)。 ユーザー・エクスペリエンスに焦点を当てることで、コードベースを熟知していないチーム・メンバーも、提供される洞察を理解することができる。

注: Instana.setView(String) は、画面が作成されたときではなく、ユーザーに画面が表示されたときに呼び出されます(たとえば、一度だけ作成されるが複数回表示される可能性のあるFragmentの場合など)。 ビュー名を設定すると、 Instana はページの読み込みだけでなく、ページ遷移も追跡できるようになります。
static setView(String name)

次のコードはTypeScriptの定義です:

setView(name: string): void;

ビューのパラメータ

次の表に、ビューのパラメータを一覧で示します:

パラメーター 説明
name (String) ビューの名前。

ユーザーの識別

Instana に送信されるデータに、必要に応じてユーザー固有の情報を含めることができます。 この情報を使用して、以下のような追加機能をアンロックすることができます。

  • エラーの影響を受けたユーザー数の算出
  • 特定のユーザーのデータをフィルタリングする
  • ビューの変更または HTTP リクエストを発行したユーザーを確認する

デフォルトでは、Instana はユーザーが識別可能な情報をビーコンに関連付けません。 各国のデータ保護法について、十分に理解しておく必要があります。 ユーザー ID を使用してユーザーを識別します。 Instana において、これは特定のメトリクスの計算にのみ使用される透過的なものです StringuserNameuserEmailは、より多くのフィルターにアクセスしたり、ユーザー情報をよりよく表示したりするためにも使えます。

匿名ユーザーを扱っていて、ユーザーIDにアクセスできない場合は、セッションIDを使うこともできます。 データのフィルタリングを行う際、セッションIDはユーザーIDほど有用ではありませんが、影響を受けたユーザー数やユニークユーザー数といった指標を算出する上では有用な指標となります。 認証済みユーザーと非認証ユーザーを明確に区別するには、 Anonymous などのユーザー名を設定します。 セッション ID は、(使用するフレームワークまたはプラットフォームに応じて) 機密データにすることができます。 ハッシュ・セッション ID を考慮する は、アクセス権限を付与できる Instana にデータが送信されないようにします。

Instana のサーバーにすでに送信されたデータは、事後的に更新することはできません。 このため、アプリの起動プロセスでは、できるだけ早くこの API を呼び出すことが重要です。

static setUserID(String ID)
static setUserName(String email)
static setUserEmail(String name)

次のコードはTypeScriptの定義です:

setUserID(id: string): void;
setUserName(name: string): void;
setUserEmail(email: string): void;

ユーザー・パラメーター

次の表にユーザーパラメータを一覧で示します:

パラメーター 説明
ID (String) ユーザーの ID。
email (String) ユーザーの E メール・アドレス。
name (String) ユーザーの名前。

ユーザー例

export default class App extends Component {
  componentDidMount() {
    Instana.setup(YOUR_INSTANA_APP_KEY, YOUR_INSTANA_REPORTING_URL);
    Instana.setUserID('1234567890');
    Instana.setUserEmail('instana@example.com');
    Instana.setUserName('instana react-native agent demo');
  }
}

メタデータ

Instana に送信されるすべてのデータには、任意のメタデータを付加することができます。 UIコンフィギュレーション値、設定、機能フラグ、そして分析に役立つかもしれない追加コンテキストを追跡するために使用することができます。

注:Instana は現在、最大50個のメタキー・バリューペアをサポートしています。
static setMeta(String key, String value)

次のコードはTypeScriptの定義です:

setMeta(key: string, value: string): void;

メタデータ・パラメーター

次の表に、メタデータパラメータを一覧で示します:

パラメーター 説明
value (String) メタデータとして追加する、キーと値のペアの value
key (String) メタデータとして追加する、キーと値のペアの key

メタデータの例

export default class App extends Component {
  componentDidMount() {
    Instana.setMeta('randomKey1', 'randomValue1');
    Instana.setMeta('randomKey2', 'randomValue2');
  }
}

カスタム・イベントのレポート

カスタムイベントを使用すると、標準外のアクティビティ、重要なインタラクション、およびカスタムタイミングに関するレポートを Instana に送信できます。 これは、キャッチされていないエラー (パンくずリスト) を分析し、より多くのパフォーマンス・メトリックを追跡する場合に特に役立ちます。

static reportEvent(String eventName, {
  startTime: Number startTime,
  duration: Number duration,
  viewName: String viewName,
  backendTraceId: String backendTraceId,
  meta: Map meta
})

次のコードはTypeScriptの定義です:

reportEvent(eventName: string, options?: {
  startTime?: number;
  duration?: number;
  viewName?: string;
  meta?: Map<string, string>;
  backendTracingId?: string;
  customMetric?: number;
 }): void;

カスタムイベントのパラメータ

次の表は、カスタムイベントのパラメータを一覧にしたものです:

パラメーター 説明
eventName (String) アプリ内でどのようなイベントが発生したら、カスタムビーコンを送信するかを定義します
startTime (Number、オプション) イベントが開始された時刻を示すタイム・スタンプ (エポックからのミリ秒数)。 定義されていないときは now() - duration に戻る。
duration (Number、オプション) イベントの持続時間 (ミリ秒)。 デフォルトはゼロです。
viewName (String、オプション) リクエストをビューにグループ化するために渡す文字列。 明示的に nil を送信すると、viewName は無視されます。 あるいは、viewNameというパラメータを省略し、setView(String name)で設定した現在のビュー名を使うこともできます)。
backendTracingId (String、オプション) このイベントのバックエンドトレースを作成するための識別子
meta (object、オプション) この単一イベントのためだけにメタデータを Instana に送信するために使用できるストリング値を持つ JavaScript オブジェクト。 メタデータ API を使用する場合とは対照的に、このメタデータは後続のビーコンには含まれません。
customMetric (double、オプション) 小数点以下 4 桁までの精度のカスタム・メトリック・データ。 このメトリックには機密情報を含めないでください。

カスタムイベントの例

Instana.reportEvent('myCustomEvent', {
  startTime: Date.now() - 500,
  duration: 300,
  viewName: 'overridenViewName',
  backendTracingId: '31ab91fc1092',
  meta: {
    state: 'running'
  },
  customMetric: 123.4567
});

モニター対象からの URL の除外

URLは正規表現を指定するか、ignoreURLsリストに追加することで無視できます。 この関数は、パスワードなどの機密データを含むすべての HTTP リクエストを無視したい場合に役立ちます。

エージェントは、この setIgnoreURLsByRegex メソッドに指定された各文字列を、サポートされている各プラットフォーム向けのネイティブ正規表現に変換する必要があります。 プロミスの拒否を追跡することができ、エージェントがあなたの入力を解釈している間に遭遇した問題を知ることができます。

static setIgnoreURLsByRegex([]String regexArray)

次のコードはTypeScriptの定義です:

setIgnoreURLsByRegex(regexArray: Array<string>): Promise<any>;

URL のパラメータを除外する

次の表は、 URL のパラメータを除外したものです:

パラメーター 説明
regexArray 無視する URL に一致する正規表現が含まれる String オブジェクトの配列。

返す: Promise(Boolean) 拒否された場合、例外にはネイティブ正規表現への変換に失敗したすべてのパラメータのリストが含まれる。

URL を除外する例

export default class App extends Component {
  componentDidMount() {
    setIgnoreURLsByRegex();
    async function setIgnoreURLsByRegex() {
      try {
        await Instana.setIgnoreURLsByRegex(["http:\/\/localhost:8081.*", "/.*([&?])password=.*/i"]);
      } catch (e) {
        console.warn(e);
      }
    }
  }
}

この例では、Metro バンドラーに対するすべての照会と、照会にパスワードが含まれるすべての URL を無視します。

URL のクエリパラメータを非表示にする

収集したURLに含まれるクエリパラメータには、機密データが含まれている可能性がある。 そのため、 Instana エージェントでは、値を非表示にする必要があるクエリパラメータのキーに対して、正規表現パターンの指定をサポートしています。 冗長化が必要な値はすべて文字列<redacted>に置き換えられます。 情報の黒塗り処理は、 Instana エージェントが Instana サーバーに報告を行う前に、そのエージェント内で実行されます。 したがって、シークレットは処理のために Instana サーバーに送信されることはなく、 Instana のUIでの分析や、 Instana API を使用した取得の対象にはなりません。

デフォルトでは、 Instana エージェントには、キー「password」、「key」、「secret」のクエリパラメータ値を自動的にマスキングするための3つの正規表現パターンが設定されています。

static setRedactHTTPQueryByRegex([]String regexArray)

次のコードはTypeScriptの定義です:

setRedactHTTPQueryByRegex(regexArray: Array<string>): Promise<any>;

URL のクエリパラメータを非表示にする

次の表は、Redactの URL クエリパラメータの一覧です:

パラメーター 説明
regex ([NSRegularExpression]) 編集する値の鍵に一致する String の配列。

URL クエリの例(一部非表示)

export default class App extends Component {
  componentDidMount() {
    setRedactHTTPQueryByRegex();
    async function setRedactHTTPQueryByRegex() {
      try {
        await Instana.setRedactHTTPQueryByRegex(["pass(word|wort)"]);
      } catch (e) {
        console.warn(e);
      }
    }
  }
}

この例では、 HTTP パラメータのキー「password」または「passwort」の値を伏せ字にします。

キャプチャされた URL は収集され、次 https://example.com/accounts/?password=123&passwort=459 のように表示 https://example.com/accounts/?password=<redacted>&passwort=<redacted>されます。

注:Instana エージェントでは、パスパラメータ (/account/<account id>/status) やマトリックスパラメータ (/account;accountId=<account id>/status) をシークレットとして扱うことはできません。

HTTP のヘッダーを取得する

必要に応じて、 Instana エージェントは、追跡対象となるすべてのリクエストおよびレスポンスの HTTP ヘッダーを取得することができます。

どのヘッダーをキャプチャするかを決定するために、正規表現パターンのリストを定義することができる。

リクエストとその応答の両方に同じヘッダー名が存在する場合、応答のヘッダー 値のみが考慮される。

static setCaptureHeadersByRegex([]String regexArray)

次のコードはTypeScriptの定義です:

setCaptureHeadersByRegex(regexArray: Array<string>): Promise<any>;

HTTP ヘッダーの取得例

export default class App extends Component {
  componentDidMount() {
    setCaptureHeadersByRegex();
    async function setCaptureHeadersByRegex() {
      try {
        await Instana.setCaptureHeadersByRegex(["cache-control", "etag"]);
      } catch (e) {
        console.warn(e);
      }
    }
  }
}

低速送信モード(バージョン 2.0.11 以降、非推奨)

注: デフォルトでは、低速送信モード機能は無効になっています。 必要に応じて、この機能を有効にすることができます。

デフォルトでは、ビーコンの送信に失敗した場合、 Instana エージェントは、ビーコンが正常に送信されるまで再送信を試みます。 しかし、この動作は一部の携帯電話ネットワークではうまく機能しない。 「低速送信モード」機能を有効にすると、ビーコンの送信間隔を、 パラメータ slowSendInterval に割り当てられた時間値に変更できます。 各送信は、バッチではなく 1 つのビーコンのみで構成されます (バッチでは最大 100 ビーコン)。 Instana エージェントは、1つのビーコンが正常に送信されるまで、低速送信モードを維持します。

この slowSendInterval パラメータの有効な時間範囲は 2~3600 秒です。

次のコードはTypeScriptの定義です:

setup(key: string, reportingUrl: string, {slowSendInterval: number}): void;

低速送信モードの例

export default class App extends Component {
  componentDidMount() {
    var options = {}
    options.slowSendInterval = 120.0;
    Instana.setup('<your key>', '<your reporting url>', options);
  }
}

ユーザー・セッション ID

デフォルトでは、ユーザーセッションは追跡され、Universally Unique Identifier(UUID)がランダムに生成される。 この ID は、アプリのインストール中は変更されません。 パラメータ usiRefreshTimeIntervalInHrs を使用することで、ユーザーセッションIDの有効期限を設定できます。

以下のパラメーター値は、ユーザー・セッション ID の状況を示します。

  • 負の数値: この値は、ユーザー・セッション ID の有効期限が切れないことを示します。 デフォルト値は -1 です。

  • 正の数:この値は、ユーザー・セッションIDが設定時間後にリフレッシュされることを意味する。 新しいUUIDが生成され、使用される。

  • ゼロ: この値 0.0 は、ユーザー・セッション ID が使用不可であることを意味します。

次のコードはTypeScriptの定義です:

setup(key: string, reportingUrl: string, {usiRefreshTimeIntervalInHrs: number}): void;
 

ユーザーセッションIDの例

export default class App extends Component {
  componentDidMount() {
    var options = {}
    options.usiRefreshTimeIntervalInHrs = 24.0;
    Instana.setup('<your key>', '<your reporting url>', options);
  }
}

レート制限ビーコン

このパラメータを使用すると、特定の時間間隔内に送信できるビーコンの数の上限をカスタマイズできます。 次の表に、利用可能なオプションと、それに対応するビーコンの制限を一覧で示します。 デフォルトでは、 0 (DEFAULT_LIMITS) が選択されています。

選択可能な制限 カウント
0 (DEFAULT_LIMITS) - 5分間に500回のビーコン送信- 10秒間に20回のビーコン送信
1 (MID_LIMITS) - 5分間に1000回のビーコン送信- 10秒間に40回のビーコン送信
2 (MAX_LIMITS) - 5分間に2500個のビーコン- 10秒間に100個のビーコン

class App extends Component {
  componentDidMount() {
    let options = {};

    options.suspendReporting = Instana.androidSuspendReport.LOW_BATTERY_OR_CELLULAR_CONNECTION;
    options.rateLimits = 2; 
    Instana.setup('<your key>', '<your reporting url>', options);
  }
}

W3CHeaders とのバックエンド相関

( Boolean , enableW3CHeaders オプション) オプションを有効にすると、React Nativeエージェントは、監視対象のすべての API 呼び出しに および tracestate ヘッダー traceparent を含めます。 これらのヘッダーを使用すると、バックエンドに Instana エージェントが導入されていなくても、バックエンドの相関分析が可能になります。 そのような場合は、 バックエンドのトレース詳細をInstana バックエンドにエクスポートするために、互換性のあるモニタリングツール( OpenTelemetry など)を使用する必要があります。 このオプションが無効になっている場合、バックエンドの相関分析は、そのバックエンドが Instana エージェントによっても監視されている場合にのみ可能です。 デフォルト値はfalseです。

class App extends Component {
  componentDidMount() {
    let options = {};
    options.enableW3CHeaders = true;
    Instana.setup('<your key>', '<your reporting url>', options);
  }
}