为什么是 RUM

RUM的英文全称是 Real User Monitoring，根据RUM英文名称我们可以知道，RUM的作用就是捕获和分析用户与网站的所有交互细节，旨在提高网站的可用性、提升用户体验。提升网站体验的方式非常多，可以优化数据库、优化接口调用，那为什么要 RUM 呢？其实主要还是 RUM 更直接，更直接的反应了用户是如何和你的网站交互的，更能反应用户和网站的交互细节、用户的满意度，提供更多真实的用户行为数据。

近几年涌现了许多非常优秀的 RUM 产品，列举部分如下：

Datadog Real User Monitoring

New Relic browser monitoring

Sentry

腾讯云 RUM

Dynatrace  Real User Monitoring

Arms 前端监控

SLS RUM 公测中

本文主要总结性的介绍各个产品浏览器端 RUM 的功能以及特点。

RUM 主要功能

RUM 产品已经市场上已经有很多，功能虽然在不断丰富，但是各个产品的功能也在逐渐同化。大部分产品包含功能如下：

1. 数据接入。支持以script的形式或者npm包的形式安装能够在浏览器运行的 agent，用于采集数据，支持自定义的功能配置。
2. 错误诊断。支持浏览器环境的问题诊断，包括支持诊断 JS 运行时错误、诊断 AJAX 请求错误、诊断资源访问错误等。
3. 访问行为统计及自定义统计。支持各种指标统计，例如网站的 PV/UV、浏览器和用户地域信息、不同页面的访问信息等。
4. 性能诊断。支持各种关键路径的性能数据上报，包括白屏时间、资源加载时间、请求时间等，支撑用户根据指标数据优化性能。
5. 会话追踪和Session Replay。展示会话的详细信息，Session Replay 能够以视频的形式回放用户真实的使用行为。
6. 链路追踪。与后端请求链路打通，支持前后端一体化分析闭环。

数据接入

JS 探针模式

在浏览器端一般是以js agent探针的形式，让用户插入一段 js script 或者引用 npm 包中的初始化函数。

我们以datadog为例，用户可以在界面填写相关的参数，修改后会生成相应的 js 代码。也支持用户切换不同的接入方式，支持 CDN Async、CDS Sync 和 NPM 包的形式。

数据接入和 JS 框架

大部分产品对于 JS 框架的支持都是使用统一的支持方式，没有区别对待。其中 Sentry 是对不同的前端 JS 框架做了区分的，甚至不同的框架有不同的npm包。Sentry 这么做的目的也是为了 适配框架层面提供的错误捕获的方式，例如对于React，Sentry 支持  React Error Boundary。

服务端安装模式

与一般的直接在HTML页面中插入 js script 不同，New Relic 支持在服务端层安装插件直接为所有页面自动加入探针，避免了需要手动为每个页面添加探针的复杂操作，支持 Java、Go 等多种服务端语言及相应框架。

错误诊断

错误诊断在浏览器中一般只是指 JS 运行时错误、 AJAX 请求错误、资源访问错误等。我们以 Sentry 的 JS 运行时错误为例。

window.onerror上报

在浏览器中运行时错误会触发window.onerror函数，Sentry对window.onerror函数进行了改写，使用TraceKit处理error对象。

var _oldOnerror = _window[_onerror];

_window[_onerror] = function(message, source, lineno, colno, exception) {

 // Use keys as "data type" to save some characters"

 queue({

   e: [].slice.call(arguments)

 });

 if (_oldOnerror) _oldOnerror.apply(_window, arguments);

};

window.unhandledrejection上报

未catch的Promise错误不会触发window.onerror函数，而是会触发window.onunhandledrejection，下面是Sentry改写了onunhandledrejection函数。

var _oldOnunhandledrejection = _window[_onunhandledrejection];

_window[_onunhandledrejection] = function(e) {

 queue({

   p: 'reason' in e ? e.reason : 'detail' in e && 'reason' in e.detail ? e.detail.reason : e

 });

 if (_oldOnunhandledrejection) _oldOnunhandledrejection.apply(_window, arguments);

};

对前端框架的错误上报支持

支持React的ErrorBoundary

class App extends React.Component {

 render() {

   return (

     <Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>

       <OtherComponents />

     </Sentry.ErrorBoundary>

   )

 }

}

支持Vue.config.errorHandler

import Vue from 'vue'

import * as Sentry from '@sentry/vue'

