type
status
date
slug
summary
tags
category
icon
password
上次编辑时间
Apr 8, 2025 03:27 PM
前不久调研了前端监控的一些产品，本文分析火山引擎web-pro监控的白屏原理，npm链接：@apmplus/web - npm
首先根据package.json找到入口文件，随便找一个js格式化网站，把压缩后的sdk格式化
代码里面blankScreen就是白屏分析的意思，可以找到这样的调用关系
最重要的就是measure函数，作用是判断是不是白屏，screenshot则是在白屏后做页面的截图
火山做白屏监控的方式是使用预置的算法来计算页面的得分，小于分数阈值则认为是白屏。
分析这个measure函数，可以得到以下信息：
检测到白屏后，采集js错误、请求异常、资源错误的信息
同时使用screenshot函数来做页面的截图，截图用的是html2canvas库
以上就是火山做白屏监控的原理了，使用dom节点的深度和可见性计算页面分数的方式，还是比较巧妙的。
- 作者:Tsing
- 链接:https://www.huqing.site/front-end/d2bb79dc-ef3a-434c-9ed6-cb80a4d53650
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
