一、意義:
??這里和測速的白屏不同,測速的白屏是指:導航頁面開始到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, // 關鍵節點內容