前端監控之白屏異常

一、意義：
  這里和測速的白屏不同，測速的白屏是指：導航頁面開始到TTFB之間的時間稱之為白屏時間。白屏異常是指：用戶看到的一直是白屏，頁面沒有任何內容。比如渲染函數報錯、Vue或React路由頁面沒有內容、網頁加載很慢很慢以至規定的時間范圍內一直沒內容。
  監控白屏異常能發現一些遺漏的bug並及時修復。

二、捕獲方法：
  頁面加載后2秒或進入頁面后12秒（兼容一些特殊頁面不會觸發load事件）檢查關鍵節點是否有內容，默認檢查#app節點，如果#app節點沒有則檢查#whiteScreen節點，查找節點是否有內容。

let monitorWhiteScreenNode = document.querySelector('#app');
if (!monitorWhiteScreenNode) {
    monitorWhiteScreenNode = document.querySelector('#whiteScreen');
}
if (monitorWhiteScreenNode) {
    setTimeout(() => {
        try {
            if (!(/\w/.test(monitorWhiteScreenNode!.innerHTML))) {
                // 重要節點沒有內容
                reportWhiteScreen({
                    detail: monitorWhiteScreenNode!.outerHTML
                });
            }
        } catch (err) {
        }
    }, 2000);
}

三、上報參數：
當資源加載異常時，上報以下信息：
  1、path: string // 頁面url
  2、detail?: string, // 關鍵節點內容