云监控：Web & H5 集成和使用SessionReplay和热力图

示例 1：简单启用（默认配置）

armsRum.init({
  endpoint: "your endpoint",
  replay: true
});

示例 2：设置采样率

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    sampling: 20, // 20% 的会话会被录制，降低存储成本
  }
});

示例 3：隐私保护 - 遮蔽所有文本

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    privacy: {
      level: 'mask'  // 遮蔽所有文本内容和输入框
    }
  }
});

示例 4：隐私保护 - 仅遮蔽用户输入

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    privacy: {
      level: 'user-input'  // 仅遮蔽用户输入的内容（密码、输入框等）
    }
  }
});

示例 5：隐私保护 - 白名单模式

armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    privacy: {
      level: 'allowlisted',
      allowlisted: ['.main-content', '#app', '.product-card']  // 仅录制这些元素
    }
  }
});

示例 1：启用热力图（推荐配置）

armsRum.init({
  endpoint: "your endpoint",
  collectors: {
    action: {
      enable: true,
      trackUserInteractions: true,  // 启用热力图分析
      sampling: 100,  // 100% 采样率
    }
  }
});

示例 2：仅采集基础点击事件（不启用热力图）

armsRum.init({
  endpoint: "your endpoint",
  collectors: {
    action: {
      enable: true,
      trackUserInteractions: false,  // 不启用热力图
      sampling: 100,
    }
  }
});

position（位置信息）

{
  x: 123,        // 点击 X 坐标（相对于文档）
  y: 456,        // 点击 Y 坐标（相对于文档）
  ex: 50,        // 元素内相对 X 坐标
  ey: 30         // 元素内相对 Y 坐标
}

target（目标元素信息）

{
  selector: "#root > div > button:nth-child(15)",  // 元素选择器
  width: 120,      // 元素宽度（像素）
  height: 40,     // 元素高度（像素）
  reaction: 1,     // 是否为可交互元素（0=不可交互, 1=可交互）
  trust: 1         // 是否可信的交互（0=不可信, 1=可信）
}

viewport（视口信息）

{
  width: 1920,    // 视口宽度（像素）
  height: 1080    // 视口高度（像素）
}

1. 错误复现和调试

场景：用户报告了一个错误，但无法准确描述操作步骤。

解决方案：

• 启用 SessionReplay，设置合理的采样率（如 20%）

• 当错误发生时，通过 Session ID 关联找到对应的会话回放

• 回放用户操作，快速定位问题原因

2. 用户体验优化

场景：分析用户在关键流程中的操作路径，优化转化率。

解决方案：

• 针对关键页面（如购买流程）提高采样率

• 回放用户会话，观察用户操作习惯

• 发现操作障碍点，优化页面布局和交互

3. 支持客服场景

场景：客服需要了解用户遇到的具体问题。

解决方案：

• 通过用户 ID 或 Session ID 查找对应的会话回放

• 回放用户操作，快速理解问题上下文

• 提供更精准的解决方案

1. 页面布局优化

场景：了解用户最常点击的区域，优化页面布局。

解决方案：

• 启用热力图数据采集

• 在监控平台查看点击热力图

• 根据热力图调整重要元素的位置

2. 无效点击分析

场景：发现用户点击但无响应的区域（无效点击）。

解决方案：

• 通过 target.reaction 字段识别不可交互元素的点击

• 分析无效点击的分布和频率

• 优化页面，减少无效点击

3. 移动端适配优化

场景：移动端用户误触率高，需要优化点击区域。

解决方案：

• 通过热力图查看移动端的点击分布

• 识别误触热点区域

• 调整元素大小和位置，减少误触

1. 采样率设置

• 生产环境：建议设置 10-20% 的采样率，平衡成本和覆盖率

• 测试环境：可以设置 100% 采样率，便于问题排查

• 关键页面：对转化率关键页面提高采样率

