You need to enable JavaScript to run this app.
导航
Action列表
最近更新时间:2023.02.20 15:02:26首次发布时间:2022.09.01 09:59:07

Action列表,即用户行为列表,是用于监控用户的行为并衡量行为性能的消费页面。

接入

由于Action列表功能不是所有用户都需要,所以并没有默认集成在SDK中,您可以根据业务需要配置接入。
在初始化时配置actionPlugin,即可监控用户的行为。
版本依赖: apmplus/integrations >= 1.1.0且apmplus/web >= 2.0.0

插件配置说明

字段

类型

默认值

说明

types

string[] | false

-

配置监听的类型。
默认情况下,SDK会监听多种用户行为,但是用户可以通过types指定监听的类型。例如:

  • click:只监听click事件。
  • false:不监听任何事件。但是可以调用SDK的startAction方法,手动记录用户行为。

pure

boolean

false

只查看关联的longtask、http、js_error、resource_error的action数据。
如果想单纯监控按钮的点击行为,不想只查看上述关联的action数据,可以将此字段设置为true,此时action无需关联性能数据,等待action稳定后就直接上报数据。

接入示例

import client from '@apmplus/web'
import { actionPlugin } from '@apmplus/integrations'

// 示例一:集成action插件
client('init',{
  ...
  integrations: [actionPlugin()],
  ...
})

// 示例2: 集成action插件但是并不监听任何事件
client('init',{
  ...
  integrations: [actionPlugin({ types: false })],
  ...
})

// 示例3: 集成action插件并监听指定的事件类型
client('init',{
  ...
  integrations: [actionPlugin({ types: ['click'] })],
  ...
})

除了默认的监控项,您还可以通过调用startAction方法来手动开启一个用户行为。

client("startAction", "action name", "action type");

自定义action name

默认情况下,SDK会获取当前点击元素的文本信息来作为action name。另外,SDK也支持自定义action name,您可以在元素上配置data-apm-action属性值来作为action name。
示例如下:

// 在这个例子中,如果点击里面的span,会将‘this is action name’作为此次元素的名字
<Button data-apm-action="this is action name" onClick={...}>
    <span>trigger action</span>
</Button>

如果目标浏览器为IE,不支持Element.closest,那么SDK会向父元素遍历10层,寻找attribute包含data-apm-action的元素。更多Element.closest相关内容,请参见Element.closest

页面消费

用户行为是用户在产品上产生的行为,实际表现为相关的用户数据,您可以从两个方面查看和分析:

  • 复现用户路径
    发生异常时,通过查看数据探索中的sessionn复现用户路径,帮助定位问题。
  • 行为性能
    根据JS错误、静态资源错误、请求、LongTask等监控数据查看关联情况,根据不同排序基准分析问题,优化交互体验。您可以在Action列表中查看这些监控数据。

筛选

图片

  • 工具栏包括时间范围选择、时间粒度选择、排序依据、耗时指标统计方式以及筛选条件。
  • 支持收藏筛选条件并查看常用筛选。
  • 排序依据包括:操作耗时、请求耗时、前端耗时、LongTask耗时、Action触发数、JS错误总数、平均触发请求数、LongTask数。
    • 操作耗时:按照响应总耗时倒序排列,可以排查哪些用户行为页面响应较慢
    • Action触发数:按照Action触发数倒序排列,可以查看哪些行为是用户常用的行为
    • LongTask数:按照LongTask数倒序排列,可以查看哪些行为造成的用户卡顿多
  • 耗时指标统计包括:avg、pct50、pct75、pct90、pct95。

Action详情

图片

  • 页面左侧展示按照排序依据展示的列表,包括Action名称、pid、排序指标名和指标取值。
  • 模块内展示的指标包括:平均触发请求数、JS错误总数、LongTask数。
  • 单击跳转至数据探索可跳转到数据探索Actions并携带筛选条件,通过查看瀑布图进一步分析。
  • 趋势图可以切换展示响应耗时LongTask耗时。聚合的堆叠图清晰的反映整体耗时情况。
    • 请求耗时:Action花费在请求上的时间。请求耗时占比高,可以优化请求耗时,提高用户体验。
    • 前端耗时:操作耗时-请求耗时。
    • LongTask耗时:Action从开始到结算过程中,发生LongTask耗时的总和。LongTask耗时高,可以优化代码逻辑来减少longtask,提高用户体验。

Action触发数

图片
Action触发数结合耗时较长的LongTask,可以有效帮助定位卡顿的原因。

JS错误列表

图片

  • JS错误列表展示的是与当前Action关联的所有JS错误的数据,用于定位具体哪些JS错误造成用户交互不可用。
  • JS错误列表包括:错误内容、起止时间、错误数、影响用户数和issue状态。
  • 单击错误内容可以跳转到对应的JS错误详情页。

请求列表

图片

  • 请求列表展示与当前Action关联的所有请求的数据,用于定位具体哪些请求影响了用户体验。
  • 请求列表包括:请求路径、请求耗时。
  • 单击请求路径可以跳转到请求列表,并带上请求路径和请求域名。