建站
咨詢
售后
建站咨詢
新聞中心
前言：
創(chuàng)新互聯(lián)專注于昭蘇網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供昭蘇營(yíng)銷型網(wǎng)站建設(shè)，昭蘇網(wǎng)站制作、昭蘇網(wǎng)頁(yè)設(shè)計(jì)、昭蘇網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造昭蘇網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供昭蘇網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
如果你碰巧是一名前端開發(fā)，而又碰巧在維護(hù)著一個(gè)對(duì)可用性有極高要求的站點(diǎn)，那么也許你我有過(guò)共同的苦惱：如何在第一時(shí)間發(fā)現(xiàn)線上出現(xiàn)的前端異常？畢竟前端不是每天都可以過(guò)網(wǎng)頁(yè)裸奔節(jié)，線上的JavaScript錯(cuò)誤也足以讓用戶抓狂地拿起他們的投訴電話。。。每天心驚膽戰(zhàn)發(fā)布的日子不好過(guò)吧？
是時(shí)候改變下了，讓心驚膽戰(zhàn)見(jiàn)鬼去吧！我的目標(biāo)很簡(jiǎn)單：要在用戶和boss發(fā)現(xiàn)異常之前就徹底修復(fù)問(wèn)題，其余的時(shí)間充分地享受高質(zhì)量生活:）
一：前端異常監(jiān)控系統(tǒng)的構(gòu)建目標(biāo)
在對(duì)被監(jiān)控頁(yè)面無(wú)侵入的前提下，提供7*24小時(shí)全天候的監(jiān)控任務(wù)，第一時(shí)間發(fā)現(xiàn)“裸奔”、“半裸奔”頁(yè)面或是有JavaScript異常拋出的頁(yè)面，并給網(wǎng)站前端負(fù)責(zé)人提供短信、郵件等方式的報(bào)警服務(wù)。
可以說(shuō)，前端異常監(jiān)控系統(tǒng)主要是解決兩大異常情況：a. 頁(yè)面上有javascript異常 b. 各種因素造成的頁(yè)面的樣式丟失。我先分別介紹下兩種這兩種異常的解決思路：
二：JavaScript的異常監(jiān)控
由于客戶端瀏覽器環(huán)境的不同，在開發(fā)環(huán)境中能夠工作的代碼，并非就能夠在用戶的電腦上正常運(yùn)行，各種畸形瀏覽器造成的問(wèn)題弄得我們很頭大，如果能像后端開發(fā)那樣可以隨時(shí)地查看服務(wù)器端錯(cuò)誤日志就好了！可為什么不呢？
JavaScript語(yǔ)言自身就提供了try catch的異常處理語(yǔ)法，我們假以利用的話，就能夠在增強(qiáng)前端應(yīng)用魯棒性的同時(shí)，又可以把捕獲到的異常拋送給前端異常監(jiān)控系統(tǒng)，以錯(cuò)誤日志的形式記錄到數(shù)據(jù)庫(kù)中。
給應(yīng)用添加異常處理功能，我們是可以充分發(fā)揮javascript語(yǔ)言是動(dòng)態(tài)語(yǔ)言這一優(yōu)勢(shì)的。我可不想為了添加異常處理而在代碼中寫N多的try-catch語(yǔ)句。 我的思路是：通過(guò)JavaScript類模塊在應(yīng)用中注冊(cè)的時(shí)候，遍歷類模塊中的每個(gè)函數(shù)，然后統(tǒng)一的加上try-catch處理，這樣前端里面的所有函數(shù)就都在異常處理的范圍之內(nèi)了。怎么樣，是不是要比Java等靜態(tài)語(yǔ)言cool很多？ 代碼示例如下：
有了以上的全局異常處理函數(shù)之后，解決線上的JavaScript異常就是小菜一碟，只需要定義好錯(cuò)誤message的格式，并在catch語(yǔ)句中向異常監(jiān)控系統(tǒng)的固定接口發(fā)送請(qǐng)求即可。我們可以在錯(cuò)誤消息中發(fā)送關(guān)于錯(cuò)誤的瀏覽器信息，JS模塊信息，函數(shù)信息，或具體的錯(cuò)誤消息等，要傳送哪些信息全看你自己的需要。在FdSafe異常監(jiān)控系統(tǒng)中，我們傳輸了如下錯(cuò)誤信息：
三：樣式丟失的異常監(jiān)控
如果你的頁(yè)面在不該裸奔的時(shí)候突然裸奔了，那就是嚴(yán)重的可用性問(wèn)題，需要前端同學(xué)在第一時(shí)間定位問(wèn)題并迅速修復(fù)。引發(fā)“裸奔”的可能性很多，也許是CSS文件404了，也許是CSS文件@import url的問(wèn)題，但是最終的表象只有一個(gè)，那就是頁(yè)面樣式突然發(fā)生極大改變。
在fdsafe系統(tǒng)中，我們使用了圖片對(duì)比的方法來(lái)探測(cè)線上頁(yè)面發(fā)生“裸奔”的現(xiàn)象，原理上很簡(jiǎn)單：對(duì)于被監(jiān)控頁(yè)面的URL，我們讓監(jiān)控系統(tǒng)保留其前一天頁(yè)面被瀏覽器渲染后的截圖，然后讓監(jiān)控系統(tǒng)周期性的定時(shí)抓取線上頁(yè)面的截圖，兩張圖片做相似度對(duì)比，如果相似度差值超過(guò)一定的閾值，則會(huì)觸發(fā)報(bào)警條件。
頁(yè)面的截圖我們是使用QT的webkit內(nèi)核渲染并截取的，當(dāng)然也推薦使用selenium的瀏覽器截圖功能。而圖片相似度的算法很多，我們最終采用的是OpenCV中的cvCompareHist算法。
四：其它的異常監(jiān)控
除了樣式丟失及javascript異常之外，前端還是有很多其它異?？梢酝ㄟ^(guò)系統(tǒng)來(lái)監(jiān)控的，比如說(shuō)JS、CSS文件的404錯(cuò)誤，HTML源碼的閉合異常，或JS、CSS文件的壓縮異常等。fdSafe系統(tǒng)能夠通過(guò)添加插件的方式來(lái)提供對(duì)不同異常的監(jiān)控，然后統(tǒng)一匯總到異常日志中。
五：系統(tǒng)總體框架圖
搭建前端的異常監(jiān)控系統(tǒng)，自然也要體現(xiàn)我們前端的特色，后臺(tái)的系統(tǒng)我們是基于NodeJS來(lái)實(shí)現(xiàn)的，它主要完成兩個(gè)功能：
1）定時(shí)抓取被監(jiān)控頁(yè)面的HTML源碼，并分析是否存在頁(yè)面樣式丟失異?；蚴瞧渌惓！?/p>
2）接受來(lái)自用戶瀏覽器發(fā)送的JavaScript異常。
一旦異常發(fā)生，且超出設(shè)定的允許閾值，則觸發(fā)報(bào)警條件，給負(fù)責(zé)人發(fā)送報(bào)警短信，系統(tǒng)原理圖如下：
六：總結(jié)
隨著Web應(yīng)用朝著富客戶端方向的發(fā)展，前端應(yīng)用的可用性重要性越來(lái)越高，搭建前端異常監(jiān)控系統(tǒng)的必要性也是越來(lái)也高，希望本文能夠給大家提供一些思路上的啟發(fā)。
原文鏈接
網(wǎng)站名稱：構(gòu)建Web前端異常監(jiān)控系統(tǒng)–FdSafe
轉(zhuǎn)載源于：http://fisionsoft.com.cn/article/dhjpcpd.html
