怎樣定位前端線上問題，一直以來，都是很頭疼的問題，因為它發生於用戶的一系列操作之后。錯誤的原因可能源於機型，網絡環境，接口請求，復雜的操作行為等等，在我們想要去解決的時候很難復現出來，自然也就無法解決。 當然，這些問題並非不能克服，讓我們來一起看看如何去監控並定位線上的問題吧。
背景：市面上的前端監控系統有很多，功能齊全，種類繁多，不管你用或是不用，它都在那里，密密麻麻。往往我需要的功能都在別人家的監控系統里，手動無奈，罷了，怎么才能擁有一個私人定制的前端監控系統呢？做一個自帶前端監控系統的前端工程獅是一種怎樣的體驗呢？
這是搭建前端監控系統的第三章，主要是介紹如何統計靜態資源報錯，跟着我一步步做，你也能搭建出一個屬於自己的前端監控系統。
如果感覺有幫助，或者有興趣，請關注 or Star Me 。
============================================================================
============================================================================
上一章介紹了如何做JS錯誤監控，還有一種錯誤是靜態資源加載報錯，很多時候資源加載報錯對前端項目來說是致命的，因為靜態資源加載出錯了，有可能就會導致前端頁面無法渲染，用戶就只能對着一個空白屏幕發呆，不知所措。因為突然有一天，我們的線上環境爆出了大量的白屏錯誤，經過很長時間的排查，終於定位到問題原因：我們使用的CDN路徑不知道怎么的，把我們的https協議全部指向了http協議，在安全協議下無法訪問非安全協議的資源，導致了大量的白屏。所以我決定增加靜態資源監控功能，以應對未來的未知情況。
那么，下邊我們就進入正題：
如何監控前端靜態資源加載情況
正常情況下，html頁面中主要包含的靜態資源有：js文件、css文件、圖片文件，這些文件加載失敗將直接對頁面造成影響甚至癱瘓，所有我們需要把他們統計出來。我不太確定是否需要把所有靜態資源文件的加載信息都統計下來，既然加載成功了，頁面正常了，應該就沒有統計的必要了，所以我們只統計加載出錯的情況。
先說一下監控方法：
1）使用script標簽的回調方法，在網絡上搜索過，看到有人說可以用onerror方法監控報錯的情況， 但是經過試驗后，發現並沒有監控到報錯情況，至少在靜態資源跨域加載的時候是無法獲取的。
2）利用 performance.getEntries()方法，獲取到所有加載成功的資源列表，在onload事件中遍歷出所有頁面資源集合，利用排除法，到所有集合中過濾掉成功的資源列表，即為加載失敗的資源。 此方法看似合理，也確實能夠排查出加載失敗的靜態資源，但是檢查的時機很難掌握，另外，如果遇到異步加載的js也就歇菜了。
3）添加一個Listener（error）來捕獲前端的異常，也是我正在使用的方法，比較靠譜。但是這個方法會監控到很多的error, 所以我們要從中篩選出靜態資源加載報錯的error, 代碼如下：
/** * 監控頁面靜態資源加載報錯 */ function recordResourceError() { // 當瀏覽器不支持 window.performance.getEntries 的時候，用下邊這種方式 window.addEventListener('error',function(e){ var typeName = e.target.localName; var sourceUrl = ""; if (typeName === "link") { sourceUrl = e.target.href; } else if (typeName === "script") { sourceUrl = e.target.src; } var resourceLoadInfo = new ResourceLoadInfo(RESOURCE_LOAD, sourceUrl, typeName, "0"); resourceLoadInfo.handleLogInfo(RESOURCE_LOAD, resourceLoadInfo); }, true); }
我們根據報錯是的e.target的屬性來判斷它是link標簽，還是script標簽。由於目前我關注對前端造成崩潰的錯誤，所以目前只監控了css，js文件加載錯誤的情況。
首先，我們要做實時監控和預警，依然關聯了7天以前同一時間端的數據，如果某個時間段出現錯誤量暴增，可以發出警告，及時制止。
然后，我們還需要知道更多詳細的信息，如下圖。 不看不知道，一看嚇一跳。雖然線上環境並沒有給我們報出這么多的問題，但是可以看到，每天還是有很多的靜態資源加載報錯，有些是很重要的靜態資源文件，是必然會導致頁面渲染失敗的，所以必須要解決。
解決方案：
① 統計出每天的量，列出每天加載報錯的變化，點擊圖表的bar, 可以看到每天的數據變化，以作對比。
② 分析出靜態資源加載出錯主要發生在哪些頁面上，縮小排查的范圍。
③ 分析出影響用戶的人數，也許很多錯誤就發生在一個人身上，減少盲目排查。
靜態資源加載監控就完成了， 這里還有一些細節需要處理， 來幫助排查問題， 但是我一時半會兒也想不出來，暫時就說到這里吧。
上一章： 搭建前端監控系統（二）JS錯誤監控篇
下一章： 搭建前端監控系統（四）接口請求監控篇