每个端侧产品都需要的用户体验监控

作者：穹谷

在某公司内，端同学手忙脚乱忙碌着：

老板： “小端，怎么回事，我刚试用产品就报错，这么不禁点吗，赶紧查查！”。

产品： “老端，你有没有感觉我们页面打开变慢了，什么原因，赶快看看！”。

运维： “端兄，光缆可能又被挖断了，部分区域服务不可用，赶紧协助统计下影响多少用户”。

运营： “端端，前几天推的活动用户数据能再帮我整理一下吗，汇报急用”。

客服： “端哥，有位用户反馈产品使用白屏了，麻烦赶紧看看什么原因，我先稳住用户”。

后端 A、B、C...： “端！”，“端！”，...，这功能啥时候联调下啊，就等你那边功能了”。

端同学： “......”。

行政走过来，“哎呀，空调这么凉快，你咋还流这么多汗啊”。

测试同事站起来看了端同学一眼，心想还是别喊他了，然后坐下来默默地提交了一个 bug。

每个前端同学都可能面临以上各种问题，该怎么解呢？正在端同学一筹莫展之际，保洁阿姨放下手中沾有汗水的拖把，有条不紊地拿起键盘打开阿里云 ARMS RUM 产品官网，说道：“小伙子，可以接入 ARMS RUM 产品啊，快速解决以上问题，让老板和同事满意，也让自己安心，我听说很多公司都在用。”

产品介绍

ARMS RUM 是阿里云应用实时监控服务（ARMS）下的用户体验监控（RUM）产品，覆盖 Web/H5、各类平台小程序、Android、iOS、Flutter、ReactNative、Windows、macOS 等平台框架。接入 SDK 后会主动采集端侧页面性能、资源加载、API 调用、异常崩溃、卡顿、用户操作、系统信息等数据，还支持事件、日志、异常等数据按需自定义上报以满足业务数据分析需求，提供全面的性能分析、异常分析、产品分析、会话分析能力，帮助快速跟踪定位问题原因，提升产品用户使用体验。ARMS RUM 具备以下核心功能。

前后端全链路打通能力，展示每跳详情，便捷剖析错慢调用

全端支持 OpenTelemetry、Zipkin、Jaeger、Skywalking 等 Trace 协议，做到从前端到网关，再到后端各服务全链路追踪，清晰展示各阶段调用耗时和调用详细数据，当调用链某个服务出现问题时，会被标识出错误链路和 Span，异常 Span 会关联异常堆栈，便于性能分析和异常诊断。

前后端全链路打通具备以下核心功能特点：

• 支持错慢请求便捷筛选

• 支持用户或会话 ID 便捷筛选

• 支持链路拓扑视图展示

• 支持各 Span 属性、指标、耗时详细数据展示

• 支持请求参数和响应数据展示

• 支持异常信息堆栈展示

• 支持 Trace 采样配置

• 支持同类 Trace 筛选，做智能化分析

记录会话轨迹，回溯用户操作，层层下钻定位根因

会话可以被视为用户与应用程序或网站交互的一连串活动，按时间序列展示用户操作和相关事件、资源请求等，可通过用户标识、用户 IP 等查询特定会话，回溯用户行为轨迹，通过上下文和错慢诊断排查问题，快速定位问题根因。

会话追踪具备以下核心功能特点：

• 支持用户信息展示，如设备、区域、浏览器等信息

• 支持会话信息展示，如会话时长、资源异常数、资源请求数、API 请求数、API 异常数、用户事件等信息

• 支持事件名模糊筛选和各类事件便捷筛选

• 支持错误和缓慢标记和筛选

• 支持时间序列的会话轨迹展示

• 支持事件类型和事件信息展示

• 支持事件点击下钻，做具体事件分析

全面采集异常信息，堆栈解析定位代码问题，便捷评估异常影响面

支持 JavaScript 错误、ANR、崩溃、白屏和自定义等异常类型数据采集，覆盖 Web/H5、Android、iOS 等各客户端，异常信息采集全面，提供异常统计视图，便捷筛选异常信息和异常趋势分析，具备异常明细解析来定位问题代码位置，通过影响页面数、影响用户数、影响页面访问次数便捷评估影响面。

异常分析具备以下核心功能特点：

• 支持异常名称、异常信息、异常文件、异常次数等数据统计

• 支持影响页面数、影响页面访问数、影响用户数、影响会话数等数据统计

• 支持异常名称、异常信息、用户信息等便捷筛选

• 支持异常趋势分析，提供地域、浏览器、设备型号、运营商等分布统计

• 支持异常用户明细展示，提供异常用户列表和异常占比，可追踪用户异常访问明细，追溯会话轨迹

• 支持异常页面明细展示，提供异常页面列表和异常占比，可追踪页面异常访问明细，追溯会话轨迹

• 支持符号表控制台上传，也可与 CI/CD 系统集成编译后自动上传

• 支持白屏监控，具备白屏率、影响用户数、影响会话数等统计，支持白屏截图采集，协助发现白屏问题

