白屏监控

概述

白屏现象是影响用户体验和流失的关键问题之一。EMAS的白屏监测模块通过有效的指标和检测方法，帮助用户及时发现和修复白屏问题，提升应用的稳定性和用户满意度。通过对页面DOM得分的计算，我们可以量化白屏的严重程度，并提供详细的分析数据，指导优化方向。

白屏原因与表现

白屏通常发生在以下两个场景：

• 加载时：受网络延迟、资源加载失败或服务器错误影响，页面无法正常渲染。

• 运行时：用户操作过程中可能由于JS错误或资源请求失败，导致页面突然变白。

了解白屏的原因和表现形式，有助于更精准地定位问题。

白屏检测方式

EMAS白屏监测采用了一种改进的方式，通过遍历页面的DOM树，计算每个节点的层次和可见性，从而得出白屏得分。这种方法相较于传统手段具有更高的准确性，并且能够精细化地评估白屏的程度。

• 场景感知检测：在白屏检测过程中，我们会根据实际应用场景选择合适的检测时机。这不仅确保了能够捕捉到不同类型的白屏现象，还有效避免了过于频繁的检测对页面性能的负面影响。

• 定量分析与优化算法：通过对DOM得分的计算，我们实现了对白屏程度的定量分析。我们从用户的视角出发，综合考虑了DOM元素的重叠、CSS属性等因素，以判断元素的可见性，使得白屏得分更具实际参考意义。同时，我们还对遍历算法进行了优化，以减少复杂页面情况下的计算消耗。

  说明

  白屏得分算法：遍历页面的DOM树，并对每个可视元素进行评估，根据其在树中的深度来计算其白屏得分 ($$depth={\log }_2\frac{1}{score}+1$$)。所有可视元素的分数总和构成页面的白屏得分

准备工作

• 使用白屏监控功能之前，需要接入EMAS APM SDK，参见SDK接入。

• 已打开白屏模块上报开关，参见上报配置。

功能说明

趋势分析

白屏趋势展示筛选条件下，白屏指标的趋势图，查看白屏现象的波动和影响面。

分布分析

分布分析支持通过多维统计（如浏览器版本、操作系统版本、机型等）来观测白屏发生的分布情况以及定位问题。

• 默认以浏览器、系统、机型、城市四个维度展示白屏分布情况，支持点击“分布维度”按钮下拉勾选维度替换默认维度，最少选择1个，最多选择4个。

• 点击可以切换视图：分布排行、列表排行。

白屏列表

白屏列表展示了页面维度的白屏情况，包括发生白屏的所有页面URL、白屏数、影响用户数、最近发生时间和问题状态。

• 白屏得分：计算DOM深度得分判断白屏，数值越小，白屏越严重。列表中的白屏得分，展示筛选条件下，该页面发生的最严重白屏的得分，即白屏得分最小值。

• 排序方式：指标支持排序，默认按照白屏数从高到低排序。

• 查看详情：点击页面URL，进入到对应的白屏详情分析页。

白屏详情

白屏详情支持针对页面维度做详细下钻分析，提供该页面白屏概况汇总的基本信息、趋势分析、分布分析和调用堆栈分析的问题分析能力，并提供每一次客户端上报的详细信息。

基本信息

详细信息

展示同一页面中的所有客户端上报白屏的实例。左侧按照白屏发生的时间顺序排列，点击后右侧展示此次白屏的详细上报字段。

基础信息

基础信息显示了每条白屏的基础设备信息。

当前选项

当前选项展示了每条白屏的详细信息。

治理技巧

在解决白屏问题的过程中，结合阿里丰富的业务经验，我们总结了一些常见的白屏情况以及相应的治理策略。这些技巧将帮助用户更好地分析数据并采取有效措施。

白屏与其他错误的关联

在白屏问题排查时，常常可以发现白屏现象与其他错误，如JavaScript错误（JSError）或资源加载错误，具有明显的关联。当某个时间点白屏数量显著增加，同时JSError或资源加载错误的次数也同步增长时，这往往表明对应的错误可能是导致白屏的根本原因。

排查步骤：

1. 错误日志分析：使用JSError插件查看具体的错误信息，如错误消息、堆栈跟踪等。

2. 错误与白屏的关系：对比错误发生的时间和白屏事件，确定两者之间的关联性。

3. 问题修复与观察：定位并解决这些错误后，观察白屏数量是否有所减少，以验证问题解决的有效性。

结合筛选、多维度下钻、白屏详情进行分析

为进一步提高白屏问题的诊断效率，我们引入了一些新的分析方法：

• 结合筛选：在控制台中，利用筛选功能对不同维度的数据进行过滤，聚焦于特定场景或条件下的白屏事件。这有助于快速识别异常模式或特定用户群体中频繁出现的问题。

• 多维度下钻：通过多维度的下钻分析，用户可以从全局视角逐步深入到更细节的层次。比如，可以按时间、地理位置、浏览器版本等维度查看白屏数据，以便识别影响白屏发生的潜在因素。

• 白屏详情分析：利用提供的白屏详情视图，可以查看每个白屏事件的具体信息，包括触发时间、页面路径、白屏原因等。这些细节有助于重现问题场景，精确定位问题来源。

通过以上技巧和方法，用户能够更系统地分析白屏问题，采取有效修复措施，从而改善应用的稳定性和用户体验。

补充信息

异常监控用于观测您的用户使用应用的稳定性，尤其在产生客诉的情况下，便于快速分析和定位原因，因此建议100%采样。如果有成本控制需求，可以在上报配置>白屏中灵活配置采样规则和采样率。