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

这是阿里中间件 ARMS 团队推出的 “网站常见问题1分钟定位”系列文章的第三篇,作者慕扉。

» 第一篇传送门

» 第二篇传送门

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

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

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

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

2. 监控信息缺少,导致无法深入排查

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

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

二、阿里云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("c
rossorigin","",src=d)})(wi
ndow,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

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

三、问题排查过程

1. 发现问题

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

TB19YNqpbArBKNjSZFLXXc_dVXa_1573_556

2. 慢页面会话追踪

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

TB1li5vo9YTBKNjSZKbXXXJ8pXa_1565_498

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

TB1keH_rnCWBKNjSZFtXXaC3FXa_1564_888

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

TB12hS5mwZC2uNjSZFnXXaxZpXa_1600_531

3. 其他发现问题入口

会话追踪

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

TB1XRtkroOWBKNjSZKzXXXfWFXa_1572_637

访问明细

如果当前会话列表中无法找到你要排查的会话信息,可以通过访问明细查找到相应的日志详细信息,在param中找到对应的sid即会话Id,然后在会话列表中查找相应的会话Id,即可以定位到想排查的会话信息。
例如:在已知用户的客户端IP的情况下,想定位相应的会话信息,即可以在访问明细中,通过t=res and 117.136.32.110 进行搜索,找到对应的会话Id。

TB1tx40roOWBKNjSZKzXXXfWFXa_1600_587

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

TB1IuQFrb3nBKNjSZFMXXaUSFXa_1600_535

使用入口指南

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

  • 点击详情后,可以查看具体的页面资源加载瀑布图
  • 如果Top20不满足,可以点击"更多",从而进入"会话列表"

2、进入会话追踪菜单,展示的是TOP100的会话列表信息,根据页面完全加载时间从高到底排序,排查页面资源加载情况。

TB1KPyMorsrBKNjSZFpXXcXhFXa_721_223

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


原文链接
本文为云栖社区原创内容,未经允许不得转载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/521104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国内首家!平头哥宣布开源RISC-V内核MCU芯片设计平台;IBM驳斥谷歌量子霸权主张;Facebook将赔偿350亿美元……...

关注并标星星CSDN云计算极客头条&#xff1a;速递、最新、绝对有料。这里有企业新动、这里有业界要闻&#xff0c;打起十二分精神&#xff0c;紧跟fashion你可以的&#xff01;每周两次&#xff0c;打卡即read更快、更全了解泛云圈精彩newsgo go go 小米 MIX4 概念图&#xff0…

把百度网站设为首页_大仙SEO:如何解决网站首页百度收录后被删除?【SEO案例】...

前天(5/20)看数据的时候&#xff0c;发现5118数据直线下降&#xff0c;跌的有些厉害&#xff0c;猜测网站应该出问题了。这个时候不要慌(内心实则慌的一批)&#xff0c;在等等看&#xff0c;会不会是百度自身的一些调整。算了分析分析网站吧&#xff01;site看网站数据&#xf…

技术选型:Sentinel vs Hystrix

这是围绕 Sentinel 的使用场景、技术对比和实现、开发者实践等维度推出的系列文章的第三篇。 第一篇回顾&#xff1a; Dubbo 的流量防卫兵 | Sentinel如何通过限流实现服务的高可用性 - 传送门 第二篇回顾&#xff1a; RocketMQ 的保险丝| Sentinel 如何通过匀速请求和冷…

rpm 安装和卸载

#把包名相关的包都列出来 rpm -qa | grep 包名 #你想卸载的软件&#xff0c;后面是包名称&#xff0c;最后的版本号是不用打的 rpm -e 文件名#rpm安装 rpm -ivh erlang-21.1-1.el7.centos.x86_64.rpm rpm -ivh rabbitmq-server-3.7.8-1.el7.noarch.rpm rpm -ivh socat-1.7.3.…

[MaxCompute MapReduce实践]通过简单瘦身,解决Dataworks 10M文件限制问题

用户在DataWorks上执行MapReduce作业的时候&#xff0c;文件大于10M的JAR和资源文件不能上传到Dataworks&#xff0c;导致无法使用调度去定期执行MapReduce作业。 解决方案&#xff1a; 第一步&#xff1a;大于10M的resources通过MaxCompute CLI客户端上传&#xff0c; 客户…

“熬夜导致秃头”,因果关系推断说这话有问题!

扫码了解2019中国大数据技术大会&#xff08;https://t.csdnimg.cn/7yMh &#xff09;更多详情。“因果”&#xff0c;顾名思义&#xff0c;即“原因与结果”。“推理”则指“根据某个事件推导其他事件&#xff0c;即经过推测和推断得出结论的过程”。换句话说&#xff0c;就是…

java cookbook 3_CookBook/Java核心/3-Java反射.md at master · zhgdbut/CookBook · GitHub

#Java核心(三)反射Java反射给我们提供了在运行时检查甚至修改应用行为的机制。 反射是java高级的核心技术&#xff0c;所有有经验的程序员都应该理解。通过反射机制&#xff0c;我们可以在运行时检视 类、接口、枚举&#xff0c;获得他们的结构、方法以及属性信息&#xff0c;即…

大数据可视化html模板开源_8个可靠好用的开源数据可视化工具推荐

数据可视化在数据科学领域中发挥着重要的作用。在不清楚数据的情况下&#xff0c;要监视和调整数据以使其按照应有的方式执行并不容易。这就是数据可视化发挥作用的地方&#xff0c;它把收集到的数据放到一个可视的上下文中&#xff0c;使数据更容易找出模式、跟踪趋势等。但是…

MaxCompute - ODPS重装上阵 第五弹 - SELECT TRANSFORM

MaxCompute&#xff08;原ODPS&#xff09;是阿里云自主研发的具有业界领先水平的分布式大数据处理平台, 尤其在集团内部得到广泛应用&#xff0c;支撑了多个BU的核心业务。 MaxCompute除了持续优化性能外&#xff0c;也致力于提升SQL语言的用户体验和表达能力&#xff0c;提高…

RabbitMQ 最新版本 下载、部署 _rpm版本(CentOS7环境)

文章目录1. 安装rabbitmq前要准备的基础环境2. wget 远程下载安装包2. rpm安装软件3. 编辑配置文件修改密码4. 启动RabbitMQ5. 查看RabbitMQ是否启动6. 安装RabbitMQ 管控台7. 浏览器访问&#xff1a;8. 登录1. 安装rabbitmq前要准备的基础环境 yum install build-essential o…

MaxCompute存储力持续升级,每年节省不止一个亿

数据是开启全新洞察和机器智能创新的基础&#xff0c;拥有高性能、稳定、可扩展性强的存储能力和充沛的计算力&#xff0c;才能全面释放数据价值。 阿里巴巴大数据计算平台MaxCompute&#xff0c;作为阿里巴巴统一的计算平台&#xff0c;支持了整个阿里巴巴集团内部几乎99%的数…

freemarker java类_在freemarker使用java类方法

1 要想使用Freemarker支持的自定义方法&#xff0c;需要实现freemarker.template.TemplateMethodModel接口或 TemplateMethodModelEx接口参考示例如下&#xff1a;java 代码&#xff1a;public class Object2HashMap implements TemplateMethodModelEx {private static final L…

【10.23头条】阿里云存储负责人吴结生:安全可靠是云存储立身之本, 智能技术将激活存储技术新变革...

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 刘丹责编 | 阿秃人类以日新月异的速度刷新着科技的成果&#xff0c;其中存储的发展历史尤其悠久&#xff0c;堪称万年进化史。自文明诞生以来&#xff0c;我们就一直在寻求能够更有效存储信息的方式&#xff0c;从4万年前的…

专访20年技术老兵云郎:16年峰回路,每一步都是更好的沉淀

从技术研发到产品经理 3次峰回路转 这条路&#xff0c;他走了16年 一个懂技术的产品 更有底气和研发“叫板” 一个具备产品思维的技术 更明白未来的方向 张良模&#xff0c;花名云郎。1997年入行做通信软件研发&#xff1b;8年后转型IT行业&#xff0c;曾任Oracle&#xff08;甲…

子网规划与组网实验_【干货】从0到1,“大型WLAN组网”基础知识分享~

点击蓝字 关注我们 目前&#xff0c;大多数企业办公环境同时使用有线和无线网络来支撑业务。办公区在提供有线网口的同时&#xff0c;也采用全Wi-Fi覆盖&#xff0c;办公环境更为开放和智能。未来&#xff0c;企业云桌面办公、智真会议、4K视频等大带宽业务将从有线网络迁移至无…

搭建集群 RabbitMQ SHELL脚本实战_03

接上一篇&#xff1a; (企业级) 搭建集群RabbitMQ 快速下载、安装、配置、部署_02 文章目录一、shell脚本说明1. 选择脚本的原因2. 脚本总览二、脚本实战2.1. 工具依赖包2.2. wget 远程下载安装包2.3. rpm安装软件2.4. 编辑配置文件修改密码2.5. 启动RabbitMQ2.6. 查看RabbitMQ…

这是一段关乎你的代码:你的未来 我们正在参与

温暖小视频 ~ 让2980个孩子回家团圆 “十五年了&#xff0c;只有在路上&#xff0c;我才感觉我是一个父亲。” 2015年初电影《失孤》热映&#xff0c;一辆摩托车、一张旗子、一个背包&#xff0c;一个父亲15年走遍大江南北寻找被拐卖儿子的故事&#xff0c;戳动了很多人的心弦…

java 反射类 实例化_java-如何在Android上通过反射实例化成员类

我有一个保存/加载框架,该框架应该保存任意对象图.这包括非静态嵌套类的实例.嵌套类require为其创建它们的父类的实例所拥有,并且嵌套类使用合成字段知道它属于哪个实例.作为一个简单的例子,我介绍这个类&#xff1a;public class Foo implements Savable {private class Bar i…

欧洲为何没有牛逼的互联网公司

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 挖数责编 | 阿秃截至2018年底&#xff0c;全球市值最大的21家互联网科技公司里边&#xff0c;美国有12家&#xff0c;中国有9家&#xff0c;没有一家欧洲公司。在国内BAT搅动风云&#xff0c;美国亚马逊的贝索斯坐上全球首富…

混合云存储开启企业上云新路径--阿里云混合云备份容灾方案发布

当前&#xff0c;数据已经成为了企业的核心资产。而如果数据中心发生故障不仅会给企业带来巨大损失&#xff0c;甚至会直接迫使企业走向倒闭。对于企业而言&#xff0c;每一字节业务数据的丢失都是一场重大的灾难&#xff01;那么&#xff0c;如何保证企业的核心数据资产不丢失…