前端监控之白屏异常

一、意义：
  这里和测速的白屏不同，测速的白屏是指：导航页面开始到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, // 关键节点内容