利用观测云的 RUM 追踪和分析一个 VIP 用户的旅程

背景

现阶段每个公司都会有自己的网站、小程序、APP、OA 系统，前端研发开发完成某个网站、或者某小程序后，发布到公网供用户使用，随着平台越来越商业化，各个平台都会设置有付费客户（比如某视频平台，充会员才能得到某个资源），那么针对这种付费 VIP 客户，如何留住这些客户继续使用所在平台呢？其中很重要的一个因素就是：用户体验，分析用户体验就要知道 xx 用户什么时间进入了平台、点击了 xx 页面，做了 xx 点击操作，在 xx 页面中报的错误是什么、错误导致页面卡死、卡顿等等，这就引出了今天我们谈的话题，如何利用观测云追踪和分析一个 VIP 用户的旅程

什么是观测云？

观测云（www.guance.com），首批获得中国信通院颁发的「可观测性平台技术能力」与「根因分析技术能力」先进级认证，满足对云、云原生、应用及业务的统一监测需求。观测云能全环境高基数采集数据，支持多维度信息智能检索分析，及提供强大的自定义可编程能力，使系统运行状态尽在掌控，故障根因无所遁形。作为一款数字化生产力工具，观测云可助力实现用数据驱动的现代软件工程体系，用可观测性改变软件全生命周期管理。

什么是 RUM 追踪？

对自定义的链路追踪轨迹进行实时监控。通过预先设定链路追踪轨迹，可以集中筛选链路数据，精准查询用户访问体验，及时发现漏洞、异常和风险。

案例

以下展示一个案例场景，展示一下利用观测云追踪和分析一个 VIP 用户的旅程的过程

案例背景

前端研发小范开发了一个权限管理系统，给公司内部领导使用，4 月 1 号晚上 10 点，老板王某在钉钉群艾特小范，抱怨说在为深圳市场部配置权限时候【很卡】，而且经常【配置失败】，表示要【紧急找出问题并修复】。小范收到后，咨询老板哪个功能问题，一直无法复现，前后端服务也正常都正常，没有出现报错该问题定性为 偶现 bug。

案例分析

其实，小范是开发者，他版本发出去后，肯定不知道老板的用户行为，比如都点了哪些页面，在哪个页面报错，报错的详情是什么，点了哪些按钮，这些按钮触发后调用了哪些接口，所有都是未知，复现不了就解决不了，所有这个就是典型的无法追踪 VIP 重点客户的用户行为案例。

解决方案

解决思路

在代码中自定义埋点，登录后获取到用户信息，然后判断该用户是不是 VIP 客户，如果为 VIP 客户将标识符（自定义标签 TAG）记录上传到观测云平台，然后根据自定义标签 TAG 在观测云平台反向找到 VIP 用户的 Session 会话信息、View 访问信息、Action 按钮点击信息、Resource 资源加载信息、Long task 长任务耗时信息、Error 信息，反向查看用户在系统中的“旅程”。

实战配置

1、注册观测云账号

https://auth.guance.com/businessRegister

2、安装 datakit

Datakit 是运行在用户本地机器上的一种基础数据采集工具，主要用于采集系统运行的各种指标、日志等数据，将它们汇总给 观测云，在观测云中，用户可以查看并分析自己的各种指标、日志等数据。

DataKit 是观测云中至关重要的一个数据采集组件，几乎所有观测云中的数据都是来源于 DataKit。

安装地址：https://docs.guance.com/datakit/datakit-install/

3、DataKit 配置为公网访问

修改 /usr/local/datakit/conf.d/datakit.conf http_api 的 localhost 为 0.0.0.0（此配置用于控制当前服务器的 9529 端口是否可被外网请求访问，如果设置的是 127.0.0.1 或者 localhost，就只允许本地或内网访问当前服务器的 9529 端口，设置为 0.0.0.0 后，当前服务器的内外网 9529 端口都可以被访问，rum 大多为外网数据，所以需要开通外网到 datakit 所在服务器的 9529 端口），例如：

