white screen check

接入文档

接入方式

Using npm:

npm install @yqg/white-screen-check

Using yarn:

yarn add @yqg/white-screen-check

使用方式

import whiteScreenCheck from '@shared/client/util/white-screen-check';
 
whiteScreenCheck.init({
    callback({isWhiteScreen}) {
        if(isWhiteScreen) {
            // 页面白屏
        }
    }
})

参数说明

init参数：

| 参数 | 描述 | 默认值 | 备注 | | :--- | :--- | :--- | :--- | | callback | 检测结果回调 | 无 | 检测会返回一个对象，参数 isWhiteScreen 是否白屏，selector 白屏选择器，error 检测失败错误信息 | | container | 空容器列表 | ['html', 'body', '#app'] | 采样点采到的最顶层元素如果命中空容器，则认为当前采样点是空白点 | | strictContainer | 严格容器列表 | [] | 采样点采到的元素列表中如果包含严格容器，则认为当前采样点是空白点 | | maxRetryTime | 最大重试次数 | 5 | 首次检测白屏后后会进行重试，每次延迟1s检测，超过最大重试次数仍然白屏则认为是白屏 | | emptyPointLimit | 空白点阈值 | 33 | 采样点检测到的空白点大于等于空白点阈值则认为是白屏，最大值为33 | | reportConfig | 日志上报参数 | 无 | 不配置则不上报，可自行上报。详细配置见下表 默认上报参数：time（当前时间）、isWhiteScreen（是否白屏 Boolean）、selector(当前白屏选择器，非白屏NONE) |

reportConfig配置参数：

| 参数 | 描述 | 类型 | 默认值 | 是否必填 | 备注 | | :--- | :--- | :--- | :--- | :--- | :--- | | appId | 应用ID | String | 无 | 是 | WEB各系统AppId定义 | | country | 国家编码 | String | 无 | 是 | CN - 中国 IDN - 印度尼西亚 BRA - 巴西 INDIA - 印度 PHI - 菲律宾 MEX - 墨西哥 THA - 泰国 POL - 波兰 | | measurement | 模板唯一键 | String | app_metrics_for_white_screen | 否 | | | metricsType | 埋点名 | String | WHITE_SCREEN | 否 | | | parameter | 自定义额外参数 | Object | 无 | 否 | | | isReportAll | 是否全上报 | Boolean | false | 否 | 默认只上报白屏即isWhiteScreen: true的情况， 配置全上报后检测完成都上报 |

注意事项：

1、container配置的时候需要注意选择器的唯一，一些缺失选择器的容器需要业务上进行补充，并设置到container里。

2、若要将loading和骨架屏(包含型选择器)认为是白屏，需要配置strictContainer。需要注意的是该选择器需要在loading结束后移除，否则会检测异常。

参考文档