Sentry.init({

 Vue: Vue,

 dsn: '__PUBLIC_DSN__',

})

自定义上报错误

import * as Sentry from "@sentry/browser";

try {

 aFunctionThatMightFail();

} catch (err) {

 Sentry.captureException(err);

}

错误栈展示

错误管理

Sentry使用issue面板来管理错误，这是也是Sentry相比其他 RUM 产品的特色 （其他产品一般只会上报错误， 不支持对错误的生命周期管理）。在issue面板中可以管理整个issue的生命周期，也支持配置对接外部的管理平台（例如Jira），Sentry支持数十种外部系统的对接。

对issue管理基本的操作有查询、Resolve、Review、Merge、Ignore等，基本能够满足对issue的追踪解决。

访问行为统计

一般 RUM 产品都会带一些指标的统计 比如 PV/UV、浏览器和操作系统信息等。下面是  Datadog RUM 的首页大盘，主要体现了一些性能相关指标、页面切换次数、地理信息等。在页面顶端，用户能够根据多种条件筛选数据。

除了 RUM 系统自带的统计行为，RUM 还会支持自定义的数据统计。一种是支持对所有上报的数据打 Tag，一种是支持上报自定义的数据内容。

例如已经公测的 SLS RUM 支持初始化时定义 custom 字段，支持嵌套 JSON 格式的 value 并且支持自定义解析。配置方式如下：

SLS_RUM.init({

 // 其他配置

 

 custom: {

   d: 'e'，

 },

})

SLS RUM 也支持纯自定义上报，通过 SLS_RUM.addLog() 接口可以上报自定义事件，addLog 接受一个JSON格式的参数，支持嵌套JSON格式。上报的数据支持使用 SLS SQL 进行查询。SLS_RUM.addLog() 调用方式如下：

 SLS_RUM.addLog({

   a: 'b',

   c: 'd',

   d: 'e'

 })

性能诊断

关键指标分析

浏览器端性能诊断的指标主要包括：

• 页面加载阶段性能指标：LODA、FCP、LCP、FID、CLS 等
• 网络请求指标（包括 api、css、js、media等）：dns、tcp、ssl、redirect、ttfb、trans 等
• AJAX 接口请求延迟

所有 RUM 产品都会采集以上指标并提供用户相关的性能大盘。例如 SLS RUM 提供关键指标的分时曲线：

以及各种不同资源加载的分时曲线：

火焰图功能

分析性能问题具体定位到某一次页面加载的时，火焰图是非常有用的功能。下图是 SLS RUM 提供的火焰图功能，能够一目了然的看到前端大部分重要性能指标的时间。

其中 New Relic 的火焰图的最详细的，提供了部分 Chrome Performance 的功能，提供的数据也比较丰富。

会话追踪和 Session Replay

会话追踪是指以一定的结构组织展示用户的数据，不同的产品一般有两种处理方法，一种是以浏览器网页的一次加载过程作为一个会话，另一种是以一定时间内的数据都作为一次会话。

Session Replay 在会话的基础上，能够以视频的形式回放用户在某个会话的所做的所有操作。Session Replay 最重要的作用就是能够辅助上述所说的错误诊断、访问行为统计、性能诊断等。

下面以 datadog 的 Session Replay 为例：

针对会话回放用户页面数据的隐私选项，SDK提供3中方式的配置：mask-user-input、mask、allow，对比如下

链路追踪

随着现代前后端项目变得越来越复杂，排查问题的时候如果仅限于浏览器端或者后端是很难进行的。浏览器作为请求的发起方，如果能够和后端请求联合形成闭环对于排查问题是非常有帮助的。许多 RUM 产品已经都有了链路追踪的功能，下面以 SLS RUM 为例:

SLS RUM 支持提供基于原生 OpenTelemetry 协议的分布式链路追踪功能，与 SLS Trace 后端链路能够打通，一起提供前后端一体化链路追踪功能。

最后，SLS RUM 公测啦

SLS RUM 当前支持浏览器监控，未来还会支持小程序、移动端IOS&Android。支持上述的所有功能：

1. 错误诊断。
2. 访问行为统计及自定义统计。
3. 性能诊断。
4. 会话追踪和Session Replay。
5. 链路追踪。

另外还支持有强大的自定义告警、自定义仪表盘等，欢迎使用。

相关链接

SLS RUM 官方文档：https://help.aliyun.com/document_detail/416956.html