一奸忽、意義:
??這里和測速的白屏不同阎肝,測速的白屏是指:導航頁面開始到TTFB之間的時間稱之為白屏時間甩骏。白屏異常是指:用戶看到的一直是白屏窗市,頁面沒有任何內容先慷。比如渲染函數報錯、Vue或React路由頁面沒有內容咨察、網頁加載很慢很慢以至規(guī)定的時間范圍內一直沒內容论熙。
??監(jiān)控白屏異常能發(fā)現一些遺漏的bug并及時修復。
二摄狱、捕獲方法:
??頁面加載后2秒或進入頁面后12秒(兼容一些特殊頁面不會觸發(fā)load事件)檢查關鍵節(jié)點是否有內容赴肚,默認檢查#app節(jié)點,如果#app節(jié)點沒有則檢查#whiteScreen節(jié)點二蓝,查找節(jié)點是否有內容。
let monitorWhiteScreenNode = document.querySelector('#app');
if (!monitorWhiteScreenNode) {
monitorWhiteScreenNode = document.querySelector('#whiteScreen');
}
if (monitorWhiteScreenNode) {
setTimeout(() => {
try {
if (!(/\w/.test(monitorWhiteScreenNode!.innerHTML))) {
// 重要節(jié)點沒有內容
reportWhiteScreen({
detail: monitorWhiteScreenNode!.outerHTML
});
}
} catch (err) {
}
}, 2000);
}
三指厌、上報參數:
當資源加載異常時刊愚,上報以下信息:
??1、path: string // 頁面url
??2踩验、detail?: string, // 關鍵節(jié)點內容