快速开启端到端的用户访问追踪(RUM)

[复制链接]
查看7074 | 回复0 | 2023-7-29 10:16:58 | 显示全部楼层 |阅读模式
快速开启端到端的用户访问追踪(RUM)-1.jpg

7 q  e) }( W& c& |5 F
在全民互联网时代,用户访问Web、小程序、Android、iOS等媒介的时间越来越长,努力赚取用户注意力的应用越来越多,产品与服务的更新也越来越频繁。在这样的大环境下,详细了解用户从哪里来,看了哪些页面,停留多长时间,访问速度快慢……不仅有利于挖掘每一个用户行为背后的真实需求,稳定并提升现存流量的转化率,还能反哺产品与服务的双重优化,真正实现用户增长和业绩提升。

$ O- u8 L$ b7 p8 z" W
“观测云” 提供了Web、Android、iOS和小程序的用户访问数据监测。完成应用接入后,即可在工作台的「用户访问监测」快速查看和分析各类应用的用户浏览行为及应用相关的性能指标,用于衡量网站及应用的程序的最终用户体验效果。
$ g5 c, I+ `# N- S3 d
前置条件

9 Z4 R9 _# s0 ^7 O7 R8 e- }
    - r) [/ ], {' z' O; J9 B. p
  • 您需要先创建一个【 观测云账号 】https://auth.guance.com/register?channel=toutiao- v5 E. V6 h' w* u
  • 安装 DataKit 【DataKit 安装文档 】https://www.yuque.com/dataflux/datakit/datakit-how-to
    * ~& b9 R: s7 j1 p* Q2 W9 p
  • 将 DataKit 部署成公网可访问【 RUM 配置文档 】https://www.yuque.com/dataflux/datakit/rum#852abae7' p! n0 ^2 @  s8 D& z& g
  • 操作系统支持:全平台4 }/ O; U; l$ P# h
方法/步骤
4 n0 j) t: _. c# r
DataKit 默认支持用户访问监测数据的接入,您仅需要完成应用接入,即可通过“观测云” 工作平台实时观测各类应用的用户浏览行为及应用相关的性能指标。

! \# V" b( Q/ j/ }Step1: 新建任务4 C: S1 r5 F1 L( r% E

3 X0 y2 i4 _) r6 ?5 B7 v5 @

    1 E; P3 U* V% Y. d6 ^
  • 登录 “观测云” 控制台,进入「用户访问监测」页面,点击右上角「新建应用」,在新窗口输入「应用名称」,点击「创建」即可创建新的用户访问监测任务。5 G; |  l' V; n' H% J5 X. y
  • 创建任务后,您需要依据选择的「应用类型」完成下方对应的配置,即可开启相关应用的用户访问监测。
    7 K. s) n) U2 U1 X1 w& E

" ?0 F% [8 ^/ B1 m7 j6 Z9 W4 c
快速开启端到端的用户访问追踪(RUM)-2.jpg
7 `  D; U1 B  m8 ]1 n* @
Step2: 配置应用接入
3 s- v3 c& j3 i; k# `% e& `, s( P' p( c, O* J. M
以配置Web应用的”同步载入“为例,配置步骤如下:

5 A1 J$ }* F7 c0 }* |4 z, |
a. 复制当前页面的代码,并依据要求修改当前代码所需的配置信息。如:修改脚本 datakitOrigin 地址为 DataKit 地址(安装DataKit的主机地址)

