Blankscreen NPM

README

白屏监控组件，支持多实例，默认支持全屏白屏监控，和 React 组件白屏监控。

USAGE

全局白屏监控

blankscreen 内置了全屏白屏监控，引入 blankscreen 后，只需要复写 onError, onSuccess 方法即可。

import BlankScreen from 'blankscreen';

BlankScreen.onError = function(err) {
  console.log('full-page blank screen', err);
};
BlankScreen.onSuccess = function(meta) {
  console.log('full-page OK', meta);
};

React 组件白屏监控

blankscreen 还内置了 React 组件，包含待检查的组件外部即可检查内部是否处于白屏状态。

import ReactBlankScreen from 'blankscreen/lib/react';

render() {
  return (
    <ReactBlankScreen
      rule-text={10}
      onError={this.onError}
      onSuccess={this.onSuccess}
      autoStart
    >
      <div></div>
    </ReactBlankScreen>
  );
}

如果组件需要异步检查，不设置 autoStart 或设置为 false，然后通过 ref 主动调用 start() 方法启动检查。

import ReactBlankScreen from 'blankscreen/lib/react';

componentDidMount() {
  setTimeout(() => {
    this.refs.blankscreen.start();
  }, 1000);
}

render() {
  return (
    <ReactBlankScreen
      ref="blankscreen"
      rule-text={10}
      onError={this.onError}
      onSuccess={this.onSuccess}
    >
      <div></div>
    </ReactBlankScreen>
  );
}

基础用法

import BaseBlankScreen from 'blankscreen/lib/base';

const bs = new BaseBlankScreen(element, {
  rule: {
    text: 0,
  },
  onError: err => console.error(err),
  onSuccess: meta => console.log(meta),
  autoStart: true,
})
bs.start();

白屏判定规则

文字\元素	有	无
有	黑	黑
无	白	白

原则上，只通过是否有指定个数的『文字』来判定是否白屏，子元素个数多少不作为判定条件，只作为附加信息。

注：

黑：判定为不是白屏。
白：判定为白屏。

API

BlankScreen(element, options)

{HTMLElement} element 监控的元素，如果是 React 元素，则是其子节点。
{Object} options 可选的选项配置。
- {Number} rule-text: 白屏规则：有效文本（剔除无效空白符）最少个数，默认设置是 0。子节点有效文本少于或等于这个值，则认为是白屏。
- {Function} onError: 最终判定为白屏时，会触发 onError
- {Function} onSuccess: 页面开始正常渲染时，会触发 onSuccess
- {Boolean} autoStart: 自动开始检查，默认 false。