前端出現(xiàn)異常報錯的時候，有前端幫后臺背鍋之前怎么快速優(yōu)雅的"甩鍋"？在做前端程序員的時候,，我之前所在的公司后臺可是有著完善的監(jiān)控系統(tǒng)，他們都覺得自己的代碼和監(jiān)控都做得非常完善,，但是前端的我做了監(jiān)控結(jié)果后來看，事實并非如此,。當(dāng)然,，你也許會說這是開發(fā)和測試不專業(yè)，這么明顯的問題都沒有發(fā)現(xiàn),，但是,，我只能用一句話來解釋：人非圣賢。與其追究是誰的責(zé)任,，不如想辦法解決問題,。將線上的損失減少到較低的影響。如果作為前端你對項目做了監(jiān)控,，并且能實時監(jiān)控到,，出現(xiàn)問題的時候把報錯截圖發(fā)給后臺小伙伴，你還需要跟他們爭論是誰的鍋嗎,？當(dāng)然，如果是前端程序員自己的鍋,，那還是趕緊偷偷修改掉吧,，在建立webfunny前端監(jiān)控時，我也是充分考慮到前端接口這個報錯問題點充分做了細(xì)致設(shè)計,。webfunny前端監(jiān)控系統(tǒng)的功能：性能分析模塊,，通過探針可對頁面的加載性能進行分析，并直觀反映在報表上,。常見的前端監(jiān)控和前端錯誤監(jiān)控方案

說到前端監(jiān)控到異常報警,，絕大多數(shù)的監(jiān)控平臺都提供規(guī)則報警的能力。然而規(guī)則報警比較大的問題在于隨著業(yè)務(wù)的不斷發(fā)展,，原本配置的規(guī)則將會出現(xiàn)閾值過低或過高的問題,。若閾值配置過低，則會產(chǎn)生大量的誤報警,，繼而引起整個監(jiān)控能力的報警疲勞,。為了解決規(guī)則報警的問題，監(jiān)控平臺可以引入一些簡單的數(shù)學(xué)模型來解決時序數(shù)據(jù)的異常識別工作,。以常見的高斯分布（正態(tài)分布）為例,，利用3-sigma原則可以快速判斷某一時刻的報錯數(shù)是否滿足概率分布，繼而可以產(chǎn)生報警,。

常見的前端監(jiān)控和js性能監(jiān)控產(chǎn)品webfunny前端監(jiān)控系統(tǒng)的錯誤分析功能,，通過探針監(jiān)控和上報線上環(huán)境的報錯,，以及一些自定義異常。

二,、前端數(shù)據(jù)分類：2.4 異常相關(guān)的數(shù)據(jù)這里的異常是指 JS 的異常,，用戶的瀏覽器上報 JS 的 bug，這會極大地降低用戶體驗異常的提示信息：這是識別一個異常的重要依據(jù),，如：為空或不是對象JS 文件名異常所在行發(fā)生異常的瀏覽器堆棧信息：必要的時候需要函數(shù)調(diào)用的堆棧信息,，但是注意堆棧信息可能會比較大，需要截取2.5 其它數(shù)據(jù)除了上面提到的 4 類基本的數(shù)據(jù)統(tǒng)計需求,，我們當(dāng)然還可以根據(jù)實際情況來定義一些其他的統(tǒng)計需求,，如用戶瀏覽器對 canvas 的支持程度， 再比如比較特殊的-用戶進行輪播圖翻頁的次數(shù),，這些數(shù)據(jù)統(tǒng)計需求都是前端能夠滿足的,，每一項統(tǒng)計的結(jié)果都體現(xiàn)了前端數(shù)據(jù)的價值

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

三,、性能指標(biāo)FP(FirstPaint)：繪制時間，包括了任何用戶自定義的背景繪制,，它是首先將像素繪制到屏幕的時刻,。FCP(FirstContentPaint)：內(nèi)容繪制。瀏覽器將個DOM渲染到屏幕的時間,，可能是文本,、圖像、SVG等,。這其實就是白屏?xí)r間FMP(FirstMeaningfulPaint)：有意義繪制,。頁面有意義的內(nèi)容渲染的時間LCP(LargestContentfulPaint),。比較大內(nèi)容渲染。在viewport中比較大的頁面元素加載的時間,。DCL(DomContentLoaded)：DOM加載完成,。當(dāng)HTML文檔被完全加載和解析完成之后，DOMContentLoaded事件被觸發(fā),。無需等待樣式表,，圖像和子框架的完成加載。L(onload)：當(dāng)依賴的資源全部加載完畢之后才會觸發(fā),。TTI(TimetoInteractive)：可交互時間,。用于標(biāo)記應(yīng)用已進行視覺渲染并能可靠響應(yīng)用戶輸入的時間點。FID(FirstInputDelay)：輸入延遲,。用戶和頁面交互(單擊鏈接,、點擊按鈕等)到頁面響應(yīng)交互的時間。webfunny前端監(jiān)控系統(tǒng)通過探針實現(xiàn)用戶細(xì)查,。 支持使用多種檢索條件進行搜索,，提高查找效率。好用的前端監(jiān)控和前端行為分析產(chǎn)品