• 支持各类型异常告警配置

多维度多指标页面性能统计，提供单次访问各阶段耗时分布，快速定位错慢资源

支持页面性能数据采集，具备 WebVitals 核心指标和页面加载关键指标数据趋势。移动端除了支持 WebView 数据采集外，还支持原生 Controller、Fragment、Activity 控件性能采集。全面监测页面性能，剖析性能瓶颈根因。

页面访问具备的核心功能如下：

• 支持页面数据便捷筛选，如加载耗时、页面名称等条件

• 支持页面访问量、停留时间、访问次数、访问用户数、加载耗时、LCP、FID、CLS 等数据列表

• 支持页面访问量、WebVitals 核心指标、页面加载耗时趋势分布

• 支持地域、浏览器、联网方式、设备、操作系统、运营商等页面访问趋势分布

• 支持页面加载耗时瀑布图，包含 DNS、TCP、SSL、内容传输、DOM 解析耗时

• 支持按用户维度统计页面访问量、访问占比、首次访问时间、加载耗时等

• 支持页面访问明细基础信息，如调用页面、状态码、加载状态、资源大小、地域、设备、联网方式、运营商、操作系统、环境类型等

• 支持页面加载重定向耗时、DNS 耗时、TCP 耗时、SSL 耗时、请求响应耗时、内容传输耗时、资源加载总耗时等

• 支持页面资源加载列表展示，支持错慢资源便捷筛选

• 支持原生控件线程加载时序明细和加载时序图

资源加载和 API 调用全量采集，便捷筛选错慢、高频资源请求，多维分析资源请求性能

覆盖 image、font、css、js、fetch、xhr 等类型的资源请求调用，提供多条件便捷筛选和排序。API 调用支持包含调用链筛选，快速筛选具备 trace 的 api 请求。可对于单个资源或 API 做更加精细化的统计分析，剖析资源加载和 API 调用性能瓶颈点。

资源加载和 API 请求具备以下核心功能：

• 支持趋势分布，包含加载次数（资源类型/请求方法）、加载过程耗时（Connect、DNS、TCP、Download、Duration）、错误趋势（错误数、错误率）等数据

• 支持资源列表，包含加载次数、缓慢次数、失败次数、平均加载耗时、调用页面数等数据

• 支持地域、浏览器、联网方式、设备、操作系统、运营商等维度分布统计

• 支持按页面类型、资源加载次数、平均加载耗时、缓慢次数、错误次数、缓慢占比、错误占比等调用页面统计

• 支持资源加载明细，覆盖基础信息、指标统计、加载耗时分布

• 支持调用页面、状态码、加载状态、资源大小、地域、设备、联网方式、运营商、操作系统、环境类型等

• 支持调用指标统计，包含重定向耗时、DNS 耗时、TCP 耗时、SSL 耗时、请求响应耗时、内容传输耗时、资源加载总耗时等和资源加载耗时瀑布图

自定义数据上报，满足业务数据采集，增强产品分析能力

自定义数据包含自定义事件、自定义日志、自定义异常以及自定义属性，分别用于业务关键事件、业务数据日志、业务状态异常和业务数据打标等数据上报，增强漏斗分析、留存分析、标记追踪等数据分析能力，了解用户对产品的使用，以便提升产品用户体验。

自定义数据上报支持的核心数据如下：

• 自定义事件：事件名称、事件类型、事件分组、自定义属性、事件度量值，上下文快照

• 自定义日志：日志名称、日志级别、日志内容、自定义属性、上下文快照

• 自定义异常：异常名称、异常原因、异常堆栈、自定义属性、上下文快照

• 自定义属性：自定义的 Key : Value 的 JSON 数据，是附加在事件等数据上的数据点或信息，用以描述事件等信息的详细情况。可以基于属性生成指标。

后续 RUM 产品功能上会基于自定义数据增强控制台功能，包含体验分析、用户分析、旅途分析、漏斗分析、留存分析、热点分析、标记追踪等产品能力。

站点总览大盘，实时掌握访问趋势、性能指标、异常趋势、地域分布等站点信息

提供全局和单站点数据大盘，支持按时间统计大盘各项数据，共计提供近 30 个数据图表，实时监控站点数据，便捷了解站点访问情况。例如可通过异常数、异常趋势、异常 API、异常 CDN、异常页面、异常资源等了解总体异常情况。

站点总览大盘具备以下指标数据：

• Session 数、PV、UV、资源数、API 请求数、异常数、人均会话时长统计数据

• 最大内容渲染耗时（LCP）、首次输入延迟耗时（FIP）、累积布局配置偏移（CLS）Web 性能数据

• Session/PV/UV 访问趋势、API 请求数和失败数访问趋势、资源请求数据和失败数访问趋势

• 错误数趋势、错误率趋势

• 资源类型请求数占比

• 按运营商、应用版本、设备型号用户数分布占比

• 页面访问量 Top 页面信息、会话访问数 Top 用户、资源错误数 Top 资源信息

支持各项指标告警配置，提供基于动态阈值异常检测告警

