整體大致可以分四個階段：信息采集,、存儲,、分析,、監(jiān)控,。采集階段：收集異常日志,，先在本地做一定的處理,，采取一定的方案上報到服務器。存儲階段：后端接收前端上報的異常日志,，經(jīng)過一定處理,，按照一定的存儲方案存儲。分析階段：分為機器自動分析和人工分析,。機器自動分析,，通過預設的條件和算法，對存儲的日志信息進行統(tǒng)計和篩選,，發(fā)現(xiàn)問題,，觸發(fā)報警。人工分析,，通過提供一個可視化的數(shù)據(jù)面板,，讓系統(tǒng)用戶可以看到具體的日志數(shù)據(jù)，根據(jù)信息,，發(fā)現(xiàn)異常問題根源,。報警階段：分為告警和預警。告警按照一定的級別自動報警,，通過設定的渠道,，按照一定的觸發(fā)規(guī)則進行。預警則在異常發(fā)生前,，提前預判,，給出警告,。性能監(jiān)控：使用ResourceTimingAPI和PerformanceTimingAPI，可以計算許多重要的指標,，比如頁面性能統(tǒng)計的起始點時間,、首屏時間等。異常監(jiān)控：前端捕獲異常分為全局捕獲和局部捕獲,。局部捕獲作為補充,，對某些特殊情況進行捕獲，但分散,，不利于管理,。所以，我會選擇全局捕獲的方式,，即通過全局的接口,，將捕獲代碼集中寫在一個地方。具體在實現(xiàn)項目中,，我應該會采用badjs-report,，它重寫了進行上報異常，無需編寫任何捕獲錯誤的代碼,。webfunny前端一體化埋點系統(tǒng),，可按項目設定不同的模型看板，設定人員權(quán)限,，滿足多種數(shù)據(jù)分析需求,。前端監(jiān)控和靜態(tài)資源加載錯誤監(jiān)控平臺搭建

前端異常的問題定位出來是用戶網(wǎng)絡問題導致，網(wǎng)絡環(huán)境是會影響接口的效率,。前端程序員也許會說,，如果網(wǎng)絡環(huán)境不好，我們只要等待足夠長的時間,，接口啥的總是能夠加載出來的,，技術可以等、用戶是等不了的,，線上用戶使用app的時候都會有個極限等待時間,。也就是說用戶等待到一定時間，就會變得不耐煩了,，就會關掉你的程序流失用戶,。所以，我們一定要在到達用戶極限等待時間之前,，給用戶一個反饋,，這就是為什么我在設計webfunny前端監(jiān)控時，在這個部分給前端接口加了一個超時時間,。如果網(wǎng)絡環(huán)境評估良好,，而接口請求耗時又很長,，這時候你就可以去找后端算賬了。前端監(jiān)控和js文件加載錯誤監(jiān)控工具推薦前端線上的用戶操作行為十分復雜,，部分問題可能隱藏在用戶多次操作之后,。

這是搭建前端監(jiān)控系統(tǒng)的第二章，主要是介紹如何統(tǒng)計js報錯,，跟著webfunny前端監(jiān)控項目的開發(fā)者一步步操作,，你也能搭建出一個屬于自己的前端監(jiān)控系統(tǒng)。前端程序員可以移步線上：webfunny前端監(jiān)控系統(tǒng),，對于前端應用來說,，Js錯誤的發(fā)生直接影響前端應用的質(zhì)量。對前端異常的監(jiān)控是整個前端監(jiān)控系統(tǒng)中的一個重要環(huán)節(jié),。前端異常包含很多種情況：編譯時異常（開發(fā)階段就能排除）運行時異常,；3.加載靜態(tài)資源異常（路徑寫錯、資源服務器異常,、CDN異常,、跨域）4.接口請求異常等。這一篇我們只介紹Js運行時異常,。

