Application Real-Time Monitoring Service:Web および HTML5 アプリケーション向け RUM SDK の設定例

SDK パラメーター

Alibaba Cloud Content Delivery Network (CDN) を使用してアプリケーションにアクセスする場合、アプリケーションがグローバル名前空間 RumSDK.default に存在することを確認してください。

const ArmsRum = window.RumSDK.default;
// RUM SDK を使用する前に、SDK がロードされていることを確認してください。
// SDK がロードされる前に __rum 構成が定義されていない場合は、ここで構成を初期化できます。
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// NPM パッケージまたは CDN ローディングによる初期化は同じです。
ArmsRum.setConfig('env', 'pre');

ユーザーパラメーター

例

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  user: {
    name: 'your user.name',
    tags: 'your user.tags',
  },
});

reportConfig パラメーター

例

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  reportConfig: {
    flushTime: 0, // データが即時にレポートされるように指定します。
    maxEventCount: 50, // 一度にレポートされるデータエントリの最大数を指定します。
  },
});

sessionConfig パラメーター

storage パラメーターは user.id とセッション情報を格納します:

• _arms_uid: 一意のユーザー ID (user.id)。

• _arms_session: セマンティックセッション情報。

  • sessionId: 一意のセッション ID。

  • sampled: サンプリングがトリガーされたかどうかを指定します。

  • startTime: セッションの開始タイムスタンプ。

  • lastTime: セッションが最後にアクティブだったときのタイムスタンプ。

`${sessionId}-${sampled}-${startTime}-${lastTime}`

例

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  sessionConfig: {
    sampleRate: 0.5, // サンプリングレートは 50% です。
    maxDuration: 86400000,
    overtime: 3600000,
    storage: 'cookie',
  },
});

collectors パラメーター

SDK は、api や静的リソースなどのコレクターを使用して、ページのモニタリングデータを収集します。

例

次の例では、ユーザーインタラクションデータの収集が無効になっています。

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  collectors: {
    action: false,
  },
});

EvaluateApi パラメーター

evaluateApi 関数は、XMLHttpRequest および fetch イベントのカスタム解析を提供します。

この関数は非同期で呼び出すことができます。Promise<IApiBaseAttr> が返されます。次の表に IApiBaseAttr を示します。

例

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  evaluateApi: async (options, response, error) => {
    let respText = '';
    // リクエストの結果を確認します。
    if (response && response.text) {
      respText = await response.text();
    }
    // 返されたフィールドはデフォルトのコンテンツを上書きします。フィールドが返されない場合は、デフォルトのコンテンツが使用されます。
    return {
      name: 'my-custom-api',
      success: error ?  0 : 1,
      // オプション。
      snapshots: JSON.stringify({
        params: 'page=1&size=10', // 入力パラメーター。
        response: respText.substring(0, 2000), // 返された値。
        reqHeaders: '', // リクエストヘッダー。
        resHeaders: '', // 応答ヘッダー。
      }),
      properties: {
        prop_msg: 'custom msg',
        prop_num: 1,
      },
    };
  },
});

filters パラメーター

filters パラメーターは、レポートする必要のないリソースまたは例外イベントを除外します。

MatchOption

type MatchOption = string | RegExp | ((value: string) => boolean);

• string: 指定された値で始まる任意の URL に一致します。例: https://api.aliyun.com。この場合、https://api.aliyun.com/v1/resource は一致します。

• RegExp: 正規表現と URL を指定します。

• function: 関数を使用して URL が一致するかどうかを判断します。true が返された場合、URL は一致します。

入力が MatchOption[] の場合、前述の条件が順に評価され、いずれかの条件が満たされると除外されます。

例

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  filters: {
    // 例外イベントを除外します。
    exception: [
      'Test error', // 'Test error' で始まるエラーメッセージ。
      /^ Script error\.?$/, // 正規表現に一致するエラーメッセージ。
      (msg) => {
        return msg.includes('example-error');
      },
    ],
    // リソースまたは API イベントを除外します。
    resource: [
      'https://example.com/', // 'https://example.com/' で始まるリソース
      /localhost/i,
      (url) => {
        return url.includes('example-resource');
      },
    ],
  },
});

whiteScreen パラメーター

whiteScreen パラメーターは、Chrome 40 や IE 9+ などのブラウザでのみサポートされています。

DetectionRule

CustomTesterResult:

type CustomTesterResult = {
  /**
   * コンテンツが存在するかどうかを示します。`true` はコンテンツが存在することを示します。それ以外の場合は、ホワイトスクリーンが発生しています。
   */
  hasContent: boolean;

  /**
   * エラーメッセージ
   */
  message?: string;

  /**
   * 例外のスナップショットデータ
   */
  snapshot?: Record<string, any>;
}

ConfigOptions

ConfigOptions パラメーターは、関連する検出メソッドでのみ使用できます。

例

SCREENSHOT

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  whiteScreen: {
    detectionRules: [{
      target: '#root',
      test_when: ['LOAD', 'ERROR', 'ROUTE_CHANGE', 'LEAVE'],
      delay: 5000,
      tester: 'SCREENSHOT',
      configOptions: {
        colorRange: ['rgb(255, 255, 255)', 'rgb(0, 0, 0)'],
        threshold: 0.9,
        pixels: 10,
        horizontalOffset: 210,
        verticalOffset: 50,
      },
    }],
  },
});