const isProduction = process.env.NODE_ENV === 'production';
armsRum.init({
  endpoint: "your endpoint",
  replay: {
    enable: true,
    sampling: isProduction ? 20 : 100,  // 生产环境 20%，测试环境 100%
  }
});

2. 隐私保护

• 敏感信息：对于包含敏感信息的页面，使用 'mask' 或 'user-input' 级别

• 公开页面：对于公开页面，可以使用 'allow' 级别，获得更完整的回放

• 合规要求：根据合规要求，合理设置隐私级别

3. 存储成本优化

• 合理设置采样率，按需配置采样率

• 对于非关键页面，可以降低采样率或禁用录制

• 定期清理过期的录制数据（默认30天）

4. 性能考虑

• SessionReplay 会对页面性能产生一定影响，建议在关键页面使用

• 监控录制数据的体积，避免影响上报性能

1. 采样率设置

• 分析阶段：建议使用 100% 采样率，获得完整数据

• 稳定运行：可以降低到 50-80%，减少数据量

• 高流量页面：可以适当降低采样率

armsRum.init({
  endpoint: "your endpoint",
  collectors: {
    action: {
      enable: true,
      trackUserInteractions: true,
      sampling: 80,  // 80% 采样率
    }
  }
});

2. 结合业务分析

• 结合页面路径、用户属性等维度分析热力图

• 关注关键转化路径的点击热力图

• 定期分析热力图变化，优化页面布局

3. 移动端优化

• 移动端误触率高，重点关注无效点击

• 通过 target.trust 字段识别可信点击

• 优化移动端元素的点击区域大小

开启 SessionReplay 对页面性能有影响吗？

SessionReplay 会对页面性能产生一定影响，主要体现在：

• 内存占用：录制数据会占用一定内存

• CPU 使用：DOM 变化监听会消耗 CPU 资源

• 网络传输：录制数据需要上传，可能影响网络性能

建议：

• 合理设置采样率，避免全量录制

• 在非关键页面可以禁用录制

• 监控页面性能指标，确保影响在可接受范围内

如何控制录制数据的体积？

可以通过以下方式控制录制数据体积：

1. 降低采样率：减少录制的会话数量

2. 设置隐私级别：使用 'mask' 或 'user-input' 级别，减少录制内容

3. 限制录制时长：单个会话最多录制 1 小时

4. 过滤不需要的元素：使用 allowlisted 模式，只录制关键区域

Q3: 是否支持Canvas 和 IFrame的录制？

A: 基于合规和录制性能方面的考量，暂不支持Canvas和IFrame的录制，会留白处理。

Q4: 采样率是如何工作的？

A: 采样率在 Session 初始化时确定，整个会话期间保持不变。例如：

• 如果Session的采样率配置为20%，Replay配置为20%，SessionReplay的整体采样率是 20% × 20% = 4%

• 如果采样率设置为 20%，则 20% 的 Session 会被录制

• 采样决策基于 Session ID 的哈希值，确保同一 Session 的决策一致

• 一旦 Session 被选中录制，整个会话期间都会持续录制

Q1: 热力图数据什么时候上报？

A: 热力图数据会随其他 RUM 事件一起上报，上报时机包括：

• 达到 reportConfig.maxEventCount 时批量上报

• 达到 reportConfig.flushTime 时间间隔时上报

• 页面卸载前上报

Q2: 热力图数据包含哪些信息？

A: 当 trackUserInteractions: true 时，热力图数据包含：

• 位置信息：点击的 X/Y 坐标（文档坐标和元素内坐标）

• 元素信息：选择器、尺寸、是否为可交互元素

• 交互信息：是否可信的交互

• 视口信息：页面视口的宽度和高度

Q3: 如何判断点击是否有效？

A: 可以通过以下字段判断：

• target.reaction：1 表示可交互元素，0 表示不可交互元素

• target.trust：1 表示可信的交互，0 表示可能误触

无效点击通常表现为：reaction: 0 或 trust: 0