site: Add ErrorBoundary for live demo, ref ant-design#11553

whtsky · Aug 2, 2018 · e397c09 · e397c09
1 parent 7ec5669
commit e397c09
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md
@@ -22,9 +22,6 @@ class IntegerStep extends React.Component {
   }
 
   onChange = (value) => {
-    if (isNaN(value)) {
-      return;
-    }
     this.setState({
       inputValue: value,
     });

diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import LZString from 'lz-string';
 import { Icon, Tooltip } from 'antd';
 import EditButton from './EditButton';
+import ErrorBoundary from './ErrorBoundary';
 import BrowserFrame from '../BrowserFrame';
 import { ping } from '../utils';
 
@@ -183,7 +184,9 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
     return (
       <section className={codeBoxClass} id={meta.id}>
         <section className="code-box-demo">
-          {this.liveDemo}
+          <ErrorBoundary>
+            {this.liveDemo}
+          </ErrorBoundary>
           {
             style
               ? <style dangerouslySetInnerHTML={{ __html: style }} />

diff --git a/site/theme/template/Content/ErrorBoundary.js b/site/theme/template/Content/ErrorBoundary.js
@@ -0,0 +1,22 @@
+import React from 'React';
+import { Alert } from 'antd';
+
+export default class ErrorBoundary extends React.Component {
+  state = {
+    error: null,
+  };
+
+  componentDidCatch(error, info) {
+    this.setState({ error, info });
+  }
+
+  render() {
+    const { children } = this.props;
+    const { error, info } = this.state;
+    if (error) {
+      // You can render any custom fallback UI
+      return <Alert type="error" message={error.toString()} description={info.componentStack} />;
+    }
+    return children;
+  }
+}