SAMPLE

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  whiteScreen: {
    detectionRules: [{
      target: '#root',
      test_when: ['LOAD', 'ERROR', 'ROUTE_CHANGE', 'LEAVE'],
      delay: 5000,
      tester: 'SAMPLE',
      configOptions: {
        sampleMethod: 2,
        checkPoints: 10,
        threshold: 0.9,
        whiteBoxElements: ['.el-skeleton'],
      },
    }],
  },
});

CUSTOM

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  whiteScreen: {
    detectionRules: [{
      target: '#root',
      test_when: ['LOAD', 'ERROR', 'ROUTE_CHANGE', 'LEAVE'],
      delay: 5000,
      tester: async (element) => {
        // カスタム検出関数
        return {
          hasContent: false,
          message: 'Custom error message',
          snapshot: {
            // カスタムキーと値のペア
            checkPoints: 100,
            rate: 0.99,
            checkdata: '......',
          },
        };
      },
    }],
  },
});

properties パラメーター

RUM が提供するプロパティは、すべてのイベントに対して構成できます。

evaluateApi、sendCustom、sendException、および sendResource を使用して、イベントにプロパティを追加できます。プロパティはイベントに対してのみ有効です。

グローバルプロパティとイベントプロパティは、格納時にマージされます。イベントプロパティはグローバルプロパティよりも優先度が高くなります。マージ時に同じキーが使用された場合、イベントプロパティがグローバルプロパティを上書きします。マージ後のキーと値のペアの数は 20 を超えることはできません。20 を超える場合、ペアはキーに基づいてソートされ、超過分は削除されます。

例

グローバルに構成されたプロパティは、すべてのレポートされたイベントにアタッチされます。

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  properties: {
    prop_string: 'xx',
    prop_number: 2,
    // キーまたは値の長さが制限を超えた場合、超過部分は削除されます。
    more_than_50_key_limit_012345678901234567890123456789: 'yy',
    more_than_2000_value_limit: new Array(2003).join('1'),
    // 以下の無効なキーと値のペアは削除されます。
    prop_null: null,
    prop_undefined: undefined,
    prop_bool: true,
  },
});

動的構成

RUM は、SDK の収集およびレポート構成の動的配信をサポートしています。これらの動的構成は、アプリケーションの初期ロード中に SDK によってロードされ、SDK の初期化時に設定された静的構成をオーバーライドします。実装は、コンソールと SDK の 2 つの部分で構成されます。

window.__rum = {
  pid: "your app id",
  endpoint: "your endpoint",
  remoteConfig: {
    // Web アプリケーションがホストされているリージョンを設定します。例: シンガポールは ap-southeast-1 です。
    region: "cn-hangzhou"
  }
};
// CDN 経由で SDK をロードします
<script async src="https://xxid-sdk.rum.aliyuncs.com/v2/browser-sdk.js"></script>

import ArmsRum from '@arms/rum-browser';

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  remoteConfig: {
    // Web アプリケーションがホストされているリージョンを設定します。例: シンガポールは ap-southeast-1 です。
    region: "cn-hangzhou"
  }
});

その他のパラメーター

RUM SDK を使用すると、IP アドレスと UserAgent に基づいて解決される共通のプロパティを構成できます。事前に構成されたフィールドは、自動的に解決されるフィールドよりも優先度が高くなります。

上記のフィールドに関する設定項目の詳細については、「ログデータ」トピックの「共通プロパティ」セクションをご参照ください。

例

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  geo: {
    country: 'your custom country info',
    city: 'your custom city info',
  },
});

SDK API

RUM SDK は、カスタムデータの変更とレポート、および SDK 構成の動的な変更のための API を提供します。

getConfig

この関数を使用して SDK 構成を取得できます。

setConfig

この関数を使用して SDK 構成を変更できます。

// 環境タイプを設定します。
ArmsRum.setConfig('env', 'pre');

// 以下のコンテンツは上書きされる可能性があります。
const config = ArmsRum.getConfig();
ArmsRum.setConfig({
  ...config,
  version: '1.0.0',
  env: 'pre',
});

sendCustom

カスタムイベントをレポートするには、type フィールドと name フィールドを指定する必要があります。次の表に、データレポートに関連するパラメーターを示します。ビジネスセマンティクスを定義する必要があります。

ArmsRum.sendCustom({
  // 必須。
  type: 'CustomEvnetType1',
  name: 'customEventName2',
  // オプション。
  group: 'customEventGroup3',
  value: 111.11,
  properties: {
    prop_msg: 'custom msg',
    prop_num: 1,
  },
});

sendException

カスタム例外データをレポートするには、name フィールドと message フィールドを指定する必要があります。

ArmsRUM.sendException({
  // 必須。
  name: 'customErrorName',
  message: 'custom error message',
  // オプション。
  file: 'custom exception filename',
  stack: 'custom exception error.stack',
  line: 1,
  column: 2,
  properties: {
    prop_msg: 'custom msg',
    prop_num: 1,
  },
});

sendResource

カスタムリソースデータをレポートするには、name、type、および duration フィールドを指定する必要があります。

ArmsRum.sendResource({
  // 必須。
  name: 'getListByPage',
  message: 'success',
  duration: 800,
  // オプション。
  url: 'https://www.aliyun.com/data/getListByPage',
  properties: {
    prop_msg: 'custom msg',
    prop_num: 1,
  },
});