4、开启 RUM 采集器

进入 DataKit 安装目录下的 conf.d/rum 目录，复制 rum.conf.sample 并命名为 rum.conf。示例如下：

5、应用接入

参考地址：https://docs.guance.com/real-user-monitoring/web/app-access/

在 head 中添加 js 部分，接入后示例如下

6、添加 VIP 追踪代码

在找到判断是 VIP 用户后，添加以下代码

window.DATAFLUX_RUM && window.DATAFLUX_RUM.addRumGlobalContext('track_id','rtrace_xxx273626647649d0bf46b6e2fa4f8');

备注：track_id 创建方式为：在观测云工作空间的【用户访问监测】中，点击【应用名称】进入指定应用，即可通过【追踪】新建追踪轨迹后生成

效果展示

1、点击追踪【用户访问监测】-【追踪】，查看追踪的行为轨迹

2、点击查看，跳转到【session 查看器】

从结果来看，这里有一个错误标识（【1】为自动带入筛选条件，即创建追踪自动生成的 ID）。

在 Session 查看器，您可以查看用户访问时的会话时长（即用户从打开一个应用到关闭的时间）、会话类型（真实用户访问 "user"）、页面访问数量、操作数量、错误数、用户最初访问页面和最后浏览页面等。

3、点击查看【session 会话详情页面】

会话详情包括用户访问时长、访问类型、服务类型和访问详情，访问类型包括访问动作（action)、访问路径（view）和出现的错误信息（error）等。点击对应类型图标，即可跳转至对应详情页单个 session 详情

如下图，展示出了该 VIP 用户的所有用户行为，详细记录用户轨迹，并且记录点击时间、当前环境、当前版本、操作系统、浏览器、国家、城市；示例中没有，是因为未加 IP 库，开启方法参考文档。

4、发现报错

5、查看报错详情

这里错误也展示出来了，加了 source_map,定位到代码行，快速定位帮助研发解决问题

6、点击查看【view】查看器

追踪每一个页面的用户访问数据，包括加载时间、停留时间等；

结合每一个页面关联的资源请求、资源错误、日志等数据，全面分析用户访问业务应用的性能情况，帮助快速发现并优化应用程序的代码问题。

7 、点击列表中需要查看的数据详情页

您可以查看用户访问的页面性能详情，包括属性、来源、性能详情、链路详情、错误详情、关联日志等。

【关联 XHR】

在本页面中的所有接口信息全部采集，支持查看用户访问时向后端应用发出的每一个网络请求，包括发生时间、请求的链路和持续时间。

【性能详情】

性能页面可以帮助您查看到用户访问指定应用时前端的页面性能，包括页面加载时间、内容绘制时间、交互时间、输入延时等。以下图为例，可以看出 LCP（最大内容绘制时间）的指标达到了 8.4 秒，而推荐的时间在 2.5 秒以内，说明页面速度载入慢，需要进行优化。

8、其他

除此之外 还可以看到这个 VIP 用的按钮点击操作行为、source 加载情况等

总结

以上案例效果展示中，展示了从配置 VIP 表示后的一行代码，观测云从各个维度进行分析了该 VIP 用户的全部行为轨迹，完整重现出在当时操作的用户行为轨迹，正如上述案例中：在【/system/dict】页面点击了【首页用户管理 角色管理 菜单管理 部门管理 岗位管理 字典管理】按钮，然后点击【系统接口】按钮，跳转到了【tool/gen】页面，报错【source error Error: 服务未找到】，完成一次偶现 bug 的复现，至此问题解决，完成利用观测云的 RUM 追踪和分析一个 VIP 用户的旅程。

这个偶现 bug 得以解决，其实其后有很多思考：VIP 用户追踪其实是追踪用户的行为记录和行为轨迹，然后在各个模块触发时统一上传到后端，然后展示出 UI，便于前端分析，这里用了观测云的 saas 版本做了整个过程的采集、分析、记录，也欢迎大家和我一起体验这个可观测平台工具。

开始探索观测云