背景
此方案基于RUM之SPA应用性能的可观测，欢迎查看点赞、评论和收藏。
往期文章（包含部分掘金上榜文章）
《谷歌教你如何说服老板为用户体验掏钱(1)- 电商品牌的最佳实践》
《国内第一篇讲如何减少卡顿的代码级别详细文章
《前端同学如何快速制定业务大盘
《巧用火焰图快速分析链路性能》
《前端可观测性的几个基础指标-1022
《某费控独角兽公司的技术分享--如何提高用户体验》
《对前端性能优化的一些小看法
《网站性能优化技巧》
《前端应用性能应该采集的数据》
《网站性能之单页面应用的杂谈》
《web应用简析》
《裸奔的前端绿皮车
《快速搭建全链路平台
《报错/卡顿是制约产品体验的关键因素
《VIP客户用户体验-追踪方案草稿》
《四个简单例子教你提高用户体验》
正文：基本思路
实现需要VIP客户关系的绑定：一种思路是使用客户的user体系，另一种思路是使用追踪ID。
逻辑关系
基本介绍
思路一
通过sdk的自定义userId或者tag的方式实现，这里使用客户自己的用户体系。
userID实现
import { datafluxRum } from '@cloudcare/browser-rum'
if（VIP）
datafluxRum.setUser({
id: VIP标识,
})
查看
自定义tag实现
import { datafluxRum } from '@cloudcare/browser-rum'
datafluxRum.addRumGlobalContext("uId", 17600353988);
datafluxRum.addRumGlobalContext("uAddress", "广东省增城丽维家中心");
datafluxRum.addRumGlobalContext("uBussiness", "家具业务线");
datafluxRum.addRumGlobalContext("uToken",uToken);
datafluxRum.addRumGlobalContext("custom",{
uId:17600353988,
uAddress:"广东省增城丽维家中心",
uToken:m,
"uBussiness": "家具业务线"
})
查看
这里能根据会话看到用户访问的轨迹，也就是页面浏览的行为，点击数据，资源加载数据，以及页面切换情况，
会话轨迹
会话情况包含：
页面性能
请求情况，能追踪到后端和数据库详情
后端的每个类 数据查询的语句的详细情况
错误情况
错误详情
| 字段 | 类型 | 描述 |
|---|
error_source | string | 错误来源，参考值：console |
error_type | string | 错误类型，参考链接：error type |
resource_status | string | 资源请求返回的状态值 |
resource_url | string | 资源 URL |
resource_url_host | string | 资源 URL 域名部分 |
resource_url_path | string | 资源 URL path 部分 |
resource_url_path_group | string | 资源 URL path 分组 |
resource_method | string | 资源请求方式 |
| 还能针对代码级别的错误进行sourcemap 还原 | |
思路二
通过是用观测云的trackID的方式实现，这里由客户使用自己的用户体系。
import { datafluxRum } from '@cloudcare/browser-rum'
if（VIP）{
datafluxRum.addRumGlobalContext('track_id','***');
}
查看
试用
点我注册试用或者加我微信768838557
接入的数据
数据类型
用户访问监测包括六种数据类型。
| 类型 | 描述 |
|---|
| session | 用户会话信息记录，当前会话中，将会基于会话维度用户页面、资源、操作、错误、长任务相关访问数据。 |
| view | 用户访问页面时，都会生成一个页面查看记录。当用户停留在同一页面上时，资源，长任务，错误和操作记录将通过view_id属性链接到相关的RUM视图。 |
| resource | 用户访问页面时，加载的资源信息记录。 |
| error | 用户访问监测采集器收集浏览器上的所有前端错误。 |
| long_task | 对于浏览器中的任何阻塞主线程超过50ms的任务，都会生成一条长任务记录。 |
| action | 跟踪用户页面浏览过程中所有的用户交互记录。 |
六种数据类型的层次结构如下图
默认属性
默认属性为全局属性，用户访问监测的场景构建和事件告警都可以通过下面的默认属性进行查询。
SDK属性
| 字段 | 类型 | 描述 |
|---|
sdk_name | string | 采集器名称，固定名称： df_web_rum_sdk df_miniapp_rum_sdk df_ios_rum_sdk df_android_rum_sdk |
sdk_version | string | 采集器版本信息 |
应用属性
| 字段 | 类型 | 描述 |
|---|
app_id | string | 必填，用户访问应用唯一ID标识，在控制台上面创建监控时自动生成。 |
env | string | 必填，环境字段。属性值：prod/gray/pre/common/local。其中 prod：线上环境 gray：灰度环境 pre：预发布环境 common：日常环境 local：本地环境 |
version | string | 必填，版本号。 |
用户 & 会话属性
| 字段 | 类型 | 描述 |
|---|
userid | string | 默认获取浏览器 cookie 作为 userid。如果使用 自定义用户标识 设置用户 id，那么 userid 就会跟定义的保持一致。注意：cookie 过期时间 60 天。 |
session_id | string | 会话 id。 |
session_type | string | 会话类型。参考值：user | synthetics user 表示是 RUM 功能产生的数据； synthetics 表示是 headless 拨测产生的数据。 |
is_signin | boolean | 是否是注册用户，属性值：True / False。 |
设备 & 分辨率属性
| 字段 | 类型 | 描述 |
|---|
os | string | 操作系统 |
os_version | string | 操作系统版本 |
os_version_major | string | 设备报告的主要操作系统版本 |
browser | string | 浏览器提供商 |
browser_version | string | 浏览器版本 |
browser_version_major | string | 浏览器主要版本信息 |
screen_size | string | 屏幕宽度*高度,分辨率 |
地理 & 网络属性
| 字段 | 类型 | 描述 |
|---|
ip | string | 用户访问IP地址 |
isp | string | 运营商 |
network_type | string | 网络连接类型，属性值参考： wifi | 2g | 3g | 4g | 5g | unknown（未知网络） | unreachable（网络不可用） |
country | string | 国家 |
country_iso_code | string | 国家 iso_code |
province | string | 省 |
city | string | 城市 |
View 属性
| 字段 | 类型 | 描述 |
|---|
view_id | string | 每次访问页面时产生的唯一 ID |
is_active | boolean | 判断用户是否还在活跃状态，参考值: true | false |
view_loading_type | string | 页面加载类型， 参考值：initial_load | route_change route_change为 SPA 页面加载模式 |
view_referrer | string | 页面来源 |
view_url | string | 页面 URL |
view_host | string | 页面 URL 域名部分 |
view_path | string | 页面 URL path 部分 |
view_path_group | string | 页面 URL path 分组 |
view_url_query | string | 页面 URL query 部分 |
用户属性
除了默认属性以外，还可以通过用户属性构建场景和配置事件告警。用户属性是非全局属性，通过用户属性，可以跟踪用户访问应用的整个过程，定位和发现用户受影响的访问情况，监控用户访问性能。
其他数据类型属性
Session
统计指标
| 字段 | 类型 | 描述 |
|---|
time_spent | number(ns) | 当前会话持续时长 |
session_view_count | number | 当前会话关联view_id个数 |
session_error_count | number | 当前会话产生错误个数 |
session_resource_count | number | 当前会话加载资源个数 |
session_action_count | number | 当前会话用户操作次数 |
session_long_task_count | number | 当前会话产生长任务次数 |
属性
| 字段 | 类型 | 描述 |
|---|
session_id | string | 会话 id（后台停留 30s 以上，会生成一个新的 session_id ） |
session_type | string | 会话类型。参考值：user | test user 表示是 RUM 功能产生的数据； test 表示是 headless 拨测产生的数据。 |
session_referrer | string | 会话来源。一般是记录来源的页面地址。 |
session_first_view_id | string | 当前会话的第一个页面的 view_id |
session_first_view_url | string | 当前会话的第一个页面的 URL |
session_first_view_host | string | 当前会话的第一个页面的域名 |
session_first_view_path | string | 当前会话的第一个页面的地址 |
session_first_view_path_group | string | 当前会话的第一个页面的地址分组 |
session_first_view_url_query | string | 当前会话的第一个页面的 query 信息 |
session_last_view_id | string | 当前会话的最后一个访问页面的 view_id |
session_last_view_url | string | 当前会话的最后一个页面的 URL |
session_last_view_host | string | 当前会话的最后一个页面的域名 |
session_last_view_path | string | 当前会话的最后一个页面的地址 |
session_last_view_path_group | string | 当前会话的最后一个页面的地址分组 |
session_last_view_url_query | object | 当前会话的最后一个页面的 query 信息 |
View
注意:view属性为全局参数，以下仅展示view的其他参数信息
指标
| 字段 | 类型 | 描述 |
|---|
| first_contentful_paint | number（ns） | 首次内容绘制时间 (FCP) 计算方式：firstPaintContentEnd - firstPaintContentStart |
| largest_contentful_paint | number（ns） | 最大内容绘制（页面加载时间轴中的一刹那，其中呈现了视口中最大的 DOM 对象） 参考链接：LCP 计算方式：统计最近上报的一次 PerformanceEntry 时间 |
| cumulative_layout_shift | number | 累计布局版面转移 (CLS)，0 表示载入过程没有版面移动变化 |
| first_input_delay | number（ns） | 首次输入延时 (FID) 计算方式：performance.now() - event.timeStamp |
| loading_time | number（ns） | 页面加载时间 initial_load 模式下计算公式: ① loadEventEnd - navigationStart ② 页面首次无活动时间 - navigationStart route_change 模式下计算公式：用户点击时间 - 页面首次无活动时间 页面首次无活动时间：页面超过 100ms 无网络请求或 DOM 突变 |
| dom_interactive | number（ns） | DOM 结构构建完毕时间 获取方式：time = performanceTiming.domInteractive; 参考链接：MDN dom_interactive |
| dom_content_loaded | number（ns） | DOM 内容加载时间 计算方式：domContentLoadedEventEnd - domContentLoadedEventStart |
| dom_complete | number（ns） | DOM 树解析完成时间 获取方式：time = performanceTiming.domComplete; 参考链接：MDN dom_complete |
| load_event | number（ns） | 事件加载时间 计算方式：loadEventEnd - loadEventStart |
| first_meaningful_paint | number（ns） | 首屏时间 计算方式：firstPaintContentEnd - firstPaintContentStart |
| first_paint_time | number（ns） | 首次渲染时间 计算方式：responseEnd - fetchStart |
| resource_load_time | number（ns） | 资源加载时间 计算方式：loadEventStart - domContentLoadedEventEnd |
| time_to_interactive | number（ns） | 首次可交互时间 计算方式：domInteratice - requestStart |
| dom | number（ns） | DOM 解析耗时 计算方式：domComplete - domInteractive |
| dom_ready | number（ns） | DOM Ready时间 计算方式：domContentLoadedEventEnd - navigationStart |
| time_spent | number（ns） | 页面停留时间 |
统计指标¶
| 字段 | 类型 | 描述 |
|---|
view_error_count | number | 每次页面加载时发生的错误次数 |
view_resource_count | number | 每次页面加载时请求的资源个数 |
view_long_task_count | number | 每次页面加载时产生的长任务个数 |
view_action_count | number | 页面查看过程中操作的次数 |
view_apdex_level | number | 页面 Apdex 满意度。 基础指标：first_paint_time（换算成秒单位） 参考值：0/1/2/3/4/5/6/7/8/9 (根据 first_paint_time 值，9 表示>= 9 秒) |
Resource
指标
| 字段 | 类型 | 描述 |
|---|
resource_size | number | 资源大小，默认单位：byte |
resource_dns | number（ns） | 资源加载 DNS 解析时间 计算方式：domainLookupEnd - domainLookupStart |
resource_tcp | number（ns） | 资源加载 TCP 连接时间 计算方式：connectEnd - connectStart |
resource_ssl | number（ns） | 资源加载 SSL 连接时间 计算方式：connectEnd - secureConnectStart |
resource_ttfb | number（ns） | 资源加载请求响应时间 计算方式：responseStart - requestStart |
resource_trans | number（ns） | 资源加载内容传输时间 计算方式：responseEnd - responseStart |
resource_first_byte | number（ns） | 资源加载首包时间 计算方式：responseStart - domainLookupStart |
duration | number（ns） | 资源加载时间 计算方式：duration(responseEnd-startTime) |
属性
| 字段 | 类型 | 描述 |
|---|
resource_url | string | 资源 URL |
resource_url_host | string | 资源 URL 域名部分 |
resource_url_path | string | 资源 URL path 部分 |
resource_url_query | string | 资源 URL query 部分 |
resource_url_path_group | string | 资源 URL path 分组 |
resource_type | string | 资源的类别 |
resource_method | string | 资源请求方式 |
resource_status | string | 资源请求返回的状态值 |
resource_status_group | string | 资源请求返回的状态分组值 |
Error
指标
| 字段 | 类型 | 描述 |
|---|
error_message | string | 错误信息 |
error_stack | string | 错误堆栈 |
属性
| 字段 | 类型 | 描述 |
|---|
error_source | string | 错误来源，参考值：console | network | source | custom |
error_type | string | 错误类型，参考链接：error type |
resource_status | string | 资源请求返回的状态值 |
resource_url | string | 资源 URL |
resource_url_host | string | 资源 URL 域名部分 |
resource_url_path | string | 资源 URL path 部分 |
resource_url_path_group | string | 资源 URL path 分组 |
resource_method | string | 资源请求方式 |
Long Task
指标
| 字段 | 类型 | 描述 |
|---|
duration | number（ns） | 页面加载时产生的长任务花费时间 |
Action
指标
| 字段 | 类型 | 描述 |
|---|
duration | number（ns） | 页面操作花费时间 |
统计指标
| 字段 | 类型 | 描述 |
|---|
action_long_task_count | number | 操作关联长任务次数 |
action_resource_count | number | 操作关联资源请求次数 |
action_error_count | number | 操作关联的错误次数 |
属性
| 字段 | 类型 | 描述 |
|---|
action_id | string | 用户页面操作时产生的唯一 ID |
action_name | string | 操作名称 |
action_type | string | 操作类型 |
试用
点我注册试用或者加我微信768838557
