Added error handling for rendering (fixes #715).

vazco · May 2, 2020 · 759a0a7 · 759a0a7
1 parent 04e1ff4
commit 759a0a7
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/website/components/Playground/index.js b/website/components/Playground/index.js
@@ -13,6 +13,10 @@ import { parseQuery, updateQuery } from './utils';
 import { themes } from '../universal';
 
 class Playground extends Component {
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+
   constructor() {
     super(...arguments);
 
@@ -46,7 +50,7 @@ class Playground extends Component {
       }));
     }
 
-    this.setState({ [key]: value });
+    this.setState({ error: undefined, [key]: value });
   }
 
   render() {
@@ -66,7 +70,11 @@ class Playground extends Component {
           <PlaygroundPropsField name="props" spellCheck={false} />
         </section>
 
-        <PlaygroundPreviewField name="props" nameTheme="theme" />
+        {this.state.error ? (
+          <pre children={'' + this.state.error} />
+        ) : (
+          <PlaygroundPreviewField name="props" nameTheme="theme" />
+        )}
       </PlaygroundForm>
     );
   }