网站常见问题1分钟定位 - 如何使用阿里云ARMS轻松重现用户浏览器问题

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
云消息队列RocketMQ,TPS总和2000次/秒
简介: 客户投诉不断,本地却无法重现?页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下:页面是在用户端的浏览器上加载执行,复现困难页面上线前,开发同学都会进行测试,在测试环境下页面加载一般都是正常的才会正式上线。
+关注继续查看

客户投诉不断,本地却无法重现?

页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下:

  1. 页面是在用户端的浏览器上加载执行,复现困难

    • 页面上线前,开发同学都会进行测试,在测试环境下页面加载一般都是正常的才会正式上线。用户在访问页面时,页面的加载是在用户端的浏览器上进行的,由于页面的加载耗时与地域、网络情况、浏览器或者运营商等有关系,想知道用户在访问页面时的具体情况,复现是非常困难的。
  2. 监控信息缺少,导致无法深入排查

    • 大部分前端监控会通过PerformanceTiming对象,获取完整的页面加载耗时信息,但这类监控就缺失了页面静态资源的加载情况,无法直接复现现场,从而无法深入定位性能瓶颈。

为了方便用户更快地定位性能瓶颈,阿里云ARMS前端监控推出一新功能: 会话追踪,提供页面静态资源加载的性能瀑布图,根据页面性能数据可深入定位页面资源加载情况。

如何通过会话追踪帮助你快速定位问题

在阿里云ARMS前端监控SDK上将sendResource配置为true,重新部署应用后,在页面onload时会上报当前页面加载的静态资源信息。从而在阿里云前端监控平台即可以对慢页面加载问题快速进行定位。

SDK配置

在阿里云ARMS前端监控SDK部分,默认是不上报页面加载的静态资源信息的,如果想获取页面加载的静态资源信息,只需在SDK的config部分将sendResource配置为true,重新部署后,就可以上报相关信息。具体配置如下:

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"atc889zkcf@8cc3f63543da641",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

注意:静态资源加载信息的上报是在页面onload时会触发,上报信息量较大,如果对于页面性能要求很高的应用,可以不开启该配置。

问题排查过程

1. 发现问题

进入访问速度菜单后,发现页面的性能较差,11点钟的页面完全加载时间达到35s,如下:

image | left

2. 慢页面会话追踪

在慢页面会话追踪模块,提供该页面在指定时间段内加载较慢的TOP20,这样可以快速发现哪些会话加载较慢,如下图所示。
在该模块,你可以快速发现在11点钟有一次会话的页面加载时间在36.72s,这次访问应该是直接导致页面加载时间详情中折线图突然暴增的原因了。

image | left

其中在在模块有7次会话访问的页面加载时间在7s以上,点击对应的页面,可以直接进入到会话详情页面,从而直观查看页面静态资源加载的瀑布图。

image | left

通过页面资源加载的瀑布图,可以快速定位到资源加载的性能瓶颈,同时可以查看本次访问的客户端IP地址、浏览器、操作系统等UA信息,从而进一步确认是由于网络原因还是其他原因导致的,针对性进行相应的优化。

image | left

3. 其他发现问题入口

会话追踪

也可以进入“会话追踪”菜单,可以看到该应用下的会话列表。会话列表中会根据页面完全加载时间排序,展示TOP100,帮助用户可以快速发现耗时较长的会话信息。同时支持按照页面、会话Id、浏览器、浏览器版本号进行过滤,展示相关的会话信息。点击操作后,是该会话的页面资源加载详情。

image | left

访问明细

如果当前会话列表中无法找到你要排查的会话信息,可以通过访问明细查找到相应的日志详细信息,在param中找到对应的sid即会话Id,然后在会话列表中查找相应的会话Id,即可以定位到想排查的会话信息。

例如:在已知用户的客户端IP的情况下,想定位相应的会话信息,即可以在访问明细中,通过t=res and 117.136.32.110 进行搜索,找到对应的会话Id。

image | left

根据查找到的会话Id, 就可以在会话列表中进行过滤,定位到具体的会话内容。

image | left

