如何使用阿里云ARMS轻松重现用户浏览器问题

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

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

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

2. 慢页面会话追踪

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

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

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

3. 其他发现问题入口

会话追踪

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

访问明细

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

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

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

使用入口指南

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

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

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

 


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

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

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

相关文章

云+X案例展 | 民生类:智领云数据中台为“健康武汉”增砖添瓦

本案例由智领云投递并参与评选&#xff0c;CSDN云计算独家全网首发&#xff1b;更多关于【云X 案例征集】的相关信息&#xff0c;点击了解详情丨挖掘展现更多优秀案例&#xff0c;为不同行业领域带来启迪&#xff0c;进而推动整个“云行业”的健康发展。与前一个十年相比&#…

root - 计算机术语,root什么意思

root什么意思root指的是你有权限可以再系统上对所有档案有 "读" "写" "执行"的权力root这名词常出现再Linux & unix上&#xff0c;Android是架构再Liinux上面所有才会有root这名词而root相当于windows 上的administration&#xff0c;一个管…

阿里毕玄:程序员如何提升自己的硬实力

从业余程序员到职业程序员 程序员刚入行时&#xff0c;我觉得最重要的是把自己培养成职业的程序员。 我的程序员起步比同龄人都晚了很多&#xff0c;更不用说现在的年轻人了。我大学读的是生物专业&#xff0c;在上大学前基本算是完全没接触过计算机。军训的时候因为很无聊&a…

一枚戒指,一场仪式,这件事阿里巴巴坚持了15年

为入职满五年的员工举行盛大仪式&#xff0c;为他们每个人戴上私人订制的戒指&#xff0c;是阿里巴巴坚持了15年“五年陈”的传统。1月22日&#xff0c;阿里集团为最新一季的“五年陈”们举行了授戒仪式。 2018五年陈小档案 2018年&#xff0c;有1867位同学新晋加入五年陈的队…

云+X案例展 | 金融类:荣之联助力君康人寿构建新一代数据中心

本案例由荣之联投递并参与评选&#xff0c;CSDN云计算独家全网首发&#xff1b;更多关于【云X 案例征集】的相关信息&#xff0c;点击了解详情丨挖掘展现更多优秀案例&#xff0c;为不同行业领域带来启迪&#xff0c;进而推动整个“云行业”的健康发展。近年来&#xff0c;互联…

计算机专业实践试题,计算机专业实践综合试题答案..doc

