一步一步搭建前端監(jiān)控系統(tǒng)：如何定位前端線上問題？

aaron 發(fā)布于2019-08-23 18:41 / 1172人閱讀

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

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

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

原文：如何定位前端線上問題（如何排查前端生產(chǎn)問題）

Fundebug經(jīng)授權轉載，版權歸原作者所有。

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

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

一、統(tǒng)計前端錯誤（Demo）

眾所周知，我們有辦法去統(tǒng)計前端的錯誤，那就是大名鼎鼎的 window.onerror 方法，用法如下：

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

window.onerror 方法中參數(shù)的意義我就不一一介紹了，我相信大家也已經(jīng)耳熟能詳了。總之它能夠為我們記錄下線上的很多錯誤，以及一些額外的信息。我將window.onerror方法收集到的錯誤信息進行分析統(tǒng)計后的結果如下：

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

二、分析錯誤詳情

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

疑問？

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

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

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

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

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

四、記錄用戶的接口行為

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

五、記錄用戶的點擊行為

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

六、記錄用戶的頁面截圖

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

七、分析用戶的場外信息

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

總結

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

這是我排查線上問題的經(jīng)驗和實戰(zhàn)，分享出來，以求分享和學習。

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

參考

一步一步搭建前端監(jiān)控系統(tǒng)：JS錯誤監(jiān)控篇

一步一步搭建前端監(jiān)控系統(tǒng)：接口請求異常監(jiān)控篇

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/105672.html

一步一步搭建前端監(jiān)控系統(tǒng)：如何記錄用戶行為？

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

tolerious 2019-08-26 10:33 評論0 收藏0
一步一步搭建前端監(jiān)控系統(tǒng)：JS錯誤監(jiān)控篇

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

EdwardUp 2019-08-23 18:30 評論0 收藏0
一步一步搭建前端監(jiān)控系統(tǒng)：接口請求異常監(jiān)控篇

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

dreamtecher 2019-08-23 18:39 評論0 收藏0
一步一步搭建前端監(jiān)控系統(tǒng)：如何將網(wǎng)頁截圖上報？

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

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

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

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