阿里云前端专家冯军：前端用户体验该如何优化

2022 年 9 月 28 日，阿里云用户组（AUG）第 11 期活动在深圳举办。活动现场，阿里云前端专家冯军，向参会企业代表分享了前端用户体验该如何优化？本文根据演讲内容整理而成。

大家好，我叫冯军，在可观测领域工作六年的经验，现在主要负责的 ARMS 前端监控。今天讨论的话题是前端用户体验该如何优化。我就简单介绍一下我们在解决什么问题？

前端监控关心的核心问题

如何提供一个优质的用户体验，所有公司都比较关注：

• 在客户出现问题的时候，如何快速划分清楚问题是由于前端，网络，还是后端服务导致的？

• 客户遍及全球，如何发现用户在产品使用上的体验差异，以及出现问题时的影响范围？

• 如何通过快速搭建业务指标的监控？

• 产品体验改版，基于用户使用体感量化改进结果？

Session 结构

有客户出现问题，我们如何划分清楚问题出现哪一块？一个用户觉得体验或者是使用上的中断，那么到底是前端出了问题，还是网络出了问题，还是后端出了问题？

多维分析 & 日志分析

我们现在的客户是多种多样的，比如说我们服务了全球，那么我们怎么样才能去发现每个地区，每个用户他的网络情况，用户习惯我们都不一样。怎么样去挖掘出不同区域不同用户的这种差异，出现问题怎么去解决？

自定义事件上报

比如说监控的基础指标—错误、API 等等，但是涉及到一些业务相关的，我们怎么去解决？我们要统计有个 VIPD 的使用量大概有多少？如果我们需要后端开发接口去建表、建库，前端去做一些统计，那这个流程可能要耗费很长时间，就会有很高的代价。如果说你的业务非常多想快速迭代，我们怎么样去快速的去统计业务的一些指标。

自定义关键指标和属性上报

产品体验改版，每隔一段时间做一些改版，我如何知道这次改版相比上一个版本有了提升，提升在哪里等等这些是我们关心的一些问题。

什么是 ARMS 前端监控？

那么怎么解决呢？首先介绍一下 ARMS 提供了哪些主要的能力？前端监控是通过实时的采集客户端应用程序性能数据，帮助开发人员优化用户体验。我提供了上图中四个主要的能力（其他能力还有很多）：

• 会话分析：会话分析是从单个用户的绘画出发去了解用户所有发生的页面访问，API，错误、性能、用户的行为等等，这样我们可以针对数据库做分析。

• 问题定位：这是一个对前端来说非常普遍的问题，在测试的过程中发现正常，但是在用户使用过程中，就会发生各种各样的错误，这个错误发生的情况是怎么样的？我们怎么样去定位呢？比如用户使用的某些浏览器没有在测试范围内，这种情况可能大量存在的真实情况。

• 衡量用户影响：比如我们出现了一些错误，导致用户使用上的中断，那么影响了哪些客户呢？这个客户分布在哪里？是不是跟这个应用有关系？还是跟浏览器有关系？跟系统有关系？还是跟设备有关系？衡量用户影响能够通过告警的方式通知到开发人员在第一时间发现问题、解决问题。

• 前后端链路追踪：往往出现一种问题就是后端监控没有任何错误，但是前端就是发生了一些 API 的请求错误。比如说无法访问或者超时问题，那它可能发生在哪一个点呢？比如说出现在网络不好，或者是出现在服务端的网关侧没有把这个请求转发到后端的服务，或者是页面开发存在出现了大量的请求的跟进中，这时候导致一些 API 超时，这种情况都有可能出现，这就是我们 ARMS 前端监控主要提供的一些能力。

监控架构

探针接入层

目前我们支持了主要是移动 Web & H5、小程序、Native APP，目前接入的能够满足大部分的需求。

数据高可用

网关层是来接收看帧收到的数据，因为它是公网的，我们做了大量的关于突发流量的优化。

首先第一层是有一个本地磁盘会立刻会把我们的数据存在本地，然后通过 Victor 的处理传递到 Kafka，进一步进入流式计算，我们自研的流式计算，用于数据聚合、采样分发，处理完了以后，会把数据存到我们的明细数据库 SLS，指标数据存在 Prometheus（Prometheus 还在内测很快会对外开放）。另外一部分就是原日志，我们会也会存储一部分。为了防止我们的流量突发会导致的一些异常，数据依然能够恢复过来。另外一部分是 Config 是不对外开放的，是我们存一些配置的功能。为了控制前面的一些层的一些行为，比如说限流降级这样的一个行为。通过一级磁盘，二级 kafka，三级日志数据库，这三级机制保证了数据的高可用。

数据开放

除通过提供的 OpenAP、告警、Grafana 等能力去做数据分析，我们的明细数据 SLS 部分已经能够完全开放，以前只能通过我们提供的查询层这些能力去查数据，现在已经可以直接基于我们的明细数据自己写一些根据业务特点的查据。

以 Session 为核心的数据

然后介绍一下数据的组织形式，数据是以三个为核心的，所有的数据都以 Session 为核心。

Session 是一次用户使用产品的完整旅程，是他来到你的站点来访问，进入到他走这一段时间，然后是一个持续的浏览过程。它里面分为多个 PV，就是每一次 PV 是处于某一个 Session，然后每一次 PV 里面包含了若干个监控的项目。比如说 Perf 页面性能、资源监控、API 错误、自定义监控、用户的行为等等这样，所有的上报项目，都会有一些公共属性，大概是一个六类：

阿里云前端专家冯军：前端用户体验该如何优化