覆盖异常监控、页面监控、资源监控、卡顿监控各项指标，支持基于设置阈值对指标数据进行异常检测和基于动态阈值对指标数据进行异常检测。基于区间检测的动态阈值配置可以展示出这段时间具体的值班，通过调整容忍度来快速配置告警规则。在告警规则中支持多条件筛选和多条件指标告警配置，具备告警等级配置。

提供数据探索，可进行数据多维统计，实现站点性能、用户行为灵活分析

RUM 的数据分为会话、页面、资源加载（包含 API 调用）、异常、卡顿、用户行为、自定义类别，在数据探索中，可通过选择数据类别做多维度、多指标、多逻辑、多图表聚合统计和下钻分析。

比如统计 P95 的资源加载指标耗时，按省份维度进行分组统计，通过折线图表展示，这样就可以聚合出各省份资源加载 P95 耗时。比如北京市的资源加载耗时 P95 是 935ms 。

数据全开放，明细数据存储到 SLS，指标存储到 Prometheus，按需灵活使用

RUM 各个客户端 SDK 采集到的明细数据都存储在用户 SLS 下特定 Project logstore-rum 中，指标数据存储在用户 Prometheus 特定实例中，数据的存储费用不会计费，全部包含在 RUM 计费中（详见下方计费说明）。用户可基于 SLS 图表和告警做灵活的数据使用，或基于 SLS SQL、SPL 做更复杂的数据统计。

场景实战

场景一：定位某用户产品使用报错问题

第一步：通过“会话追踪”功能，按“user.name”指定用户信息，做会话筛选。

第二步：根据时间，点击对应会话 ID，查看“会话轨迹”，找到相关上下文，查看错慢信息。

第三步：点击异常事件，查看异常详情，可上传符号表，对堆栈进行解析。

场景二：定位 App 页面打开缓慢问题

第一步：通过页面访问查看缓慢访问和缓慢访问占比页面（超过 2 秒为缓慢）。

第二步：点击缓慢页面可查看 P75、P90、P95 加载耗时，以及秒开分布次数，了解此页面用户加载整体情况。

第三步：通过页面明细加载时序图和加载明细，结合基础信息和线程信息分析缓慢原因。

场景三：快速统计因故障造成用户影响面

第一步：在异常统计或者 API 请求页面，通过已知的异常名称或者已知的 API 调用和异常状态码筛选出对应的数据。

第二步：点击 API 请求，即可查看到错慢影响的用户数。

场景四：统计活动点击次数

第一步：首先需要确定活动事件点击名称，可在会话轨迹中查看，比如这里“提交订单”对应的事件是“Place Order”。

第二步：进入数据探索，通过应用 ID 和事件名称筛选事件。

第三步：在聚合指标选择“事件次数”，选择“求和”，按“事件名称”维度聚合，选择柱状图，则就统计出下单数据。

场景五：快速定位白屏，还原用户操作路径

第一步：进入“异常统计”，选择“白屏问题”异常类型，可通过页面名称筛选目标页面。

第二步：点击对应的页面，查看白屏明细，能看到对应的白屏发生时的情况。

第三步：点击上方“会话 ID”，跳转到会话轨迹，可以通过会话轨迹看出 js 的异常导致白屏发生。

计费说明

ARMS RUM 按照会话（Session）数 、自定义上报次数进行计费， 一个 OCU 对应一定数量的会话数和自定义上报次数，相对于按 PV 等计费模式费用大大降低，计费详细说明详见：https://help.aliyun.com/zh/arms/user-experience-monitoring/product-overview/billing-description

可以在控制台“用量统计”中查看 OCU 用量：

快速接入

Web/H5 支持 CDN、NPM 快速接入，移动端支持 CocoaPods 或 Maven 快速接入，各端接入详见如下文档：

• RUM Web/H5 快速接入：https://help.aliyun.com/zh/arms/user-experience-monitoring/access-web-h5-applications

• RUM 小程序快速接入：https://help.aliyun.com/zh/arms/user-experience-monitoring/access-applet

• RUM 移动端快速接入：https://help.aliyun.com/zh/arms/user-experience-monitoring/access-mobile-applications

• RUM PC 端快速接入：https://help.aliyun.com/zh/arms/user-experience-monitoring/access-pc-platform-application

问题反馈

如果您在使用中有任何问题或建议，可以提交阿里云工单或者联系用户体验监控答疑钉钉群（群号：67370002064）获取帮助。

端同学后记：

自从接入 ARMS RUM 产品之后，端同学可以更加专注地编码了。但每天的研发任务也让端同学加班加点，夜已渐深，端同学敲击键盘的手也逐渐放缓，愁眉苦脸地盯着显示屏，殊不知他正在面对的是大部分程序员都经历过的困难，在冗长的老代码上增加新功能。

正当端同学自言自语，背后的保洁大姐也刚倒完堆积如山的垃圾桶，语重深长的说：“小伙子，我看你挺听劝的，挺好，阿姨再帮你一次，用通义灵码，代码解释、单测生成样样精通！”