% |7 C8 ?0 q/ W7 u) |6 o! u
5 Q% b" \0 F, h+ }" {, w; A3 j/ y
快速开启端到端的用户访问追踪(RUM)-3.jpg
7 s! I9 `: R  {
b. 进入监测的目标应用,在对应页面HTML中的第一行添加所复制的代码

( R* W+ x! j. F% u7 o
c. 修改完成后保存退出
& [; `) h$ Y6 K
更多详情可参考:
' @# \+ Y7 `# i8 `$ j

    0 @, B; L  _/ v+ {9 i( n
  • 配置【 Web 应用接入 】https://www.yuque.com/dataflux/doc/eqs7v24 |* h- [* u- b1 O% K: a* h
  • 配置【 Android 应用接入 】https://www.yuque.com/dataflux/doc/pnzoyp& x) {3 L$ H# J* p5 Z
  • 配置【 iOS 应用接入 】https://www.yuque.com/dataflux/doc/gsto6k
    ( f. C; d- h/ W+ W5 ?
  • 配置【 小程序应用接入 】https://www.yuque.com/dataflux/doc/clgea8
    1 \' k/ }! d5 e% P4 e3 @- M4 x, O
Step3: 查看用户访问数据
% B8 \; U# N1 h3 o0 |  B! F
& I9 o7 J5 W3 t9 f% V! y1 N, r3 N3 o
在 “观测云” 工作空间「用户访问监测」,点击任意一个应用,即可通过「查看器」对该应用相关的用户访问行为、会话、页面性能、资源勤秋、异常错误等数据进行查看。

4 h. _( L. J% a: Z2 j# U

    , t* V# b. r, b
  • Web监测:包含页面性能、资源加载、JS错误等多个场景;查看器支持页面、资源、JS错误等数据的快速检索和筛选查看。. m2 W  J( y: u8 }$ y) P
  • Android监测:包含页面性能、资源加载等多个场景;查看器支持页面、资源、崩溃、卡顿等数据的快速检索和筛选查看。
    ) l0 C' p" ~& W* o/ g3 \6 Q% f
  • iOS监测:包含页面性能、资源加载等多个场景;查看器支持页面、资源、崩溃、卡顿等数据的快速检索和筛选查看。9 h; l. J  y" ^( d7 X# d9 n$ I
  • 小程序监测:包含页面性能、资源加载、请求加载、JS错误等多个场景;查看器支持页面、资源、请求、JS错误等数据的快速检索和筛选查看。* B) w; L; W" W* U7 I
0 l8 x  j* l4 C! S  F7 ?) h
快速开启端到端的用户访问追踪(RUM)-4.jpg

& F3 t7 X% n: ?7 p' Z0 J
进阶参考

& D+ Q. M0 Z8 H2 V1 q1 T数据采样
1 w9 q" R3 d2 |: E0 G* S: f7 [# H& J
' y- ?) {. L7 ^$ ?: K1 i! E( P
观测云”支持自定义数据采样率,控制数据上报体量,优化数据存储和采集效率。您可以在配置应用接入时,通过 resourceSampleRate(资源类数据采样率)和 sampleRate(指标类数据采样率)自定义数据收集百分比。
: ~9 N1 O  l" `& N
下面将以Web 应用为例,介绍如何收集90%的Web应用用户访问数据。

- F/ j" q, a7 F; {
    6 E# a: B; s. S" S
  • 在 “观测云” 控制台进入「用户访问监测」,通过「新建应用」获取 Web应用的三种方式:NPM 接入、同步载入和异步载入。
    / _% {% b* J) U- C0 x
  • 以“同步载入”为例,在代码中加入sampleRate: 90,然后复制粘贴到需要接入的页面HTML的第一行,即可按90%的比例采集Web应用的用户访问数据。" ?' N2 d  o" A' p: E' K
