如何定位前端線上問題（如何排查前端生產問題）

　　怎樣定位前端線上問題，一直以來，都是很頭疼的問題，由於它發生於用戶的一系列操做以後。錯誤的緣由可能源於機型，網絡環境，接口請求，複雜的操做行爲等等，在咱們想要去解決的時候很難復現出來，天然也就沒法解決。 固然，這些問題並不是不能克服，讓咱們來一塊兒看看如何去監控並定位線上的問題吧。 

 

　　背景：市面上的前端監控系統有不少，功能齊全，種類繁多，無論你用或是不用，它都在那裏，密密麻麻。每每我須要的功能都在別人家的監控系統裏，手動無奈，罷了，怎麼才能擁有一個私人定製的前端監控系統呢？作一個自帶前端監控系統的前端工程獅是一種怎樣的體驗呢？

 

　　這是搭建前端監控系統的第二章，主要是講如何對js錯誤進行監控，跟着我一步步作，你也能搭建出一個屬於本身的前端監控系統。

　　若是感受有幫助，或者有興趣，請關注 or Star Me 。 

 

 　  請移步線上： 前端監控系統

 

　　1、統計前端錯誤（Demo）

　　衆所周知，咱們有辦法去統計前端的錯誤，那就是大名鼎鼎的 window.onerror 方法， 用法以下：

    // 重寫 onerror 進行jsError的監聽
    window.onerror = function(errorMsg, url, lineNumber, columnNumber, errorObj)
    {
      var errorStack = errorObj ? errorObj.stack : null;
      // 分類處理信息
      siftAndMakeUpMessage(errorMsg, url, lineNumber, columnNumber, errorStack);
    };

　　window.onerror 方法中參數的意義我就不一一介紹了，我相信你們也已經耳熟能詳了。 總之它可以爲咱們記錄下線上的不少錯誤，以及一些額外的信息。我將window.onerror(捕獲異常)，console.error(自定義異常)方法收集到的錯誤信息進行分析統計後的結果以下：

        

 　　　如上圖所見： 咱們統計出了天天的錯誤量，每一個小時的錯誤量，天天的錯誤量變化，來鑑定咱們線上環境是否健康。咱們按照JS錯誤數量進行分類排序，按照頁面進行錯誤分類。經過上邊的數據分析，咱們可以清晰地觀察到線上項目的報錯狀況。

　　2、分析錯誤詳情

　　線上的錯誤日誌統計出來了， 如何解析這些錯誤日誌呢。以下圖，解析出用戶的機型，版本，系統平臺，影響範圍，以及具體的錯誤位置， 從而提升咱們解決問題的效率。

　　  

 

---

 

 　 疑問？

　　window.onerror 方法可以利用的地方都已經用的差很少了，可是它真的能夠幫咱們定位和解決前端線上的問題嗎？

　　線上可以修復的問題我已經儘可能修復了，可是線上的問題頻發。 當客服反饋一個問題， 你發現沒有測試機型，沒法復現用戶錯誤的時候，讓你來修復這個問題，只能兩眼一抹黑，無能爲力。

　　例如：線上用戶進過了複雜的連接跳轉而發生了錯誤；用戶調用的接口發生了異常或者超時；線上的用戶反饋異常根本就跟實際狀況不符，等等。這些非直觀型的問題該如何解決？ 因此，咱們須要用戶的行爲記錄。

　　3、記錄用戶的跳轉行爲（Demo）

　　有些錯誤是前端頁面通過複雜的跳轉、回退以後才發生的，就算測試人員也很難測試出這種問題，由於線上的用戶的任何行爲都有可能出現。每每咱們知道的只是他在最後停留的頁面發生了錯誤。 如此，咱們記錄下用戶的跳轉日誌， 就可以復現出用戶的行爲， 從而復現BUG

　　

 

　　4、記錄用戶的接口行爲

　　接口請求是一個前端項目涉及最多的行爲，接口的異常包括：後臺報錯，響應超時，網絡環境較差，重複接口數據覆蓋等等。這些錯誤也只有在真實的用戶環境中才會發生，是典型的線上問題。咱們能夠記錄下用戶的請求時間，參數，響應時間，響應狀態等等，能夠具體分析出來接口對頁面的影響。

　

 

　　5、記錄用戶的點擊行爲

　　用戶通過一系列複雜的行爲操做以後（主要是點擊行爲），頁面的樣子和保存的數據都通過了不少變化，此時此刻最容易發生數據錯亂的現象，致使修復bug的時候無從入手，是復現用戶行爲中重要的一環。

     

　　6、記錄用戶的頁面截圖

　　即便你記錄下全部的行爲，可是你依然須要看到頁面的樣子，纔可以分析出問題所在，那麼咱們依然能夠經過js截圖來看看用戶設備上的樣子。

　　

　　7、分析用戶的場外信息

　　當用戶全部的行爲都被咱們掌握以後，咱們可以復現出用戶的行爲，甚至可以復現出用戶的問題，也許咱們還須要一些場外信息才能精準定位問題，好比，用戶的機型，地理位置，系統版本，當時的網絡環境（這個不許確，我是依據用戶當時首次加載頁面的時間來判斷，只能做爲參考依據）

　　

---

 

　　總結：

　　 問題產生的緣由五花八門，只有把日誌作全了，纔可以準確的定位和解決問題。

　　 這是我排查線上問題的經驗和實戰，分享出來，以求分享和學習。

 

　　 說了這麼多都沒有直接體驗直觀，請移步。 Demo地址