JS逆向分析：字节的火山引擎如何做前端白屏监控

前不久调研了web监控的一些竞品，本文通过JS逆向分析火山引擎web-pro监控白屏的原理

前不久调研了前端监控的一些产品，本文分析火山引擎web-pro监控的白屏原理，npm链接：@apmplus/web - npm

首先根据package.json找到入口文件，随便找一个js格式化网站，把压缩后的sdk格式化

代码里面blankScreen就是白屏分析的意思，可以找到这样的调用关系

PluginMap->BlankScreenMonitorVolPlugin->BlankScreenMonitorBasePlugin->blankScreenGetterWithObserver->measure和screenshot

最重要的就是measure函数，作用是判断是不是白屏，screenshot则是在白屏后做页面的截图

火山做白屏监控的方式是使用预置的算法来计算页面的得分，小于分数阈值则认为是白屏。

分析这个measure函数，可以得到以下信息：

主要计算规则:
1. 跳过条件判断:
（1）如果元素是 SCRIPT、STYLE、META、HEAD 等标签，则跳过
（2）如果元素深度超过最大深度(默认4)，则跳过

2. 单个元素得分计算:
（1）根节点(depth=0)得分为0；
（2）如果元素不可见(超出视口或高度为0)则得分为0
（3）可见元素得分 = 1/(2^(depth-1))，即深度越深，得分越低，呈指数衰减

3. 总得分计算:
（1）从下往上递归计算每个子元素得分，将当前元素得分与子元素得分累加，最终得到整个DOM树的总得分

4. 得分含义:
（1）得分越高表示页面内容越丰富，得分越低表示页面内容较少，可用于判断页面是否为白屏。
（2）这种计算方式的优点：考虑了元素的可见性，考虑了DOM树的深度，给予浅层元素更高权重，通过递归遍历完整DOM树，是一种比较科学的页面内容评分方法

检测到白屏后，采集js错误、请求异常、资源错误的信息

同时使用screenshot函数来做页面的截图，截图用的是html2canvas库

以上就是火山做白屏监控的原理了，使用dom节点的深度和可见性计算页面分数的方式，还是比较巧妙的。