webfunny埋點系統(tǒng),，更輕量,、易使用，降低數(shù) 據(jù)分析使用門檻,，快速實現(xiàn)業(yè)務(wù)分析需求,。常見的前端監(jiān)控和前端錯誤監(jiān)控方案

為什么要監(jiān)控頁面性能？一個頁面性能差的話會影響用戶體驗,。用戶打開頁面等待的太久，可能會直接關(guān)掉頁面,，甚至就不再使用了,，這種情況在移動端更加明顯，移動端用戶對頁面響應(yīng)延遲容忍度很低,。雖然頁面性能很重要,，但是在實際使用中，頁面性能差的情況并不少見,。首先,，在產(chǎn)品的迭代演進過程中，頁面性能可能會被忽略,，性能隨著版本迭代而有所衰減,；其次，性能優(yōu)化是一項復(fù)雜而挑戰(zhàn)的事情,，需要明確的優(yōu)化方向和具體的優(yōu)化手段才能快速落地取效,。所以我們需要一個性能監(jiān)控系統(tǒng),，持續(xù)監(jiān)控和預(yù)警頁面性能的狀況，并且在發(fā)現(xiàn)瓶頸的時候指導(dǎo)優(yōu)化工作,。常見的前端監(jiān)控和前端錯誤監(jiān)控方案

上海觀縱科技有限公司位于上海市奉賢區(qū)望園南路1288弄80號1904,、1909室，擁有一支專業(yè)的技術(shù)團隊,。致力于創(chuàng)造***的產(chǎn)品與服務(wù),，以誠信、敬業(yè),、進取為宗旨,，以建webfunny,walkingfunny,argus產(chǎn)品為目標(biāo)，努力打造成為同行業(yè)中具有影響力的企業(yè),。公司不僅*提供專業(yè)的一般項目:技術(shù)服務(wù),、技術(shù)開發(fā)、技術(shù)咨詢,、技術(shù)交流,、技術(shù)轉(zhuǎn)讓、技術(shù)推廣;軟件開發(fā);人工智能基礎(chǔ)軟件開發(fā);人工智能應(yīng)用軟件開發(fā);數(shù)據(jù)處理服務(wù);信息技術(shù)咨詢服務(wù);信息系統(tǒng)集成服務(wù):信息系統(tǒng)運行維護服務(wù);計算機系統(tǒng)服務(wù);軟件銷售;計算機軟硬件及輔助設(shè)備批發(fā);計算機軟硬件及輔助設(shè)備零售;電子產(chǎn)品銷售;通信設(shè)備銷售;通訊設(shè)備銷售;咨詢策劃服務(wù);市場調(diào)查(不含涉外調(diào)查);廣告制作;廣告發(fā)布;廣告設(shè)計,、代理;會議及展覽服務(wù);貨物進出口,。(除依法須經(jīng)批準(zhǔn)的項目外，憑營業(yè)執(zhí)照依法自主開展經(jīng)營活動) 許可項目:建筑智能化系統(tǒng)設(shè)計;建設(shè)工程施工;網(wǎng)絡(luò)文化經(jīng)營;互聯(lián)網(wǎng)信息服務(wù),。(依法須經(jīng)批準(zhǔn)的項目,，經(jīng)相關(guān)部門批準(zhǔn)后方可開展經(jīng)營活動，具體經(jīng)營項目以相關(guān)部門批準(zhǔn)文件或許可證件為準(zhǔn)),，同時還建立了完善的售后服務(wù)體系,，為客戶提供良好的產(chǎn)品和服務(wù)。誠實,、守信是對企業(yè)的經(jīng)營要求,，也是我們做人的基本準(zhǔn)則。公司致力于打造***的webfunny前端監(jiān)控,，webfunny前端埋點,，全鏈路應(yīng)用性能監(jiān)控，Argus-IT運維監(jiān)控,。