成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

aaron / 1114人閱讀

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

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

作者：一步一個(gè)腳印一個(gè)坑

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

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

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

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

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

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

// 重寫 onerror 進(jìn)行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)耳熟能詳了。 總之它能夠?yàn)槲覀冇涗浵戮€上的很多錯(cuò)誤，以及一些額外的信息。我將window.onerror方法收集到的錯(cuò)誤信息進(jìn)行分析統(tǒng)計(jì)后的結(jié)果如下：

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

二、分析錯(cuò)誤詳情

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

疑問？

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

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

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

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

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

四、記錄用戶的接口行為

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

五、記錄用戶的點(diǎn)擊行為

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

六、記錄用戶的頁面截圖

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

七、分析用戶的場(chǎng)外信息

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

總結(jié)

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

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

說了這么多都沒有直接體驗(yàn)直觀，請(qǐng)移步。 Demo地址

參考

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105672.html

相關(guān)文章

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

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

    tolerious 評(píng)論0 收藏0

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

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

    EdwardUp 評(píng)論0 收藏0

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

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

    dreamtecher 評(píng)論0 收藏0

  • 一步一步搭建前端監(jiān)控系統(tǒng)：如何將網(wǎng)頁截圖上報(bào)？

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

    Martin91 評(píng)論0 收藏0

  • 鏈家網(wǎng)前端總架構(gòu)師楊永林：我的8年架構(gòu)師成長之路

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

    liaosilzu2007 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<