错误采集
性能监控
插件化架构
sendBeacon + Fetch fallback 双通道上报 解决页面卸载时数据丢失；基于IndexedDB实现离线队列支持弱网重传
集成rrweb实现会话录制，针对SPA路由切换导致的DOM快照断裂问题，设计EventsMatrix二维时间片存储方案，配合History API劫持，实现路由变化时主动触发快照更新；
基于tsup构建输出ESM/CJS/UMD多格式，核心模块与rrweb插件分离打包，核心 < 10KB，完整版含录制约65KB；
白屏检测方案
通过在页面上选取多个采样点，使用 document.elementFromPoint(x,y) 获取每个坐标点上的最顶层DOM元素，然后判断这些元素是否为“空白”容器（如根节点 div#app、body、html等），从而判断页面是否白屏
字段设计：
| 字段 | 值 | 含义 |
|---|---|---|
isWhiteScreen | true | 判定为白屏 |
totalPoints | 10 | 总共采样了 10 个点 |
whiteScreenCount | 10 | 其中 10 个点 命中了白屏元素 |
threshold | 7 | 白屏判定阈值为 7（≥7 个点命中即判定白屏） |
whiteScreenRatio | "100.00%" | 白屏比例为 100% |
整个方案的工作流程如下：
function detectWhiteScreen() {
// 1. 定义采样点坐标（通常基于屏幕宽高的比例分布）
const points = generateSamplePoints(totalPoints); // 10个点
// 2. 定义"白屏元素"的选择器（命中这些元素视为空白）
const whiteSelectors = ['html', 'body', 'div#app', 'div#root'];
// 3. 遍历每个采样点，获取最顶层元素
let whiteScreenCount = 0;
points.forEach(({ x, y }) => {
const element = document.elementFromPoint(x, y);
const selector = getElementSelector(element); // 如 "div#app"
if (whiteSelectors.includes(selector)) {
whiteScreenCount++;
}
});
// 4. 与阈值比较，判定是否白屏
const isWhiteScreen = whiteScreenCount >= threshold; // threshold = 7
// 5. 输出结果
return {
isWhiteScreen, // true
totalPoints, // 10
whiteScreenCount, // 10
threshold, // 7
whiteScreenRatio: (whiteScreenCount / totalPoints * 100).toFixed(2) + '%'
};
}这种方案的优势在于轻量、无侵入，不依赖截图或 Canvas，纯 DOM 操作即可完成检测，适合集成到前端监控 SDK 中作为页面可用性的兜底检测。