RUM是什么？它能解决什么问题？

关注

原创 2024-11-06 11:32:14 1.2k 阅读 AI 写同款· GEO 优化 ›

前端性能与可靠性工程：真实用户监控 (RUM) 与前端可观测性摘要本文系统地介绍了前端可观测性的"三位一体"架构(指标、日志、追踪)及其实现方法。第一部分阐述了RUM(真实用户监控)的核心指标收集、错误监控的上下文捕获以及分布式追踪的全链路分析。第二部分以Sentry为例，详细演示了如何集成SDK实现性能监控、错误捕捉和会话回放功能。第三部分讲解了如何利用监控数据定义有意义的SLO并设置智能告警。最后从SRE角度探讨了可观测性数据在业务决策中的应用价值，并预告了后续将探讨的前端韧性工程内容。全文为构建完整的前端监控体系提供了实践性指导。阅读详情

摘要：随着数字化转型的普及，数字化体验的要求越来越高，业务系统所有者越来越关注真实终端的用户体验质量。本文将通过简单的介绍，带你了解RUM技术是什么，如何监控并改善真实用户体验的质量，它的技术原理、数据采集方法，及其能够解决的主要问题。

两天三次道歉！滴滴公布APP崩溃，崩了12小时预估损失千万订单、4亿成交额

2023年11月27日晚间，滴滴APP全国大面积崩溃，服务长时间无法正常使用。故障时间长达近12小时，影响了晚高峰和早高峰时段，导致用户无法正常使用滴滴出行服务，出现了定位失败、无法打车、订单持续计费等问题。据媒体预测，滴滴在此次故障中可能损失了过千万的订单量和超过4亿的交易额，由于服务中断，许多用户转而使用其他出行平台，如高德、T3、美团等，这可能导致滴滴长期的用户流失。

在数字化时代，网站和应用程序已经成为企业的门面，它们的性能和用户体验直接影响着用户留存率、转化率以及品牌形象。而Real User Monitoring（RUM）作为一项强大的监控技术，正在为开发者和运营团队提供前所未有的洞察力，让他们能够实时了解用户的行为、需求和体验。本文将带您深入探索RUM的魔力，揭示它是如何为现代数字化业务带来巨大价值的。

RUM简介

RUM（Real User Monitoring），是一种监控技术，旨在实时监视和分析用户与网站或应用程序的交互情况。与传统的性能监控工具不同，RUM直接从真实用户的浏览器或设备中收集数据，以反映真实世界的使用情况。通过分析实际用户的行为和体验，开发人员和运维团队可以更好地了解他们的产品在不同环境下的表现，并做出相应的优化和改进。

传统的模拟拨测虽然可以模拟不同场景下的请求，但由于数据不真实，无法替代真实用户的监测和评估。

RUM的数据收集与分析

RUM的数据收集范围涵盖了几乎所有与用户交互相关的方面。它可以追踪用户的每一个点击、每一次滚动、每一次输入，甚至是页面的每一次渲染细节。这些数据不仅包括页面加载时间、资源加载时间，还包括用户设备信息、网络环境、错误和异常等。通过对这些数据进行深入分析，开发团队可以了解用户的行为模式，识别性能瓶颈，并及时采取措施解决问题。

下面是通过RUM采集iOS页面加载的数据：其中包含启动时间、页面名称、生命周期加载耗时、网络环境、设备信息、应用基础信息等。

