开发者社区> 中间件小哥> 正文

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

简介: 客户投诉不断,本地却无法重现? 页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下: 页面是在用户端的浏览器上加载执行,复现困难 页面上线前,开发同学都会进行测试,在测试环境下页面加载一般都是正常的才会正式上线。
+关注继续查看

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

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

  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

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

附录

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
网站常见问题1分钟定位 - 如何使用阿里云ARMS诊断Java应用卡顿问题
    不要慌,上面只是一张贴图。     为什么“慢”那么难查   网站卡顿、页面加载过慢是互联网应用最常见的问题之一。排查、解决这类问题通常会花费开发运维人员大量的时间,通常是因为以下三个原因: 应用链路太长,无从下手。
2582 0
网站常见问题1分钟定位 - 如何使用阿里云ARMS轻松重现用户浏览器问题
客户投诉不断,本地却无法重现? 页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下: 页面是在用户端的浏览器上加载执行,复现困难 页面上线前,开发同学都会进行测试,在测试环境下页面加载一般都是正常的才会正式上线。
9851 0
网站常见问题1分钟定位(二)- 如何使用阿里云ARMS诊断Java服务端报错问题
这是ARMS团队推出的“网站常见问题1分钟定位系列篇”第二文。
3485 0
ThinkPHP6.0 发送阿里云短信
一、登录阿里云,注册短信服务 1.阿里云短信服务:dysms.console.aliyun.com/overview
12 0
Elastic-Job使用注意和说明
Elastic-Job使用注意和说明
4 0
PHP+Swoole实现微信小程序客服即时通信聊天功能
PHP7安装Swoole扩展 PHP swoole 扩展下载地址 Github:github.com/swoole/swoo… php官方扩展库:pecl.php.net/package/swo… 开源中国:git.oschina.net/swoole/swoo…
7 0
MacOs M1 芯片分布式搭建 Nginx+PHP+MySQL和多站点域名访问
一、安装Nginx 问题:Mac 在安装nginx之前记得把原本的apache2给卸载删除了,要不然后期会出现端口号被占用,或者有时候nginx用不了
3 0
教程 - Win 11 安装 wsa 安卓虚拟机
先决条件 Windows Subsystem for Android 可用于 Windows 11 上的公共预览版。 你的设备必须满足以下特定要求:设备要求。 目前已知可运行在 Intel(英特尔)、AMD 和 Qualcomm(高通) 平台且符合条件的设备上。 由于 Windows 11 和 与之对应的 Amazon Appstore 目前仅在美国提供。简而言之,要抢先体验安卓子系统,需要在设置里面,选择“时间和语言”-“语言和区域”-“国家或地区”选择美国后重启计算机。
6 0
Markdown 拓展:Gitlab/Github 开启 UML 图支持
为什么需要它 一些可视化工具再给我们带来直观性的同时,也增加了操作的难度,需要精细地调整组件的大小和样式,更多的时候,我们不是为了写一份漂亮的报告而画流程图,只是需要便捷地向他人分享自己的 idea,在这样的需求下,代码生成流程图显然更适合。
6 0
+关注
中间件小哥
阿里中间件(Aliware)官方账号
1126
文章
52
问答
来源圈子
更多
阿里云中间件主要有包含这么几个: 分布式关系型数据库DRDS_水平拆分 做数据库扩展性的 、消息队列MQ 是做消息的中间件、企业级分布式应用服务EDAS 做分布式服务的、还有一些其他的中间件,比如配置服务、缓存等等。
+ 订阅
相关文档: 全局事务服务GTS 分布式调度任务SchedulerX 云服务总线CSB
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载