2011年青岛市高职对口第二次模拟考试计算机类专业实践综合试题答案及评分标准一、单项选择题(本大题共50个小题&#xff0c;每小题2分&#xff0c;共100分)12345678910CADCCBBDCC11121314151617181920DBDDBBCDDC21222324252627282930BACBCCBCDA31323334353637383940BACBBCDBDA4…

java 实现jpg、png、tif、gif 任意图像格式转换

根据企业真实需求背景&#xff0c;java实现jpg、png、tif、gif 任意图像格式转换 方法名说明imageConvertCommon任意图像转换通用类imageConvertToGIF图像任意格式转gifimageConvertToTif图像任意格式转tifimageConvertToJPG图像任意格式转jpgimageConvertToPNG图像任意格式转…

MaxCompute studio与权限那些事儿

背景知识 MaxCompute拥有一套强大的安全体系&#xff0c;来保护项目空间里的数据安全。用户在使用MaxCompute时&#xff0c;应理解权限的一些基本概念&#xff1a; 权限可分解为三要素&#xff0c;即主体&#xff08;用户账号或角色&#xff09;&#xff0c;客体&#xff08;…

集群、分布式、微服务概念和区别

概念: 集群是个物理形态&#xff0c;分布式是个工作方式。 1.分布式&#xff1a;一个业务分拆多个子业务&#xff0c;部署在不同的服务器上 2.集群&#xff1a;同一个业务&#xff0c;部署在多个服务器上 分布式是指将不同的业务分布在不同的地方。而集群指的是将几台服务器集中…

机器学习数据集哪里找:最佳数据集来源盘点

很难找到一个特定的数据集来解决对应的机器学习问题&#xff0c;这是非常痛苦的。下面的网址列表不仅包含用于实验的大型数据集&#xff0c;还包含描述、使用示例等&#xff0c;在某些情况下还包含用于解决与该数据集相关的机器学习问题的算法代码。 1 -Kaggle数据集 网址&am…

计算机常用工具软件教案,常用工具软件教案.doc

文档介绍&#xff1a;课题:网络遨游——网络软件教学目的熟练掌握下载软件的使用方法。熟练掌握邮件处理软件的使用方法。熟练掌握FTP工具软件的使用方法。熟练掌握搜索引擎的使用方法。熟练掌握网络加速软件的使用方法。教学重点、难点熟练掌握迅雷、Foxmail、百度搜索引擎等网…

腾讯游戏与NVIDIA合作发布START云游戏服务

腾讯游戏和NVIDIA于今日宣布了一项将电脑游戏带入云端的合作。 NVIDIA的GPU技术为腾讯游戏的START云游戏服务赋力&#xff0c;该服务已从今年初开始进入测试阶段。START使游戏玩家可以随时随地&#xff0c;即使是在配置不足的设备上也能玩AAA游戏。腾讯游戏计划将扩展其云游戏…

pandas指南:做更高效的数据科学家

Python是开源的&#xff0c;所以有很多开源固有的问题。如果你是Python新手&#xff0c;很难知道针对特定任务的包哪个是最好的。你需要有经验的人来告诉你。今天我要告诉你们的是&#xff1a;在数据科学中&#xff0c;有一个软件包是你们绝对需要学习的&#xff0c;那就是pand…

java实现zip压缩文件(同一文件夹下的多个文件夹打成一个zip包)

这2个工具类都推荐使用统一个场景的不通过写法 推荐第一种 package com.gblfy.test;import java.io.BufferedInputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.util.zip.CRC32; import java.util.zip.Checke…

计算机操作与规范,电脑操作基本知识(精华版)

一、快速操作规程操作五招1、按“Alt”键然后用鼠标双击文件或文件夹即可快速打开其属性。2、双击程序窗口的标题栏&#xff0c;窗口可在最大化与常规之间快速变换3、按键(或)即可快速把文件或文件夹不用进“回收站”而直接删除。4、用鼠标左键拖动文件到桌面&#xff0c;即可在…

一位技术校招生在支付宝的成长笔记

哪有那么多的“逆袭”&#xff0c;唯有努力与坚持&#xff0c;机会就会在前方。 鲁直&#xff0c;1989年生&#xff0c;本科毕业于浙江工业大学&#xff0c;之后被校招进阿里巴巴。虽然&#xff0c;今年刚刚30岁&#xff0c;但他已是蚂蚁金服SOFA中间件开源负责人。 看到这个开…

NVIDIA向交通运输行业开源其自动驾驶汽车深度神经网络

NVIDIA今日宣布&#xff0c;在NVIDIA GPU Cloud (NGC)容器注册上&#xff0c;向交通运输行业开源NVIDIA DRIVE™自动驾驶汽车开发深度神经网络。 NVIDIA DRIVE已成为自动驾驶汽车开发的行业标准&#xff0c;并且被汽车制造商、卡车制造商、自动驾驶出租车公司、软件公司和大学…

java.sql.SQLException: ORA-01691: Lob 段 SONARQUBE2.SYS_LOB0000119128C00008$$ 无法通过 128 (在表空间 USERS 中

文章目录一、场景浮现1. 问题详情2. 问题描述3. 问题原因二、解决方案2.1. 查看表空间的名字及文件在哪2.2. 查询表空间使用情况2.3. 解决方法一、场景浮现 1. 问题详情 2. 问题描述 java.sql.SQLException: ORA-01691: Lob 段 SONARQUBE2.SYS_LOB0000119128C00008$$ 无法通过…

计算机2级什么时间考,全国计算机2级考试什么时间出成绩单

2019-06-20 01:27齐新伟查分时间有关成绩查询的具体事宜&#xff1a;1、全国计算机等级考试的成绩将在考后约45-90天内得到成绩(不同地区公布成绩的时间将有所差异)&#xff0c;查询方法有声讯电话(快、收费)、考点成绩单报送(慢、免费)、网上查询(部分省市开通&#xff0c;快&…

开发函数计算的正确姿势 —— 安装第三方依赖

前言 首先介绍下在本文出现的几个比较重要的概念&#xff1a; 函数计算&#xff08;Function Compute&#xff09;: 函数计算是一个事件驱动的服务&#xff0c;通过函数计算&#xff0c;用户无需管理服务器等运行情况&#xff0c;只需编写代码并上传。函数计算准备计算资源&am…