OHIF记录（五）——关于ErrorBoundary组件

OHIF记录（五）——关于ErrorBoundary组件

在App.js文件里找到App组件的渲染函数render()，可以发现return的第一个组件是ErrorBoundary。

源码：

<ErrorBoundary context="App">
...
</ErrorBoundary>

组件传入了一个参数context

这是react16版本原生的一个组件，是一个错误边界组件，作用是可以在子组件树的任何位置捕获JavaScript错误，并记录这些错误，并显示一个备用UI，ErrorBoundary定义在’react-error-boundaries’包里边，使用前要先用npm安装包：

npm install react-error-boundary

然后通过import导入

import ErrorBoundary from ‘react-error-boundaries’

调用ErrorBoundary错误边界可以像普通react组件一样。

关于ErrorBoundary组件的详细介绍可以参考这篇文章：
https://zhuanlan.zhihu.com/p/32848336

在App.js里的ErrorBoundary组件是从文件Viewers\platform\ui\src\components\errorBoundary\ErrorBoundary.js导入的，在这个文件的import部分有一句 :

import { ErrorBoundary } from 'react-error-boundary';

引入了ErrorBoundary组件。

通过文件最后一行：

export default OHIFErrorBoundary;

可知App组件引入的实质是ErrorBoundary.js创建的函数式组件OHIFErrorBoundary。
观察OHIFErrorBoundary.propTypes源码：

OHIFErrorBoundary.propTypes = {
  context: PropTypes.string,
  onReset: PropTypes.func,
  onError: PropTypes.func,
  children: PropTypes.node.isRequired,
  fallbackComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]),
};

可知ErrorBoundary组件可以传入5个参数，context定义为一个字符串，onReset和onError定义为函数，children是子节点，子节点必须要有的。

OHIFErrorBoundary组件返回一个ErrorBoundary组件，return函数的源码如下：

  return (
    <ErrorBoundary
      FallbackComponent={fallbackComponent || ErrorFallback}
      onReset={onResetHandler}
      onError={onErrorHandler}
    >
      {children}
    </ErrorBoundary>
  );

如果源码执行报错，那么会执行onError对应的代码，即onErrorHandler函数：

const onErrorHandler = (error, componentStack) => {
  console.error(`${context} Error Boundary`, error, componentStack);
  onError(error, componentStack);
};

如果想添加新的报错功能，就可以在这个函数里边写，在这个函数内部，也可以写一个自定义的报错界面。

总结：如果程序正常运行，那么ErrorBoundary组件将不会显示，就像是没有这个组件一样，但是如果程序报错，那么将会执行这个组件里边的功能。