Application Real-Time Monitoring Service:HarmonyOS アプリケーションの統合

Axios ネットワークデータ収集

1. (任意) エンドツーエンド分散トレーシングを有効にするには、リクエストに Alibaba Cloud のカスタムビジネスリクエストヘッダーを挿入する必要があります。分散トレーシングが不要な場合は、この手順をスキップできます。エンドツーエンド分散トレーシングを使用する場合は、事前にコンソールでホストホワイトリストを構成する必要があります。詳細については、「Application Monitoring におけるフロントエンドとバックエンドのトレースの関連付け」をご参照ください。

   重要

   各ネットワークリクエストごとに新しいカスタムヘッダーを取得および割り当てる必要があります。異なるリクエスト URL に対して API 呼び出し結果を再利用しないでください。

   function getInsertHeaderMap(requestUrl: string): Map<string, string> | undefined

   パラメーター	必須	説明	パラメーター制約	失敗時の結果
   requestUrl	必須	リクエスト URL	文字列。有効なリクエスト URL であること。	取得に失敗しました。

   // この例では、`AxiosRequestConfig` を使用してリクエストヘッダーを挿入する方法を示します。リクエストインターセプタを実装し、`InternalAxiosRequestConfig.headers` を処理してヘッダーを挿入することも可能です。
   import axios, {
     AxiosError,
     AxiosHeaders,
     AxiosResponse,
     AxiosRequestConfig,
     InternalAxiosRequestConfig
   } from '@ohos/axios'
   import { AlibabaCloudRumTrace } from '@alibabacloud_rum/harmony_sdk'
   
   let customHeaders: AxiosHeaders = new AxiosHeaders()
   let traceHeader = AlibabaCloudRumTrace.axios.getInsertHeaderMap("https://www.example.com");
   if (traceHeader) {
     traceHeader.forEach((value: string, key: string) => {
       customHeaders.set(key, value);
     })
   }
   // AxiosRequestConfig を使用して実際のリクエストヘッダーに挿入。
   let requestConfig: AxiosRequestConfig = {
     method: this.currMethod,
     headers: customHeaders,
     params: this.currRequestParam
   }
   axios.get("https://www.example.com", requestConfig);

2. (必須) 正常および異常なネットワークリクエストのデータを収集します。

   function handleSuccess(requestUrl: string, method: string, responseCode: number,
       requestDataSizeByte?: number, downloadSizeByte?: number,
       timingParam?: object, remoteAddressIP?: string, requestHeader?: Record<string, Object>,
       responseHeader?: Record<string, Object>, resourceType?: string, requestBody?: string)

   メトリックの説明：

   パラメーター	必須	説明	パラメーター制約	失敗時の結果
   requestUrl	必須	リクエスト URL	文字列。有効なリクエスト URL であること。	ネットワークイベントは収集されません。
   method	必須	リクエストメソッド	文字列。HTTP 以外のリクエストメソッドの場合は空文字列を渡します。	ネットワークイベントは収集されません。
   responseCode	必須	応答コード	数値。	ネットワークイベントは収集されません。
   requestDataSizeByte	任意	アップロードされたリクエストデータのサイズ	数値。単位：バイト。	ネットワークイベントは収集されません。
   downloadSizeByte	任意	ダウンロードサイズ	数値。単位：バイト。	ネットワークイベントは収集されません。
   timingParam	任意	axios リクエストの各フェーズにかかった時間	http.PerformanceTiming	ネットワークイベントは収集されません。
   remoteAddressIP	任意	宛先 IP アドレス	文字列	ネットワークイベントの関連フィールドが欠落します。
   requestHeader	任意	リクエストヘッダー。分散トレーシング機能を使用するには、このパラメーターが必要です。	Record 型	ネットワークイベントの関連フィールドが欠落します。
   responseHeader	任意	応答ヘッダー	Record 型	ネットワークイベントの関連フィールドが欠落します。
   resourceType	任意	リソースタイプ	文字列。Multipurpose Internet Mail Extensions (MIME) タイプの Content-Type フィールドに従います。	ネットワークイベントの関連フィールドが欠落します。
   requestBody	任意	リクエスト内容	文字列データ型	ネットワークイベントの関連フィールドが欠落します。

   異常なネットワークリクエストのデータを収集します。

   function handleError(requestUrl: string, method: string, requestDataSizeByte: number, errorParam: Error,requestHeader?: Record<string, Object>)

   パラメーター	必須	説明	パラメーター制約	失敗時の結果
   requestUrl	必須	リクエスト URL	文字列。有効なリクエスト URL であること。	ネットワークイベントは収集されません。
   method	必須	リクエストメソッド	文字列。HTTP 以外のリクエストメソッドの場合は空文字列を渡します。	ネットワークイベントは収集されません。
   requestDataSizeByte	必須	アップロードされたリクエストデータのサイズ	数値。単位：バイト。	ネットワークイベントは収集されません。
   errorParam	必須	ネットワークエラー	ビジネスエラー型	ネットワークイベントは収集されません。
   requestHeader	任意	リクエストヘッダー	Record 型	ネットワークイベントの関連フィールドが欠落します。

   以下に例を示します。

   axios.get("http://www.example.com"，requestConfig).then((responseData: AxiosResponse) => {
     AlibabaCloudRumTrace.axios.handleSuccess("http://www.example.com", "GET", responseData.status, requestDataSize, downloadSize, responseData.performanceTiming);
   }).catch((err: BusinessError) => {
     AlibabaCloudRumTrace.axios.handleError("http://www.example.com", "GET", 0, err);
   });

Webview データ収集

Web コンポーネントのライフサイクルコールバックに SDK 収集ロジックを追加します。手順は以下のとおりです。

1. JS スクリプトを挿入します。

   javaScriptOnDocumentStart のパラメーターに、AlibabaCloudRumTrace.Web.getScriptItem() を追加します。

2. `onPageEnd` ライフサイクルにイベントトラッキングを追加します。

   onPageEnd 内に、AlibabaCloudRumTrace.Web.onPageEndHilt(this.controller) を追加します。

3. コンポーネントがアンインストールされる際に、SDK 収集リソースを破棄します。

   onDisAppear 内に、AlibabaCloudRumTrace.Web.onDisAppearHilt(this.controller) を追加します。

コード例：

import { AlibabaCloudRumTrace } from '@alibabacloud_rum/harmony_sdk';

Web()
  .javaScriptOnDocumentStart([AlibabaCloudRumTrace.Web.getScriptItem()])
  .onPageEnd(() => {
    AlibabaCloudRumTrace.Web.onPageEndHilt(this.controller); 
    // this.controller: 現在の Web コンポーネントにバインドされている WebviewController である必要があります。
  })
  .onDisAppear(() => {
    AlibabaCloudRumTrace.Web.onDisAppearHilt(this.controller);
    // this.controller: 現在の Web コンポーネントにバインドされている WebviewController である必要があります。
  })