使用入口指南

  1. 进入访问速度菜单,如果发现页面性能较差,可以在"慢页面会话追踪Top20"中查看访问较慢的会话情况

    • 点击详情后,可以查看具体的页面资源加载瀑布图
    • 如果Top20不满足,可以点击"更多",从而进入"会话列表"
  2. 进入会话追踪菜单,展示的是TOP100的会话列表信息,根据页面完全加载时间从高到底排序,排查页面资源加载情况

image | left

至此,慢页面会话追踪功能及使用方法介绍完成。该功能可以帮助你复现用户在访问页面时的页面资源加载情况,快速定位性能瓶颈问题。

附录

相关文章
|
26天前
|
监控 Java 调度
阿里云 ARMS 应用监控重磅支持 Java 21
阿里云 ARMS 应用监控重磅支持 Java 21
48249 33
|
2月前
|
监控 前端开发
阿里云 ARMS
阿里云 ARMS
110 1
|
7月前
《阿里云产品手册2022-2023 版》——应用实时监控服务
《阿里云产品手册2022-2023 版》——应用实时监控服务
|
7月前
|
监控 Java
《2021 阿里云可观测技术峰会演讲实录合辑(下)》——一、基于OPLG从0到1构建统一可观测平台实践——场景实践1:如何基于OpenTemeletry和ARMS实现全链路的追踪和应用诊断【上】
《2021 阿里云可观测技术峰会演讲实录合辑(下)》——一、基于OPLG从0到1构建统一可观测平台实践——场景实践1:如何基于OpenTemeletry和ARMS实现全链路的追踪和应用诊断【上】
289 0
|
7月前
|
Arthas 缓存 Prometheus
《2021 阿里云可观测技术峰会演讲实录合辑(下)》——一、基于OPLG从0到1构建统一可观测平台实践——场景实践1:如何基于OpenTemeletry和ARMS实现全链路的追踪和应用诊断【下】
《2021 阿里云可观测技术峰会演讲实录合辑(下)》——一、基于OPLG从0到1构建统一可观测平台实践——场景实践1:如何基于OpenTemeletry和ARMS实现全链路的追踪和应用诊断【下】
374 0
|
7月前
|
Prometheus 监控 Cloud Native
《2021 阿里云可观测技术峰会演讲实录合辑(下)》——一、基于OPLG从0到1构建统一可观测平台实践——场景实践5:ARMS提供的用户体验监控
《2021 阿里云可观测技术峰会演讲实录合辑(下)》——一、基于OPLG从0到1构建统一可观测平台实践——场景实践5:ARMS提供的用户体验监控
261 0
|
11月前
|
监控 前端开发 中间件
阿里云互联网中间件五剑客之——业务实时监控服务 ARMS
阿里云互联网中间件五剑客之——业务实时监控服务 ARMS自制脑图, 业务实时监控服务 (Application Real-Time Monitoring Service, 简称ARMS) 是一款集前端监控,应用监控,自定义监控为一体的端到端一体化实时监控产品。通过该产品,用户可以基于海量的数据迅速便捷地通过定制化为企业打造集前端体验,应用性能和异常,以及特定业务属性监控为一体的立体化监控方案和响应能力。
903 0
阿里云互联网中间件五剑客之——业务实时监控服务 ARMS
|
存储 SQL 运维
国内唯一|阿里云入选 Gartner 应用性能监控与可观测魔力象限
近期,Gartner 发布《2022 Gartner 应用性能监控与可观测魔力象限》(Magic Quadrant for Application Performance Monitoring and Observability )。报告显示,阿里云入选该象限,这是中国唯一入选厂商。
国内唯一|阿里云入选 Gartner 应用性能监控与可观测魔力象限
|
监控 JavaScript 前端开发
如何引入阿里云ARMS前端监控?
如何引入阿里云ARMS前端监控?
|
运维 Prometheus 监控
阿里云入选2021 Gartner APM 魔力象限,国内唯一入选云厂商
随着企业数字化转型进程加速,企业各类应用程序的性能状况直接影响了数字化业务的顺利开展,APM 产品的市场需求仍在不断扩大。
4217 0
相关产品
云消息队列 Kafka 版
应用高可用服务
企业级分布式应用服务
推荐文章
更多