<script src="https://static.guance.com/browser-sdk/v2/dataflux-rum.js" type="text/javascript"></script><script>  window.DATAFLUX_RUM &&    window.DATAFLUX_RUM.init({      applicationId: 'appid_6666666666666666666',      datakitOrigin: '<DATAKIT ORIGIN>', // 协议(包括://),域名(或IP地址)[和端口号]      sampleRate: 90,      env: 'production',      version: '1.0.0',      trackInteractions: true    })</script>
其他应用采样可参考:

  ^. p# G0 i! x

    ) X, d5 b5 ~$ C# P" u
  • IOS采样设置可参考【 IOS 应用接入 】https://www.yuque.com/dataflux/doc/gsto6k#Zx9Q3
    6 P" d- O+ ]( B/ \+ r
  • Android采样设置可参考【 Android 应用接入 】https://www.yuque.com/dataflux/doc/pnzoyp#tBmrd/ }* z4 F+ q7 I; s  K
  • 小程序采样设置可参考【 小程序应用接入 】https://www.yuque.com/dataflux/doc/clgea8#MJwVt
    5 R. ?2 b' n1 f) ?8 [7 x
生成指标5 K) V+ C7 e/ O4 N/ S
( `* c0 [# A1 L% w
为了便于您依据需求设计并实现新的技术指标。“观测云” 支持基于当前空间内的现有数据生成新的指标数据。通过选择「用户访问检测」-「生成指标」功能,参考以下步骤可以帮助您生成新的用户访问数据:
+ A; x; C9 S4 Y- q6 c
* R9 b' y" l; w7 u! m
快速开启端到端的用户访问追踪(RUM)-5.jpg
/ k( u& D8 B( p7 U+ h4 ^1 L5 t  U
Step 1: 数据筛选。筛选出当前空间已有的全部/单个应用数据来源,并基于此数据源开始生成新的数据(“ * ”表示为全部数据来源)。

( Y1 P" E3 @" q/ D
Step 2: 数据查询。基于选定的数据源,您可以对现有数据添加筛选和聚合表达式,请求产生新的指标结果和数据集合。
1 O' ?4 ?4 M( t  Q3 p& r9 \! r/ T( c. `+ }

    7 Y: J; n4 S; y, U* G
  • 聚合方法:包含Avg(取平均值)、Min(取最小值)、Max(取最大值)、Count(取数据点数)、p75(统计指定字段75%的值,需选择聚合的字段)、p95(统计指定字段95%的值,需选择聚合的字段)、p99(统计指定字段99%的值,需选择聚合的字段)3 N$ q, A- g  L  f& q0 f" ]5 K+ Z
  • 样本指标:设置的数据生成的样本指标,即通过对样本指标的查询和聚合产生新的指标结果
    , o9 F% ]7 y6 C1 D5 r- b* c
  • 维度:按照所选对象进行数据聚合,即对数据请求中的每一个所选对象都生成一个统计值2 e/ P. r% r8 |
  • 筛选:支持对现有标签数据添加一个/多个筛选过滤条件,并对同一行筛选条件添加“并且“ (and)、“或者”(or)关系
    # ?+ Z, f: D/ C* b7 G
  • 时间范围:生成指标数据的时间粒度,默认为15分钟,即15分钟内某数据统计展示的效果。
    , u; d4 h9 X: A7 p1 S5 T& T
Step 3: 生成指标。对生成指标的方式和结果进行设置,包括生成指标的周期、新生成指标的标签名称和指标集名称。
+ `5 f* J/ h7 o5 L* ?! ?
    7 G  J7 u; g; \; ^1 M0 _1 I
  • 频率:生成指标的执行周期,默认1分钟,即每1分钟生成一次新的指标数据
    # ^/ e' f5 `* u" Q) l
  • 指标集:设置指标存放的指标集的名称! @5 ^0 S/ a2 n* A! p0 k
  • 指标:设置指标的名称,其中指标名称不允许重复,可添加多个指标
    3 l! z5 J, i/ G; I% Q' |3 T/ {
Step 4: 完成生成规则的填写后,点击「确定」即可完成生成指标规则并开启数据采集。
) Z4 d5 R, \  _7 u) W7 n% _
所有已添加的规则都将展示在「生成指标」的界面中,用户可进行「编辑」「删除」「启用/禁用」和「查看指标」

  J! t6 S  S$ E8 g$ A. u0 m
