全部產品
Search
文件中心

Application Real-Time Monitoring Service:JS錯誤診斷

更新時間:Jul 06, 2024

ARMS前端監控的JS錯誤診斷功能可展示JS錯誤的基本資料和分布情況,以及回溯使用者行為,協助您快速定位錯誤位置。

功能入口

  1. 登入ARMS控制台,在左側導覽列選擇前端監控 > 前端列表
  2. 前端列表頁面頂部選擇目標地區,然後單擊目標應用程式名稱。
  3. 在左側導覽列選擇應用 > JS錯誤診斷

    JS錯誤診斷頁面右上方,可以設定需要查看的時間段。

查看應用的錯誤總覽

錯誤總覽地區可展示選定時間段內的JS錯誤基本統計資訊和趨勢,包括以下指標:

  • 錯誤數:選定時間段內的JS錯誤總數。
  • JS錯誤率:選定時間段內發生過錯誤的PV佔總PV的比例。
  • 影響使用者數:JS錯誤影響到的使用者數量和比例。
圖 1. 應用的錯誤總覽應用程式層面的錯誤總覽

錯誤總覽地區可執行以下操作:

  • 將滑鼠懸浮於曲線上,曲線拐點所對應時間點的錯誤數、錯誤率、影響使用者數將顯示在浮層中。
  • 將滑鼠懸浮於曲線拐點上,當滑鼠顯示為手形指標時單擊拐點,可開啟該時間點的異常洞察對話方塊。更多資訊,請參見查看異常洞察
  • 在曲線圖地區內按住滑鼠左鍵並拖動滑鼠來框選其中一段,即可放大查看該段曲線。單擊右上方的重設縮放即可還原視圖。
說明 JS錯誤診斷頁面上,預設情況下錯誤總覽地區顯示的是應用程式層面的總覽資訊。在分頁錯誤率排行地區或異常洞察對話方塊中分頁錯誤率Top 5頁簽單擊分析後,展示的是對應頁面的總覽資訊。

查看異常洞察

異常洞察對話方塊可顯示具體時間點的JS錯誤情況,包括以下指標:

  • 錯誤數:對應時間點的JS錯誤總數。
  • JS錯誤率:對應時間點發生過錯誤的PV佔總PV的比例。
  • 影響使用者數:JS錯誤影響到的使用者數量和比例。
  • 高頻錯誤Top 5:對應時間點出現次數最多的前5種JS錯誤,包括ARMS捕捉到的JS錯誤內容、錯誤出現次數和影響使用者數。
  • 分頁錯誤率Top 5:對應時間點JS錯誤率最高的前5個頁面,包括出現過JS錯誤的頁面名稱、頁面的JS錯誤率和頁面訪問量。
JS錯誤異常洞察

異常洞察對話方塊可執行以下操作:

  • 單擊高頻錯誤Top 5頁簽,然後單擊操作列中的診斷,進入錯誤詳情頁面。更多資訊,請參見查看錯誤詳情
  • 單擊分頁錯誤率Top 5頁簽,然後單擊目標頁面操作列中的分析,可查看該頁面的錯誤總覽視圖。

查看分頁錯誤率排行

分頁錯誤率排行頁簽可按JS錯誤率從高到低的順序展示選定時間段內出現JS錯誤的頁面,包括以下指標:

  • 頁面:出現過JS錯誤的頁面。
  • 錯誤率:選定時間段內在該頁面發生過錯誤的PV佔總PV的比例。
  • 訪問量:頁面的訪問量。

單擊操作列中的分析,可查看該頁面的錯誤總覽視圖。

圖 2. 頁面的錯誤總覽頁面層面的錯誤總覽

查看高頻錯誤

高頻錯誤頁簽可按出現次數從多到少的順序展示選定時間段內的JS錯誤,包括以下指標:

  • 錯誤資訊:ARMS捕捉到的JS錯誤內容。
  • 頁面:JS錯誤出現的頁面。
  • 錯誤數:JS錯誤出現的次數。
  • 影響使用者數:JS錯誤影響到的使用者數量和比例。

單擊操作列中的診斷,進入錯誤詳情頁簽。更多資訊,請參見查看錯誤詳情