```json
{
  "actions": [
    {
      "viewName": "UITableViewController", // 页面名称
      "actionType": 3, // 行为类型
      "startDate": 1715257499544, // 开始时间戳
      "seqID": 1, // 序列号
      "actionID": "C1D1C80C-FF07-4A3B-B6AF-F7F955DA08E5", // 行为ID
      "duration": 5917, // 持续时间
      "actionName": "App Start" // 行为名称
    },
    {
      "actionID": "A502FC3A-034A-4F63-ADE6-D57FB2881A2C",
      "actionType": 1,
      "seqID": 5,
      "startDate": 1715257504868,
      "viewName": "MyTabBarController",      
      "duration": 419,
      "actionName": "Loading MyTabBarController"
    },
    {
      "actionID": "07170F4D-521C-4F45-9045-499302A3D0CB",
      "actionType": 1,
      "seqID": 6,
      "startDate": 1715257505144,
      "viewName": "UITableViewController",
      "duration": 437,
      "actionName": "Loading UITableViewController"
    },
    {
      "actionType": 0,
      "viewName": "UITableViewController",
      "startDate": 1715257530606,
      "seqID": 8,
      "actionID": "BF6843DE-CF11-4663-A819-1E87E23E54B7",
      "duration": 759,
      "actionName": "Perform Segue From UITableViewController To ViewController"
    },
    {
      "actionID": "1CA4AB6B-B51A-48BE-8614-AB7991376C83",
      "actionType": 1,
      "seqID": 10,
      "startDate": 1715257530712,
      "viewName": "ViewController",
      "duration": 30,
      "actionName": "Loading ViewController"
    }
  ],
  "system": {
    "battery": 0, // 电池电量
    "mem": 24788992, // 内容大小
    "cpu": "0.20" // CPU使用率
  },
  "visitStartTime": 1715257499542,
  "os": {
    "name": "iOS",
    "version": "15.0"
  },
  "app": {
    "build": "1",
    "name": "AgentDemo",
    "pkgName": "com.dev.AgentDemo",
    "version": "1.9"
  },
  "viewcontroller": [
    {
      "viewDidAppearStartTime": 5896,
      "eventID": "4AD8B32C-0C6A-41CB-9567-E356270BED80",
      "eventType": 0,
      "pageActionToViewName": "MyTabBarController",
      "viewWillAppearDuration": 11,
      "didLoadDuration": 2,
      "parentID": "C1D1C80C-FF07-4A3B-B6AF-F7F955DA08E5",
      "didLoadStartTime": 5303,
      "viewDidAppearDuration": 15,
      "viewWillAppearStartTime": 5324,
      "seqID": 2,
      "duration": 608,
      "startTime": 1715257504847
    },
    {
      "viewDidAppearStartTime": 5897,
      "eventID": "EFBD49BC-6E27-4378-92D1-0360C54952D1",
      "eventType": 0,
      "pageActionToViewName": "UITableViewController",
      "viewWillAppearDuration": 1,
      "didLoadDuration": 0,
      "parentID": "C1D1C80C-FF07-4A3B-B6AF-F7F955DA08E5",
      "didLoadStartTime": 5598,
      "viewDidAppearDuration": 13,
      "viewWillAppearStartTime": 5600,
      "seqID": 3,
      "duration": 312,
      "startTime": 1715257505142
    },
    {
      "viewDidAppearStartTime": 758,
      "eventID": "FD25BE40-B2E6-47B5-A1BA-F45EAFFF8853",
      "eventType": 0,
      "pageActionToViewName": "ViewController",
      "previousViewDisappearedStartTime": 105,
      "viewWillAppearDuration": 0,
      "didLoadDuration": 0,
      "parentID": "BF6843DE-CF11-4663-A819-1E87E23E54B7",
      "didLoadStartTime": 105,
      "viewDidAppearDuration": 1,
      "pageActionFromViewName": "UITableViewController",
      "viewDuration": 25250,
      "viewWillAppearStartTime": 106,
      "seqID": 9,
      "duration": 654,
      "startTime": 1715257530711
    }
  ],
  "visitID": "79D9BBF5-2903-4C75-9238-B3DCD29B71AE",
  "device": {
    "deviceId": {
      "uuid": "B487A1FD-D23B-42DD-A344-0A84DD41BB83"
    },
    "vendor": "APPLE",
    "model": "x86_64",
    "screenSize": "1242*2688",
    "memory": 8589934592
  },
  "carrier": {
    "carrier": "WiFi"
  },
  "deviceTime": 1715257549474
}

```

RUM技术的基本原理

2.1 浏览器监控

Real User Monitoring技术在前端的核心原理是通过在用户浏览器端嵌入JavaScript代码，收集用户与网站或应用的交互数据，并将这些数据发送到服务器进行分析和处理。具体而言，RUM技术包括以下几个关键步骤：

◎ 数据收集：在用户浏览器端嵌入JavaScript代码，通过监听用户的行为（如页面加载时间、资源加载时间、点击、滚动等），收集与页面性能和用户体验相关的数据。

例如，可以使用JavaScript代码监听用户的点击事件，并将点击的元素和时间信息发送到服务器：