, m* n9 `$ ?8 e' T; m6 c
快速开启端到端的用户访问追踪(RUM)-6.jpg
3 F2 c' H$ \% H+ Y9 q6 A
更多详情可参考【 用户访问监测-生成指标 】https://www.yuque.com/dataflux/doc/sbyggu

- Y1 b. U: h+ x( r) nSouremap' d" O% P: ~$ e( u
+ M9 a3 X+ c; v8 I, c3 c( F
应用在生产环境中发布的时候,为了防止代码泄露等安全问题,一般打包过程中会针对文件做转换、压缩等操作。Souremap 作为一类信息文件,记录了转换压缩后的代码所对应的转换前的源代码位置,构建了处理前以及处理后的代码之间的一座桥梁,方便定位生产环境中出现 bug 的位置。"观测云" 为 Web 应用程序提供 Sourcemap 功能,支持还原混淆后的代码,方便错误排查时在源码中debug,及时帮助用户更快解决问题。

, ]  _, @2 `6 G+ D; n
1 _. \7 [/ f9 K- G# ?0 C2 x: `, F
快速开启端到端的用户访问追踪(RUM)-7.jpg
/ q8 F% l5 I/ T- n
Step 1: 开始使用 Sourcemap前,您需要将应用对应的map文件上传到 “观测云”,“观测云” 会根据拿到的 map文件自动完成映射还原。具体步骤如下:

8 z- ]6 d8 h9 F# k1.配置 Javascript bundler:用来映射转换、压缩后的 js 代码。以使用 webpackJS 举例,使用内置插件 SourceMapDevToolPlugin 生成源映射,在下面查看如何在 webpack.config.js 文件中配置它:$ h" ^7 ^6 s% c2 C0 Q6 T* U
// ...const webpack = require('webpack');module.exports = {  mode: 'production',  devtool: false,  plugins: [    new webpack.SourceMapDevToolPlugin({      noSources: false,      filename: '[file].map'    }),    // ...  ],  optimization: {    minimize: true,    // ...  },  // ...};
注意:如果用的是 TypeScript ,在配置 tsconfig.json 时设置 compilerOptions.sourceMap 为 true。
) x0 z1 Z- Z) A/ [+ ~. N
假设如下 error_stack:

9 P6 l8 ]" I$ u, HReferenceErrorat a.hideDetail @ http://localhost:8080/static/js/app.7fb548e3d065d1f48f74.js:1:1037at a.showDetail @ http://localhost:8080/static/js/app.7fb548e3d065d1f48f74.js:1:986at <anonymous> @ http://localhost:8080/static/js/app.7fb548e3d065d1f48f74.js:1:1174
需要转换的路径是 /static/js/app.7fb548e3d065d1f48f74.js,与其对应的 sourcemap 路径为 /static/js/app.7fb548e3d065d1f48f74.js.map,那么对应压缩包解压后的目录结构如下:

# H  _' Q" B1 W( M: ystatic/js/app.7fb548e3d065d1f48f74.js.map
转换后的 error_stack_source :

