I. Significance: Different from the white screen of speed measurement, the white screen of speed measurement refers to the time between the start of navigation page and TTFB, which is called the white screen time. A blank screen exception means that the user sees a blank screen all the time and nothing is displayed on the page. For example, the rendering function reported an error, the Vue or React routing page had no content, and the page loaded so slowly that there was no content within the specified time range. Monitoring white screen anomalies can find some missing bugs and fix them in time.

2, capture method: 2 seconds after page loading or 12 seconds after page entry (compatible with some special pages will not trigger the load event) check whether there is content in key nodes, the default check #app node, if #app node does not check #whiteScreen node, find whether there is content in nodes.

let monitorWhiteScreenNode = document.querySelector('#app'); if (! monitorWhiteScreenNode) { monitorWhiteScreenNode = document.querySelector('#whiteScreen'); } if (monitorWhiteScreenNode) { setTimeout(() => { try { if (! (/\w/.test(monitorWhiteScreenNode! .innerhtml))) {// Important nodes have no reportWhiteScreen({detail: monitorWhiteScreenNode! .outerHTML }); } } catch (err) { } }, 2000); }Copy the code

3. Report parameters: When resources are incorrectly loaded, the following information is reported: 1. Path: string // Page URL 2. : string, // Key node content