[ARMS用户体验监控]接入小程序

ARMS用户体验监控（Real User Monitoring，RUM）专注于对Web场景、App移动应用场景和小程序场景的监控，以用户体验为切入点，完整再现用户操作过程，从页面打开速度（测速）、请求服务调用（API）和故障分析（JS错误、网络错误等）稳定性（JS错误、崩溃、ANR 等）方面监测前端应用性能表现情况，并支持日志数据查询，帮助您快速跟踪定位故障原因，提升用户体验。

ARMS用户体验监控支持监控支付宝、微信、钉钉、QQ、抖音、百度、京东等常见小程序，并支持Taro、Uniapp等跨端框架编译目标为小程序，通过集成npm包的方式，采集应用站点运行过程中的性能指标，追踪异常问题，帮助您提升自身应用站点的用户体验。

操作步骤

1. 登录ARMS控制台。

2. 在左侧导航栏选择用户体验监控 > 应用列表，并在顶部菜单栏选择目标地域。

3. 在应用列表页面单击添加应用。

4. 在创建应用面板单击小程序。

5. 在小程序面板输入应用名称和描述，然后单击创建。

   说明

   应用名称唯一，不能与已创建的应用名称重复。

   创建成功后，当前应用将会自动生成对应的pid和endpoint地址。

6. 获取探针SDK安装方式。

   小程序探针目前仅支持通过npm包接入。

   1. 引入npm包。

      npm install @arms/rum-miniapp

   2. 初始化。

      说明

      请将以下代码中的pid和endpoint替换为控制台获取的当前应用对应的pid和endpoint地址。

      import ArmsRum from '@arms/rum-miniapp';
      ArmsRum.init({
        pid: "your app id",
        endpoint: "your endpint"
      });

7. 设置安全域名。

   将当前应用对应的endpoint地址添加到服务器域名白名单中。

   Endpoint地址示例：https://aokcd*****-default-cn.rum.aliyuncs.com

SDK配置

User配置

示例

说明

如果需要关联业务自有账号体系，建议使用user.name或者user.tags ，而不是修改user.id。强制覆盖SDK生成的user.id ，会对影响UV的计算。

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

reportConfig配置

示例

说明

使用业务自有账号体系强制覆盖SDK生成的user.id，会对影响UV的计算。

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpint",
  reportConfig: {
    flushTime: 0, // 立即上报
    maxEventCount: 50 // 一次最多上报数量
  }
});

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（request或httpRequest）事件的自定义解析。以下为SDK传入的三个参数：

该函数支持异步函数，返回Promise<IApiBaseAttr>，IApiBaseAttr的定义如下：

示例

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpint",
  evaluateApi: async (options, response, error) => {
    const respText = JSON.stringify(response);

    // 返回的字段会覆盖默认内容，不返回的字段会依然使用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: '' // 响应头
      })
    }
  }
});

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

sendException

上报自定义异常数据，必须包含name和message两个属性，否则无法上报。

ArmsRUM.sendException({
  // 必选
  name: 'customErrorName',
  message: 'custom error message',
  // 可选
  file: 'custom exception filename',
  stack: 'custom exception error.stack',
  line: 1,
  column: 2
});

sendResource

上报自定义资源，必须包含name、type和duration三个属性，否则无法上报。

ArmsRum.sendResource({
  // 必选
  name: 'getListByPage',
  message: 'success',
  duration: 800,
  // 可选
  url: 'https://www.aliyun.com/data/getListByPage',
});