說明 JS錯誤診斷頁面上,預設情況下高頻錯誤頁簽顯示的是應用程式層面的JS錯誤。在分頁錯誤率排行地區或異常洞察對話方塊中分頁錯誤率Top 5頁簽單擊分析後,展示的是對應頁面上的JS錯誤。

查看錯誤詳情

錯誤詳情頁簽可展示以下資訊:

  • 概要資訊
    • 名稱
    • 類型
    • 時間(JS錯誤的發現時間)
    • 裝置
    • 作業系統
    • 瀏覽器
    • IP
    • 網路制式
    • 地區
    • URL
    • 檔案(出現JS錯誤的檔案路徑)
    • 應用版本號碼
  • 堆棧資訊:與JS錯誤出現位置有關的資訊。
  • 使用者行為回溯:回溯的使用者行為資訊,用於還原報錯現場。
圖 3. JS錯誤詳情頁面JS錯誤詳情頁面

錯誤詳情頁簽上可執行以下操作:

  • 如需確定JS錯誤的準確出錯位置,請在堆棧資訊地區單擊一條堆棧資訊左側的三角形表徵圖展開該行,單擊選擇Source Map,然後在Source Map檔案對話方塊中選擇現有的Source Map檔案或上傳新的Source Map檔案,最後單擊確定

    Source Map檔案

    ARMS將利用Source Map檔案還原準確的JS錯誤位置。

  • 如需查看使用者行為軌跡,請查看回溯使用者行為地區。
  • 如需查看該錯誤的分布情況,請單擊錯誤分布頁簽。

回溯使用者行為

錯誤詳情頁簽上的使用者行為回溯地區展示使用者的行為軌跡,輔助還原報錯現場。

Section Behavior

查看錯誤分布

JS錯誤診斷頁面的錯誤分布頁簽可展示具體JS錯誤的分布情況,統計維度包括:

  • 時間分布:僅頁面層面的錯誤分布支援。
  • 瀏覽器分布
  • 作業系統分布
  • 裝置分布
  • 版本分布
  • 地理分布:在中國維度下按省、直轄市、自治區統計,在世界維度下按省/地區統計。
圖 4. JS錯誤分布頁面JS錯誤分布頁面

錯誤分布頁簽上可執行以下操作:

  • 時間分布地區,將滑鼠懸浮於分布圖上,可以展示具體的錯誤數。
  • 瀏覽器分布作業系統分布裝置分布版本分布地區,將滑鼠懸浮於分布圖上,可以展示具體的錯誤數和佔比情況。

  • 地理分布地區的中國世界頁簽上,單擊右側表格中的錯誤數箭頭,可切換表格的排序次序(從正序切換為倒序,或從倒序切換為正序)。

常見問題

  • 如何開啟或關閉使用者行為回溯功能?

    該功能預設開啟。如需關閉,請在config配置中添加SDK配置項behavior: false。SDK配置項的詳細資料,請參見SDK參考

  • 開啟使用者行為回溯後,調試過程中通過console.log列印出的資訊會定位到ARMS的SDK代碼bl.js中,而不是原始碼中的位置,如何解決?
    Issue Before

    造成這種現象的原因是ARMS通過重寫console對象的log等方法來監控瀏覽器控制台列印的內容。解決方案為:

    • 方法一(推薦):設定Chrome瀏覽器的黑盒(Blackboxing)。
      1. 開啟Chrome瀏覽器,按Ctrl+Shift+I開啟開發人員工具面板,然後單擊設定表徵圖。
      2. Settings面板左側單擊Blackboxing,單擊Add pattern,在Pattern文字框中輸入/bl.*\.js$,並單擊Add
        Tab Blackboxing
    • 方法二:使用SDK配置項behavior: false關閉使用者行為回溯。
      <script>
          ! (function ( c , b, d, a ) {
              c [a] || ( c[a] = {});
              c [a].config = {
                  pid: "xxxxx",
                  imgUrl: "https://arms-retcode.aliyuncs.com/r.png?",
                  sendResource: true,
                  enableLinkTrace: true,
                  behavior: false
              };
              with(b) with(body) with(insertBefore(createElement("script"), firstChild)) setAttribute("crossorigin", "", src = d)
          })(window, document, "https://retcode.alicdn.com/retcode/bl.js", "__bl");
      </script>

    按照上述方法處理後,console.log列印出的資訊即可定位到原始碼中的位置。

    Issue After