" z% W8 ^/ a' K& v4 qat a.hideDetail @ webpack:///src/components/header/header.vue:94:0at a.showDetail @ webpack:///src/components/header/header.vue:91:0at <anonymous> @ webpack:///src/components/header/header.vue:101:0
变量说明:
1 Y5 o9 V. G& f4 D: l- x

    7 g4 h9 w) b, W' \6 \
  • <app_id>:对应 RUM 的 applicationId
    . [9 W( u1 y7 D$ T3 T
  • <dea_address>: DCA 服务的地址,如 http://localhost:9531
    ; i; `; ?  j; r; Z* Y
  • <sourcemap_path>:待上传的 sourcemap 压缩包文件路径
    0 C) D! Z/ U6 G+ @% w
  • <env>:对应 RUM 的 env& W! ]- X& ~0 v" a0 q0 j+ y* M
  • <version>:对应 RUM 的 version
    6 e5 R4 h, l+ }7 r$ o* i
2.sourcemap 打包压缩:得到 zip 格式文件。将 sourcemap 文件压缩打包成 zip,命名格式为 <app_id>-<env>-<version>.zip ,并保证该压缩包解压后的文件路径与 error_stack 中 URL 的路径一致。
# l; `( |5 F/ ^8 @+ I8 _zip -q -r <app_id>--.zip sourcemap文件目录3.上传:zip 文件上传至 datakit。可以手动上传至 datakit 相关目录, <Datakit 安装目录>/data/rum/,这样就可以对上报的 error 数据自动进行转换,并追加 error_stack_source 字段至该指标集中。也可以使用 http 接口上传和删除该文件,前提是开启 DCA 服务。$ a& A5 h" ~5 N) m/ k% R
上传:

2 F; W9 t) {, H3 j/ Scur1 -x POST '<dca_address>/v1/rum/sourcemap?app_id=<app_id>&env=&version=<versio删除:
- w' q7 G7 [2 r5 {& u% Ocur1 -X DELETE '<dca_address>/v1/rum/sourcemap?app_id=<app_id>&env=&version=<vers
Step 2: 通过访问“观测云”「用户访问监测」,在页面性能数据(view) 和会话数据(session) 详情页面,点击「错误」数据,通过「查看 sourcemap」您可以及时发现错误堆栈信息(真实的代码发生错误的地方)。
/ z, ^- i5 l! N: m4 r/ O/ V

# h' n& ]) ~5 R- O% Z
快速开启端到端的用户访问追踪(RUM)-8.jpg

$ r% ?5 [* c7 U- r' `4 d" \2 o! {8 c
注意事项:

0 C* D, _8 V0 W4 b: y" s: }8 f
    , ~9 R$ P. J7 {/ \" B7 A: w
  • 该转换过程,只针对 error 数据。
    9 j. `  U! e/ O$ K& b$ P
  • 当前只支持 js 的 sourcemap 转换。
    & U, W( u5 ~. ^. x6 \
  • sourcemap 文件名称需要与原文件保持一致,如果未找到对应的 sourcemap 文件,将不进行转换。
    & v# {" d! {0 ]9 u7 Y& Q
  • 通过接口上传的 sourcemap 压缩包,不需要重启 DataKit 即可生效,但如果是手动上传,需要重启 DataKit ,方可生效。
    9 N; C: M$ M. B( ~: M4 y
自建追踪
8 \+ [, T7 M* H- y* E5 z3 c( s3 e8 x, ?2 \3 |4 I! J0 f3 ^! k9 L
“观测云” 支持你通过「用户访问监测」新建追踪任务,对自定义的链路追踪轨迹进行实时监控。通过预先设定链路追踪轨迹,可以集中筛选链路数据,精准查询用户访问体验,及时发现漏洞、异常和风险。

6 ^' B1 F- ]. B4 C) ]$ v
Step 1: 新建追踪

+ j7 M/ H9 j! o# s# @( X
在观测云工作空间的「用户访问监测」中,点击「应用名称」进入指定应用,即可通过「追踪」新建追踪轨迹。
6 T& h1 B) ]  W6 @  N
进行「新建追踪」时,您需要设定名称和字段,并在生成追踪ID后完成引入配置
  U! f4 k2 J, c8 F: B) Y, |7 q
    : R8 L- N+ S# z/ W% j
  • 追踪名称:当前追踪任务的名称。支持中英文混写,支持下划线作为分隔符,不支持其他特殊字符,且最多支持64个字符串
    4 F: O+ }5 ^6 m- x" i
  • 标签:定义链路追踪字段。支持通过下拉框选择当前应用下的标签( key:value ),支持多选  m9 X+ E) l8 y) P
  • 追踪ID:点击「生成追踪ID」即可新建追踪轨迹,并由系统生成的唯一追踪ID标识。) j: C) X9 X, {5 I

( E% ^5 N2 w$ u) A
快速开启端到端的用户访问追踪(RUM)-9.jpg
. ?$ B+ v; l. ?& g( H
Step 2: 配置引入方式

4 [+ A% R% U# B: W& \# A% y$ S5 T- @
生成追踪ID后,需要根据追踪ID信息在应用中引入代码。以Web应用的”NPM引入“为例,配置步骤如下:

* U( `# v2 u! m/ N4 N8 K2 p
a. 复制当前页面的代码。

; B8 C' V1 q! m. c4 Y5 D( }
b. 初始化 SDK 后,使用所复制的代码添加追踪ID

/ w$ u! q; i6 {* T
c. 修改完成后保存退出
+ U  J( q5 w6 }* h9 M# Q

. X( _9 N( R; v5 z) `
快速开启端到端的用户访问追踪(RUM)-10.jpg
7 i4 ~6 M! i6 f2 V/ J/ Z6 v
详细步骤请参考【 追踪配置示例 】https://www.yuque.com/dataflux/doc/gxavg8
6 ]1 R8 m, ~0 U, ^$ q) c
【 立即体验观测云 】https://auth.guance.com/register?channel=toutiao
/ l! W  G) W* U1 i0 z; Q  w

) n- o+ A0 {. Z3 ~. K
快速开启端到端的用户访问追踪(RUM)-11.jpg
/ E5 ]& g8 d7 s1 _

  D1 ?5 n2 U; D) p0 S4 b$ h7 v
快速开启端到端的用户访问追踪(RUM)-12.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

10

金钱

0

收听

0

听众
性别

新手上路

金钱
10 元