博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何使用阿里云ARMS轻松重现用户浏览器问题
阅读量:6799 次
发布时间:2019-06-26

本文共 1695 字,大约阅读时间需要 5 分钟。

hot3.png

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

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

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

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

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

为了方便用户更快地定位性能瓶颈,阿里云ARMS前端监控推出一新功能: 

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

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

SDK配置

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

注意:静态资源加载信息的上报是在页面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

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

附录

 

转载于:https://my.oschina.net/u/1464083/blog/3004957

你可能感兴趣的文章
卫翰思治下的爱立信:被华为全面超越 近一年股价跌40%
查看>>
超融合设备如何影响私有云部署
查看>>
鳄鱼还是木头?亚信安全提醒:APT攻击防范要当心“水坑”
查看>>
互联健康 共融共生
查看>>
传郭台铭已与夏普高层会晤 商讨收购事宜
查看>>
政府单位专享 国内“特供版”Windows 10真的来了
查看>>
中国百毫秒量子存储器 《自然》:非凡绝技
查看>>
小鱼易连打造基于互联网环境下的高清视频会议终端
查看>>
微型传感器探测屁的来源:可为医疗提供依据
查看>>
历史性时刻!亚马逊股价突破1000美元
查看>>
互联网如何打造智慧医疗:边界确定价值
查看>>
LinkedIn高管告诫年轻人:设定好目标 不要急于求成
查看>>
科林环保子公司签下6.3亿光伏合作协议
查看>>
黑客入侵凯特王妃妹妹账号盗数千照片 欲卖给媒体
查看>>
【人生苦短,我用Python】Python免费精品课连载(1)——Python入门
查看>>
用物联网新技术保市民平安
查看>>
IBM向认知转型 选择混合云路径
查看>>
智能安防市场的痛点到底在哪里?2016欧美消费者调查问卷解读!
查看>>
对号入座,企业物联网化的正确路径是什么?
查看>>
微软宣布免费开源的NuGet包管理器下载量已破10亿
查看>>