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\.?$/, // 正則表達式匹配 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,
  },
});