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", // アプリケーションID
  endpoint: "your endpoint", // エンドポイント
});
// NPM パッケージまたは CDN ロードによる初期化は同じです。
ArmsRum.setConfig('env', 'pre');

ユーザーパラメーター

例

ArmsRum.init({
  pid: "your app id", // アプリケーションID
  endpoint: "your endpoint", // エンドポイント
  user: {
    name: 'your user.name', // ユーザー名
    tags: 'your user.tags', // ユーザータグ
  },
});

reportConfig パラメーター

例

ArmsRum.init({
  pid: "your app id", // アプリケーション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", // アプリケーションID
  endpoint: "your endpoint", // エンドポイント
  sessionConfig: {
    sampleRate: 0.5, // サンプリングレートは 50% です。
    maxDuration: 86400000,
    overtime: 3600000,
    storage: 'cookie',
  },
});

collectors パラメーター

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

例

以下の例では、ユーザーインタラクションデータの収集が無効化されています。

ArmsRum.init({
  pid: "your app id", // アプリケーションID
  endpoint: "your endpoint", // エンドポイント
  collectors: {
    action: false, // 操作
  },
});

EvaluateApi パラメーター

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

この関数は非同期で呼び出すことができます。Promise が返されます。以下の表は 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 パラメーター

フィルターパラメータは、報告する必要のないリソースまたは例外イベントを除外します。

MatchOption

type MatchOption = string | RegExp | ((value: string) => boolean); // MatchOption 型は、文字列、正規表現、または文字列を受け取ってブール値を返す関数のいずれかです。

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

• 正規表現: 正規表現と 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", // アプリ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", // アプリ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", // アプリ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 を超える場合は、キーに基づいてペアがソートされ、超過分は削除されます。

MySQL のインストール

前提条件

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"
  }
});

WhiteScreen パラメーター

whiteScreen パラメーターは、白い画面の監視を構成するために使用されます。このパラメーターは、次のプロパティを持つオブジェクトです。

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

例

ArmsRum.init({
  pid: "your app id", // アプリケーションID
  endpoint: "your endpoint", // エンドポイント
  geo: {
    country: 'your custom country info', // カスタムの国情報
    city: 'your custom city info', // カスタムの都市情報
  },
});

手順

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

getConfig

az webapp create コマンドを使用して、リソース グループに Web アプリを作成します。次の例では、<app-name> をグローバルに一意のアプリ名 (有効な文字は a-z、0-9、および -) に置き換えます。ランタイムは PHP|7.4 に設定されています。WordPress は、PHP の新しいバージョンにもデプロイできます。

setConfig

この関数は、SDK の構成を変更するために使用できます。

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

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

sendCustom

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

ArmsRum.sendCustom({
  // Required.
  type: 'CustomEvnetType1',
  name: 'customEventName2',
  // Optional.
  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

問題が発生した場合は、トラブルシューティング ガイドを参照してください。

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