如何使用阿里雲ARMS輕鬆重現用戶瀏覽器問題

來自專欄前端監控

一、客戶投訴不斷，本地卻無法重現？

頁面載入較慢是用戶經常會反饋的問題，也是前端非常關注的問題之一。但定位、排查解決這類問題就通常會花費非常多的時間，主要原因如下：

1. 頁面是在用戶端的瀏覽器上載入執行，復現困難

頁面上線前，開發同學都會進行測試，在測試環境下頁面載入一般都是正常的才會正式上線。用戶在訪問頁面時，頁面的載入是在用戶端的瀏覽器上進行的，由於頁面的載入耗時與地域、網路情況、瀏覽器或者運營商等有關係，想知道用戶在訪問頁面時的具體情況，復現是非常困難的。

2. 監控信息缺少，導致無法深入排查

大部分前端監控會通過PerformanceTiming對象，獲取完整的頁面載入耗時信息，但這類監控就缺失了頁面靜態資源的載入情況，無法直接復現現場，從而無法深入定位性能瓶頸。

為了方便用戶更快地定位性能瓶頸，阿里雲ARMS前端監控推出一新功能: 會話追蹤，提供頁面靜態資源載入的性能瀑布圖，根據頁面性能數據可深入定位頁面資源載入情況。

阿里雲ARMS前端監控-會話追蹤幫助你快速定位問題

在阿里雲ARMS前端監控SDK上將sendResource配置為true，重新部署應用後，在頁面onload時會上報當前頁面載入的靜態資源信息。從而在阿里雲前端監控平台即可以對慢頁面載入問題快速進行定位。

SDK配置

在阿里雲ARMS前端監控SDK部分，默認是不上報頁面載入的靜態資源信息的，如果想獲取頁面載入的靜態資源信息，只需在SDK的config部分將sendResource配置為true，重新部署後，就可以上報相關信息。具體配置如下：

1. <script>
2. !(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};
3. with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
4. })(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
5. </script>

注意：靜態資源載入信息的上報是在頁面onload時會觸發，上報信息量較大，如果對於頁面性能要求很高的應用，可以不開啟該配置。

問題排查過程

1. 發現問題

進入訪問速度菜單後，發現頁面的性能較差，11點鐘的頁面完全載入時間達到35s，如下：

2. 慢頁面會話追蹤

在慢頁面會話追蹤模塊，提供該頁面在指定時間段內載入較慢的TOP20，這樣可以快速發現哪些會話載入較慢，如下圖所示。 在該模塊，你可以快速發現在11點鐘有一次會話的頁面載入時間在36.72s，這次訪問應該是直接導致頁面載入時間詳情中折線圖突然暴增的原因了。

其中在在模塊有7次會話訪問的頁面載入時間在7s以上，點擊對應的頁面，可以直接進入到會話詳情頁面，從而直觀查看頁面靜態資源載入的瀑布圖。

通過頁面資源載入的瀑布圖，可以快速定位到資源載入的性能瓶頸，同時可以查看本次訪問的客戶端IP地址、瀏覽器、操作系統等UA信息，從而進一步確認是由於網路原因還是其他原因導致的，針對性進行相應的優化。

3. 其他發現問題入口

會話追蹤

也可以進入「會話追蹤」菜單，可以看到該應用下的會話列表。會話列表中會根據頁面完全載入時間排序，展示TOP100，幫助用戶可以快速發現耗時較長的會話信息。同時支持按照頁面、會話Id、瀏覽器、瀏覽器版本號進行過濾，展示相關的會話信息。點擊操作後，是該會話的頁面資源載入詳情。

訪問明細

如果當前會話列表中無法找到你要排查的會話信息，可以通過訪問明細查找到相應的日誌詳細信息，在param中找到對應的sid即會話Id，然後在會話列表中查找相應的會話Id，即可以定位到想排查的會話信息。

例如：在已知用戶的客戶端IP的情況下，想定位相應的會話信息，即可以在訪問明細中，通過 t=resand 117.136.32.110 進行搜索，找到對應的會話Id。

根據查找到的會話Id, 就可以在會話列表中進行過濾，定位到具體的會話內容。

使用入口指南

1. 進入訪問速度菜單，如果發現頁面性能較差，可以在"慢頁面會話追蹤Top20"中查看訪問較慢的會話情況

• 點擊詳情後，可以查看具體的頁面資源載入瀑布圖
• 如果Top20不滿足，可以點擊"更多"，從而進入"會話列表"

1. 進入會話追蹤菜單，展示的是TOP100的會話列表信息，根據頁面完全載入時間從高到底排序，排查頁面資源載入情況

至此，慢頁面會話追蹤功能及使用方法介紹完成。該功能可以幫助你復現用戶在訪問頁面時的頁面資源載入情況，快速定位性能瓶頸問題。

附錄

• 官網文檔介紹
• 阿里雲ARMS前端監控官網

推薦閱讀：