0

点赞

收藏

分享

VIP客户用户体验-追踪方案草稿

司马吹风 2024-01-27 阅读 13

标签: 前端产品架构字段类型页面加载 JavaScript 前端开发

背景

此方案基于RUM之SPA应用性能的可观测，欢迎查看点赞、评论和收藏。

正文：基本思路

实现需要VIP客户关系的绑定：一种思路是使用客户的user体系，另一种思路是使用追踪ID。

逻辑关系

VIP客户用户体验-追踪方案草稿_前端

基本介绍

思路一

通过sdk的自定义userId或者tag的方式实现，这里使用客户自己的用户体系。

userID实现

# 引入sdk
import { datafluxRum } from '@cloudcare/browser-rum'
# 根据vip逻辑设置用户标识
if（VIP）
datafluxRum.setUser({
    id: VIP标识,
})

查看

VIP客户用户体验-追踪方案草稿_页面加载_02

自定义tag实现

# 引入sdk
			import { datafluxRum } from '@cloudcare/browser-rum'
   # 根据信息写入tag 
      datafluxRum.addRumGlobalContext("uId", 17600353988);
      datafluxRum.addRumGlobalContext("uAddress", "广东省增城丽维家中心");
      datafluxRum.addRumGlobalContext("uBussiness", "家具业务线");
      datafluxRum.addRumGlobalContext("uToken",uToken);
      datafluxRum.addRumGlobalContext("custom",{
        uId:17600353988,
        uAddress:"广东省增城丽维家中心",
        uToken:m,
        "uBussiness": "家具业务线"
      })

查看

VIP客户用户体验-追踪方案草稿_页面加载_03

这里能根据会话看到用户访问的轨迹，也就是页面浏览的行为，点击数据，资源加载数据，以及页面切换情况，

会话轨迹

会话情况包含：

VIP客户用户体验-追踪方案草稿_前端_04

页面性能

VIP客户用户体验-追踪方案草稿_架构_05

请求情况，能追踪到后端和数据库详情

VIP客户用户体验-追踪方案草稿_架构_06

VIP客户用户体验-追踪方案草稿_前端_07

后端的每个类数据查询的语句的详细情况

VIP客户用户体验-追踪方案草稿_页面加载_08

错误情况

VIP客户用户体验-追踪方案草稿_产品_09

错误详情

字段	类型	描述
`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的方式实现，这里由客户使用自己的用户体系。

# 引入sdk
import { datafluxRum } from '@cloudcare/browser-rum'
# 业务逻辑生成用户体系，与trackId 这两者形成绑定关系
if（VIP）{
	datafluxRum.addRumGlobalContext('track_id','***');
}

查看

VIP客户用户体验-追踪方案草稿_架构_10

VIP客户用户体验-追踪方案草稿_前端_11

接入的数据

数据类型

用户访问监测包括六种数据类型。

类型	描述
session	用户会话信息记录，当前会话中，将会基于会话维度用户页面、资源、操作、错误、长任务相关访问数据。
view	用户访问页面时，都会生成一个页面查看记录。当用户停留在同一页面上时，资源，长任务，错误和操作记录将通过view_id属性链接到相关的RUM视图。
resource	用户访问页面时，加载的资源信息记录。
error	用户访问监测采集器收集浏览器上的所有前端错误。
long_task	对于浏览器中的任何阻塞主线程超过50ms的任务，都会生成一条长任务记录。
action	跟踪用户页面浏览过程中所有的用户交互记录。

六种数据类型的层次结构如下图

VIP客户用户体验-追踪方案草稿_产品_12

默认属性

默认属性为全局属性，用户访问监测的场景构建和事件告警都可以通过下面的默认属性进行查询。

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	操作类型

0 条评论

关注