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

摘要： 這是阿里中間件 ARMS 團隊推出的 「網站常見問題1分鐘定位」系列文章的第三篇，做者慕扉。 » 第一篇傳送門 » 第二篇傳送門 1、客戶投訴不斷，本地卻沒法重現？ 頁面加載較慢是用戶常常會反饋的問題，也是前端很是關注的問題之一。

1、客戶投訴不斷，本地卻沒法重現？
頁面加載較慢是用戶常常會反饋的問題，也是前端很是關注的問題之一。但定位、排查解決這類問題就一般會花費很是多的時間，主要緣由以下：

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

頁面上線前，開發同窗都會進行測試，在測試環境下頁面加載通常都是正常的纔會正式上線。用戶在訪問頁面時，頁面的加載是在用戶端的瀏覽器上進行的，因爲頁面的加載耗時與地域、網絡狀況、瀏覽器或者運營商等有關係，想知道用戶在訪問頁面時的具體狀況，復現是很是困難的。

1. 監控信息缺乏，致使沒法深刻排查

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

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

2、阿里雲ARMS前端監控-會話追蹤幫助你快速定位問題
在阿里雲ARMS前端監控SDK上將sendResource配置爲true，從新部署應用後，在頁面onload時會上報當前頁面加載的靜態資源信息。從而在阿里雲前端監控平臺便可以對慢頁面加載問題快速進行定位。

SDK配置

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

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

3、問題排查過程

1. 發現問題

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

1. 慢頁面會話追蹤

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

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

經過頁面資源加載的瀑布圖，能夠快速定位到資源加載的性能瓶頸，同時能夠查看本次訪問的客戶端IP地址、瀏覽器、操做系統等UA信息，從而進一步確認是因爲網絡緣由仍是其餘緣由致使的，針對性進行相應的優化。

1. 其餘發現問題入口

會話追蹤

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

訪問明細

若是當前會話列表中沒法找到你要排查的會話信息，能夠經過訪問明細查找到相應的日誌詳細信息，在param中找到對應的sid即會話Id，而後在會話列表中查找相應的會話Id，便可以定位到想排查的會話信息。
例如：在已知用戶的客戶端IP的狀況下，想定位相應的會話信息，便可以在訪問明細中，經過t=res and 117.136.32.110 進行搜索，找到對應的會話Id。

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

使用入口指南

一、進入訪問速度菜單，若是發現頁面性能較差，能夠在"慢頁面會話追蹤Top20"中查看訪問較慢的會話狀況

點擊詳情後，能夠查看具體的頁面資源加載瀑布圖
若是Top20不知足，能夠點擊"更多"，從而進入"會話列表"
二、進入會話追蹤菜單，展現的是TOP100的會話列表信息，根據頁面徹底加載時間從高到底排序，排查頁面資源加載狀況。

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