这是我参与「第四届青训营」笔记创作活动的第15天

前言

在上一篇系列的文章里我们介绍了前端监控的重要性和大概流程，在本文中会对异常监控信息中的白屏异常进行讲解。

白屏异常

白屏异常：用户屏幕无任何内容，一直保持为白色，任何后台交互信息包括报错都不会呈现给用户。
一般而言对于正常网站，当用户出现白屏异常时，多半是出BUG了。
白屏异常更像一个泛化的类型，因为引起白屏异常的因素有很多。当监控到白屏异常时，可能是JS错误，资源文件加载错误等。

如何监控白屏异常

根据查阅相关资料与博客的情况，完美解决监控白屏异常的方案似乎没有，在本次大作业中我采用的方法为等待页面渲染完成(onload()判断)，再通过米字型采点(采点图如下所示),判断该点是否属于["html", "body", "#container", ".content"]中的一类，如果采得的点取得的element属于该四类的话，说明其无包裹内容，为空，那么则说明其是空白点。

米字型.png
通过图我们可以直观的看到分别从页面高的一半处，宽的一半处，左上至右下，右上至左下分别采点，该方法的好处是简单粗暴，比如在我们组的项目里，如下图所示(空白点用绿色方框标出)，
很明显这只是个测试页面，可以看到有27个空白点，也就是只采到了9个点，这个时候当空白点为36时，极大概率就为白屏异常，我们就可以判断他为白屏异常了。相关代码如下所示：

onload(function () {
    let xElements, yElements;
    for (let i = 1; i <= 9; i++) {
      xElements = document.elementsFromPoint(
        (window.innerWidth * i) / 10,
        (window.innerHeight * i) / 10,
      );
      yElements = document.elementsFromPoint(
        window.innerWidth - i*(window.innerWidth / 10 ),
        (window.innerHeight * i) / 10
      );
      isWrapper(xElements[0]);
      isWrapper(yElements[0]);
    };

    for (let i = 1; i <= 9; i++) {
      xElements = document.elementsFromPoint(
        (window.innerWidth * i) / 10,
        window.innerHeight / 2
      );
      yElements = document.elementsFromPoint(
        window.innerWidth / 2,
        (window.innerHeight * i) / 10
      );
      isWrapper(xElements[0]);
      isWrapper(yElements[0]);
    }

    // 白屏
    if (emptyPoints == 36) {
       ...
  };

总结

通过本文的学习，相信大家已经对白屏异常有了一定了解，也有了监控白屏异常的能力。本系列的下一节会继续介绍前端监控的异常关键信息。大家敬请期待！

前端监控之白屏异常| 青训营笔记

前言

白屏异常

如何监控白屏异常

相关补充

总结