tweak: ErrorBoundary

ycjcl868 · ycjcl868 · commit 0a0df12f2caa · 2019-10-10T01:53:37.000+08:00
diff --git a/packages/umi-plugin-ui/src/bubble/ErrorBoundary.jsx b/packages/umi-plugin-ui/src/bubble/ErrorBoundary.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+// 在 dev 下似乎没有用，会被 HMR 拦截
+export default class ErrorBoundary extends React.Component {
+  static defaultProps = {
+    onError: null,
+    enable: true,
+  };
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+    };
+  }
+  componentDidCatch(error, info) {
+    const { onError } = this.props;
+    console.error('Umi UI mini error', error);
+    if (onError && typeof onError === 'function') {
+      onError(error, info);
+    }
+  }
+  render() {
+    const { children, enable } = this.props;
+    const { hasError } = this.state;
+    if (hasError && enable) {
+      return null;
+    }
+    return children;
+  }
+}
diff --git a/packages/umi-plugin-ui/src/bubble/index.jsx b/packages/umi-plugin-ui/src/bubble/index.jsx
@@ -9,6 +9,7 @@ import Bubble from './Bubble';
 import Modal from './Modal';
 import Loading from './Loading';
 import Error from './Error';
+import ErrorBoundary from './ErrorBoundary';
 
 const winPath = input => {
   if (!input) {
@@ -250,6 +251,11 @@ doc.body.appendChild(node);
 
 export default props => {
   if (!isMobile(navigator.userAgent)) {
-    ReactDOM.render(<App {...props} />, node);
+    ReactDOM.render(
+      <ErrorBoundary>
+        <App {...props} />
+      </ErrorBoundary>,
+      node,
+    );
   }
 };
