Application Real-Time Monitoring Service：SDK配置參考

SDK 配置

使用CDN載入情況下，訪問 SDK 監控執行個體，請使用全域命名空間 RumSDK.default。

const ArmsRum = window.RumSDK.default;
// 訪問 RumSDK 需確保SDK已經完成載入
// 如果SDK載入前沒有定義 __rum 配置，可在此初始化
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// 以下繼續使用，NPM 和 CDN 一致
ArmsRum.setConfig('env', 'pre');

user 配置

樣本

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 endpint",
  reportConfig: {
    flushTime: 0, // 立即上報
    maxEventCount: 50, // 一次最多上報數量
  },
});

sessionConfig 配置

Storage儲存了user.id和session資訊 ：

• _arms_uid：唯一標識使用者ID，對應user.id。

• _arms_session：具備語義化的Session資訊。

  • sessionId：Session唯一標識。

  • sampled：是否命中採樣。

  • startTime：Session的開始時間戳。

  • lastTime：Session最後一次活躍時間戳記。

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

樣本

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpint",
  sessionConfig: {
    sampleRate: 0.5, // 採樣率50%
    maxDuration: 86400000,
    overtime: 3600000,
    storage: 'cookie',
  },
});

collectors 配置

Collector是RUM SDK用於收集頁面監控資料的最小單元。目前RUM SDK內建了API、static Resource等豐富的採集器。

樣本

關閉監聽使用者Click行為。

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

evaluateApi 配置

evaluateApi提供對API（XMLHttpRequest/fetch）事件的自訂解析。以下為SDK傳入的三個參數：

該函數支援非同步函數，返回Promise<IApiBaseAttr>，IApiBaseAttr的定義如下：

樣本

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpint",
  evaluateApi: async (options, response, error) => {
    let respText = '';
    // 當前為使用fetch請求的情況
    if (response && response.text) {
      respText = await response.text();
    }
    // 返回的欄位會覆蓋預設內容，不返回的欄位會依然使用SDK自定產生內容
    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 用於過濾無需上報的事件，目前支援 resource 和 exception 兩種事件。

MatchOption

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

• string：匹配任何以該值開頭的URL，如https://api.aliyun.com可以匹配https://api.aliyun.com/v1/resource。

• RegExp：使用提供的RegExp和URL執行test。

• function：以URL作為參數進行計算，返回true表示匹配。

當傳入為 MatchOption[] 時，條件順序執行，有一項滿足就會被過濾。

樣本

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  filters: {
    // 過濾異常
    exception: [
      'Test error', // 以'Test error'開頭的error.message
      /^Script error\.?$/, // Regex匹配 error.message
      (msg) => {
        return msg.includes('example-error');
      },
    ],
    // 過濾資源或API
    resource: [
      'https://example.com/', // 以'https://example.com/'開頭的resource
      /localhost/i,
      (url) => {
        return url.includes('example-resource');
      },
    ],
  },
});

whiteScreen 配置

白屏監控僅支援瀏覽器端（Chrome 40+，IE 9+）。

DetectionRule

CustomTestResult的型別宣告：

type CustomTesterResult = {
  /**
   * 是否存在內容，如果為`true`則表示有內容，`false`表示發生白屏。
   */
  hasContent: boolean;

  /**
   * 錯誤資訊
   */
  message?: string;

  /**
   * 異常的快照資料
   */
  snapshot?: Record<string, any>;
}

ConfigOptions

參數僅在關聯方法中生效。

樣本

SCREENSHOT 截圖檢測法

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpint",
  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 endpint",
  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 endpint",
  whiteScreen: {
    detectionRules: [{
      target: '#root',
      test_when: ['LOAD', 'ERROR', 'ROUTE_CHANGE', 'LEAVE'],
      delay: 5000,
      tester: async (element) => {
        // 自訂檢測函數主題
        return {
          hasContent: false,
          message: '自訂的錯誤資訊',
          snapshot: {
            // 索引值對可自訂
            checkPoints: 100,
            rate: 0.99,
            checkdata: '......',
          },
        };
      },
    }],
  },
});

properties 配置

Properties是RUM提供的自訂屬性，可為任何上報事件配置該屬性。

使用evaluateApi、sendCustom、sendException、sendResource等可以單獨為某個事件增加properties，僅對單個事件生效。

全域properties和事件properties在儲存時會進行合并。事件properties優先順序高於全域properties，合并時相同的key，事件properties會覆蓋全域properties。合并後properties索引值對數量不可超過20對，超出會基於key進行排序後移除。

樣本

全域配置properties時，所有上報的事件都會擁有。

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  properties: {
    prop_string: 'xx',
    prop_number: 2,
    // key 和 value 超出範圍會被截斷
    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支援配置基於IP和UserAgent等解析所得到的公用屬性，主動配置欄位優先順序高於自動解析。

以上欄位具體可配置項請參考日誌資料說明中公用屬性部分。

樣本

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

SDK API

RUM SDK開放API，用於修改上報自訂資料，動態修改SDK配置等。

getConfig

擷取SDK配置。

setConfig

修改SDK配置。

// 指定 key 設定
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,
  },
});