```javascript
document.addEventListener('click', function(event)
{
    var elementClicked = event.target.tagName;
    var clickTime = new Date().getTime();
    // 将点击信息发送到服务器
    sendDataToServer(elementClicked, clickTime);
});
```

◎ 数据传输：收集到的数据被封装成请求，并通过网络传输到RUM服务器。通常采用HTTP或HTTPS协议进行数据传输，确保数据的安全性和可靠性。

◎ 数据处理：在服务器端对收集到的数据进行处理和分析。这包括解析数据、计算页面加载时间、资源加载时间、用户交互响应时间等关键指标，以及识别和报告错误和异常情况。

◎ 数据存储与展示：处理后的数据被存储到数据库中，并通过可视化界面展示给开发人员和运营团队。这些数据通常以图表、报表等形式呈现，帮助用户更直观地了解网站或应用的性能和用户体验情况。

2.2 APP监控

Real User Monitoring技术在iOS的核心原理是通过Objective-c 的运行时 RunTime 特性，通过 Method swizzling 技术，可以实现在运行时替换 selector 对应的方法实现，达到给方法挂钩的目的。也就是说，嵌⼊入 SDK 后，在程序启动之初，SDK会对相应的方法执行 swizzling操作，从而在调用一个被 swizzling 过后的函数时，将会首先调用 SDK 相应的自定义函数，在 SDK 的函数中会执行一些数据采集的操作，然后 SDK 的函数会再调回原函数的实现，不会影响原程序逻辑。

Method swizzling方法交换示意：

iOS 页面生命周期方法：

对生命周期方法做Method Swizzling，即可实现采集页面生命周期数据。

```objective-c
#import "UIViewController+Analysis.h"
#import <objc/runtime.h>

@implementation UIViewController (Analysis)

+ (void)load {
    
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        SEL originalSelector = @selector(viewDidLoad);
        SEL swizzledSelector = @selector(analysis_viewDidLoad);
        // 通过 Method swizzle 交换方法
        [self swizzlingInClass:[UIViewController class] originalSelector:originalSelector swizzledSelector:swizzledSelector];
        
    });
}

- (void)analysis_viewDidLoad {
    // 处理采集逻辑
    [self analysis_viewDidLoad];
}

+ (void)swizzlingInClass:(Class)cls originalSelector:(SEL)originalSelector swizzledSelector:(SEL)swizzledSelector {
    
    Class msclass = cls;
    Method originalMethod = class_getInstanceMethod(msclass, originalSelector);
    Method swizzledMethod = class_getInstanceMethod(msclass, swizzledSelector);
    BOOL didAddMethod =
    class_addMethod(msclass,
                    originalSelector,
                    method_getImplementation(swizzledMethod),
                    method_getTypeEncoding(swizzledMethod));
    if (didAddMethod) {
        class_replaceMethod(msclass,
                            swizzledSelector,
                            method_getImplementation(originalMethod),
                            method_getTypeEncoding(originalMethod));
    } else {
        method_exchangeImplementations(originalMethod, swizzledMethod);
    }
}

@end
```

RUM能解决哪些关键问题

RUM技术可以在多个方面帮助企业提升用户体验和网站性能表现：

◎ 性能优化：通过实时监控用户体验，开发团队可以快速发现并解决页面加载缓慢、交互不流畅等问题，从而提升网站和应用的性能。

◎ 用户行为分析：深入了解用户在页面上的行为模式，包括点击热点、流失路径等，为产品设计和营销策略提供数据支持。

◎ 错误排查与异常处理：及时捕获并分析页面中出现的错误和异常，帮助开发团队快速定位并修复问题，减少对用户的影响。

◎ 设备和浏览器兼容性：收集用户设备和浏览器信息，优化页面在不同设备和浏览器上的显示效果，提升用户体验。

结语

Real User Monitoring（RUM）技术的出现，为企业提供了一扇通向用户体验之窗的大门。通过实时监控用户行为和性能，开发团队可以更深入地了解用户需求，及时发现并解决问题，从而不断提升产品的竞争力和用户满意度。让我们期待RUM在未来的发展中，为数字化世界带来更多的惊喜和创新！Databuff 作为数字化可观测性的国内引领者，RUM这块功能是databuff 的一大核心模块，让我们共同期待databuff 的RUM模块发布。