如何使用阿里云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，如下：

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的会话列表信息，根据页面完全加载时间从高到底排序，排查页面资源加载情况

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

附录

• 官网文档介绍
• 阿里云ARMS前端监控官网

---

本文作者：中间件小哥

阅读原文

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