<del id="gcq0k"></del>

<fieldset id="gcq0k"></fieldset>

一步一步搭建前端監控系統：如何定位前端線上問題？

aaron 發布于2019-08-23 18:41 / 1087人閱讀

摘要：一直以來，前端的線上問題很難定位，因為它發生于用戶的一系列操作之后。當然，這些問題并非不能克服，讓我們來一起看看如何去定位線上的問題吧。地址參考一步一步搭建前端監控系統錯誤監控篇一步一步搭建前端監控系統接口請求異常監控篇

摘要： 記錄用戶行為，排查線上BUG。

作者：一步一個腳印一個坑

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

Fundebug經授權轉載，版權歸原作者所有。

一直以來，前端的線上問題很難定位，因為它發生于用戶的一系列操作之后。錯誤的原因可能源于機型，網絡環境，復雜的操作行為等等，在我們想要去解決的時候很難復現出來，自然也就無法解決。當然，這些問題并非不能克服，讓我們來一起看看如何去定位線上的問題吧。

所謂，工欲善其事必先利其器，你不能擼起袖子蠻干，所以，我們需要一個工具。我們曾經嘗試用過很多監控工具去統計這些錯誤，比如，聽云、OneApm、sentry、Fundebug、growingIo 等等。每家工具都各有所長，但也都各有所短，而且要花不少的錢（感覺是痛點，哈哈）。

一、統計前端錯誤（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方法收集到的錯誤信息進行分析統計后的結果如下：

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

二、分析錯誤詳情

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

疑問？

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

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

例如：線上用戶進過了復雜的鏈接跳轉而發生了錯誤；用戶調用的接口發生了異常或者超時；線上的用戶反饋異常根本就跟實際情況不符，等等。這些非直觀型的問題該如何解決？所以，我們需要用戶的行為記錄。

三、記錄用戶的訪問行為（Demo）

有些錯誤是前端頁面經過復雜的跳轉、回退之后才發生的，就算測試人員也很難測試出這種問題，因為線上的用戶的任何行為都有可能出現。往往我們知道的只是他在最后停留的頁面發生了錯誤。如此，我們記錄下用戶的跳轉日志，就能夠復現出用戶的行為，從而復現BUG。

四、記錄用戶的接口行為

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

五、記錄用戶的點擊行為

用戶經過一系列復雜的行為操作之后（主要是點擊行為），頁面的樣子和保存的數據都經過了很多變化，此時此刻最容易發生數據錯亂的現象，導致修復bug的時候無從入手，是復現用戶行為中重要的一環。

六、記錄用戶的頁面截圖

即使你記錄下所有的行為，但是你依然需要看到頁面的樣子，才能夠分析出問題所在，那么我們依然可以通過js截圖來看看用戶設備上的樣子。

七、分析用戶的場外信息

當用戶所有的行為都被我們掌握之后，我們能夠復現出用戶的行為，甚至能夠復現出用戶的問題，也許我們還需要一些場外信息才能精準定位問題，比如，用戶的機型，地理位置，系統版本，當時的網絡環境（這個不準確，我是依據用戶當時首次加載頁面的時間來判斷，只能作為參考依據）

總結

問題產生的原因五花八門，只有把日志做全了，才能夠準確的定位和解決問題。

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

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

參考

一步一步搭建前端監控系統：JS錯誤監控篇

一步一步搭建前端監控系統：接口請求異常監控篇

GPU云服務器云服務器一步一步寫java 走一步進一步進一步增強

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105672.html

一步一步搭建前端監控系統：如何記錄用戶行為？

摘要：摘要通過記錄用戶行為，快速復現場景。這是搭建前端監控系統的第二章，主要是介紹如何統計報錯，跟著我一步步做，你也能搭建出一個屬于自己的前端監控系統。摘要：通過記錄用戶行為，快速復現BUG場景。作者：一步一個腳印一個坑原文：搭建前端監控系統（備選）用戶行為統計和監控篇（如何快速定位線上問題） Fundebug經授權轉載，版權歸原作者所有。一步一步搭建前端監控系統系列博客： ...

tolerious 2019-08-26 10:33 評論0 收藏0
一步一步搭建前端監控系統：JS錯誤監控篇

摘要：摘要徒手寫錯誤監控。為什么用定時器呢，因為在單頁應用中，路由的切換和地址欄的變化是無法被監控的，我確實沒有想到特別好的辦法來監控，所以用了這種方式，如果有人有更好的辦法，請給我留言，謝謝。摘要：徒手寫JS錯誤監控。作者：一步一個腳印一個坑原文：搭建前端監控系統（二）JS錯誤監控篇 Fundebug經授權轉載，版權歸原作者所有。背景：市面上的監控系統有很多，大多收費，對于...

EdwardUp 2019-08-23 18:30 評論0 收藏0
一步一步搭建前端監控系統：接口請求異常監控篇

摘要：參考一步一步搭建前端監控系統錯誤監控篇用插件記錄網絡請求異常關于專注于微信小程序微信小游戲支付寶小程序和線上應用實時監控。摘要：如何監控HTTP請求錯誤？作者：一步一個腳印一個坑原文：搭建前端監控系統（四）接口請求異常監控篇 Fundebug經授權轉載，版權歸原作者所有。背景：市面上的監控系統有很多，大多收費，對于小型前端項目來說，必然是痛點。另一點主要原因是，功能雖然...

dreamtecher 2019-08-23 18:39 評論0 收藏0
一步一步搭建前端監控系統：如何將網頁截圖上報？

摘要：目前已經在運行的線上前端監控系統代碼和講解都放在這篇文章里監控系統介紹及代碼用戶對前端程序員來說，就是一個黑匣子。摘要：通過錄屏或者截圖，快速復現BUG場景。作者：一步一個腳印一個坑原文：搭建前端監控系統（備選）Js截圖上報篇 Fundebug經授權轉載，版權歸原作者所有。 PS：本文關于Fundebug錄屏功能的內容有些不準確的地方，比如錄屏并非通過截圖實現的，錄屏插件...

Martin91 2019-08-26 10:21 評論0 收藏0
鏈家網前端總架構師楊永林：我的8年架構師成長之路

摘要：楊永林，人稱教主，八年前端開發經驗，原新浪微博前端技術專家，現任鏈家網前端總架構師。年年底，教主加入鏈家網，負責前端的整體架構工作。楊永林，人稱教主，八年前端開發經驗，原新浪微博前端技術專家，現任鏈家網前端總架構師。長期研究Web訪問性能優化和前端框架搭建。作為初始團隊成員，教主參與了新浪微博所有PC版本的開發，其中4~6版以架構師的身份設計了微博PC版的前端架構。在新浪微博任職期間...

liaosilzu2007 2019-08-23 15:19 評論0 收藏0