搭建前端監(jiān)控系統(tǒng)（六）之接口性能分析篇,，如何監(jiān)控前端接口的性能。一,、接口耗時分段分析在webfunny前端監(jiān)控系統(tǒng)上，我們的開發(fā)者將前端接口耗時劃分為5個分段：<1秒,、1-5秒,、5-10秒、10-30秒,、>30秒10秒是用戶可忍受等待時間的臨界值,，如果一個接口超過10秒還在loading，用戶極有可能殺掉程序,。所以一般情況下,，大于10秒的接口都可以認為是超時接口（特殊情況例外）。即使真的有這種情況,，也應該讓后端小伙伴把這個接口做成異步接口,，在10秒內(nèi)給用戶一個反饋。為什么要把耗時分段進行分析呢,，因為大部分時候,，前端工程師通常要關心就是10-30秒這個段位，大部分超時的接口都會在這里發(fā)生,。這種超時的接口,、在webfunny前端監(jiān)控上,，異常的情況就會以這種鶴立雞群的柱子圖形出現(xiàn)，前端就能知道接口肯定是出了問題,。每個耗時分段,，每天發(fā)生的數(shù)量都一目了然，前端工程師就可以做到心中有數(shù),。如果出現(xiàn)大面積的異常接口,，這個柱子會變得非常明顯。每個分段的占比也需要計算出來,，可以按照自定的規(guī)則發(fā)送報警信息,。webfunny前端監(jiān)控系統(tǒng)，一站式數(shù)據(jù)可視化展示平臺,，炫酷大屏,，自由部署。

搭建前端監(jiān)控系統(tǒng)（四）接口請求異常監(jiān)控篇,，如何監(jiān)控前端接口請求：1,、如何監(jiān)控ajax請求當ajaxLoadStart事件發(fā)生的時候，我們將回調(diào)方法中的事件對象全都放進數(shù)組timeRecordArray里,，當ajaxLoadEnd發(fā)生的時候,，我們就去遍歷這個數(shù)據(jù)，遇到又返回結(jié)果的事件對象,，說明接口請求已經(jīng)完成,，記錄下來，并從數(shù)組中刪除該事件對象,。這樣前端開發(fā)者們就能夠逐一分析出接口請求的內(nèi)容了,。2.如何監(jiān)控fetch請求通過第一種方法，已經(jīng)能夠監(jiān)控到大部分的ajax請求了,。然而,，使用fetch請求的人越來越多，因為fetch的鏈式調(diào)用可以讓前端開發(fā)者們擺脫ajax的嵌套地獄,，被更多的人所青睞,。webfunny前端監(jiān)控系統(tǒng)隨時連接線上用戶，無論何時何地,，解決前端問題都易如反掌,！國內(nèi)好用的前端監(jiān)控和js錯誤監(jiān)控工具

前端監(jiān)控看似簡單，但想要監(jiān)控真正發(fā)揮價值,，還需要從各個方面進行不斷的優(yōu)化和打磨,。前端監(jiān)控和靜態(tài)資源加載錯誤監(jiān)控平臺搭建

前端監(jiān)控系統(tǒng)搭建第三步之購買CA證書或者說是HTTPS證書現(xiàn)在很多網(wǎng)站都是走HTTPS安全協(xié)議，如果我們的服務器不支持安全協(xié)議，那么日志是無法被上傳到我們的服務器上的,。所以我們也需要給我們的服務器配置安全證書,。有多種方式獲取證書，有不收費的,，有收費的,，我的webfunny前端監(jiān)控項目用的是阿里云上未收費版本一年的。PS:https證書可能也需要折騰一些時間,，需要有耐心,。這樣，我們的阿里云服務器部署環(huán)境就算搭建完成了,，可以開始寫前端日志的監(jiān)控代碼了,。前端監(jiān)控和靜態(tài)資源加載錯誤監(jiān)控平臺搭建

上海觀縱科技有限公司依托可靠的品質(zhì)，旗下品牌webfunny,walkingfunny,argus以高質(zhì)量的服務獲得廣大受眾的青睞,。旗下webfunny,walkingfunny,argus在傳媒,、廣電行業(yè)擁有一定的地位，品牌價值持續(xù)增長,，有望成為行業(yè)中的佼佼者,。隨著我們的業(yè)務不斷擴展，從webfunny前端監(jiān)控,，webfunny前端埋點,，全鏈路應用性能監(jiān)控，Argus-IT運維監(jiān)控等到眾多其他領域,，已經(jīng)逐步成長為一個獨特,，且具有活力與創(chuàng)新的企業(yè)。公司坐落于上海市奉賢區(qū)望園南路1288弄80號1904,、1909室,，業(yè)務覆蓋于全國多個省市和地區(qū)。持續(xù)多年業(yè)務創(chuàng)收,，進一步為當?shù)亟?jīng)濟,、社會協(xié)調(diào)發(fā)展做出了貢獻,。