fix(site-playground): add missing error handling to fix WSOD (#991) (#…

…1154)
cssnano · Jul 2, 2021 · 3ebc3d9 · 3ebc3d9
1 parent ef098b1
commit 3ebc3d9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 6 deletions.
diff --git a/site/src/components/editor/editor.module.css b/site/src/components/editor/editor.module.css
@@ -40,3 +40,13 @@
   left: 50%;
   z-index: 99;
 }
+
+.inputError {
+  color: #fff;
+  background-color: #bc1515;
+  padding: 0.3em 1em;
+}
+
+.inputError[data-theme='light'] {
+  background-color: #ff5959;
+}
diff --git a/site/src/components/editor/inputError.js b/site/src/components/editor/inputError.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import styles from './editor.module.css';
+
+class InputError extends Component {
+  render() {
+    return (
+      <div className={styles.inputError} data-theme={this.props.theme}>
+        {this.props.error}
+      </div>
+    );
+  }
+}
+
+export default InputError;
diff --git a/site/src/pages/playground.js b/site/src/pages/playground.js
@@ -4,6 +4,7 @@ import prettier from 'prettier/standalone';
 import cssParser from 'prettier/parser-postcss';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import className from 'classnames';
+import { CssSyntaxError } from 'postcss';
 import { RingSpinner as Loader } from '../components/editor/RingSpinner.js';
 import MainEditor from '../components/editor/main';
 import OutputEditor from '../components/editor/output';
@@ -14,6 +15,7 @@ import InnerNav from '../components/editor/innerNav.';
 import runner from '../components/editor/postcss_runner';
 import editorStyles from '../components/editor/editor.module.css';
 import CarbonAds from '../components/carbonAds';
+import InputError from '../components/editor/inputError.js';
 import styles from './styles.module.css';
 
 export default () => {
@@ -40,6 +42,7 @@ export default () => {
   const [output, setOutput] = useState('/* your optimized output here */');
   const [input, setInput] = useState(intializedState.input);
   const [config, setConfig] = useState(intializedState.config);
+  const [error, setError] = useState('');
 
   function toggleTheme() {
     setTheme(theme === 'light' ? 'vs-dark' : 'light');
@@ -53,12 +56,35 @@ export default () => {
     setInput(value);
   }
 
+  function handleError(err) {
+    switch (err.constructor) {
+      case CssSyntaxError:
+        setError(`CssSyntaxError: ${err.reason} (${err.line}:${err.column})`);
+        break;
+      case SyntaxError:
+        setError(err.message.split('\n').shift());
+        break;
+      default:
+        setError('Unknown error. See browser console for details.');
+        console.error(err);
+    }
+  }
+
+  function resetError() {
+    setError('');
+  }
+
   function format() {
-    const formattedInput = prettier.format(input, {
-      parser: 'css',
-      plugins: [cssParser],
-    });
-    setInput(formattedInput);
+    try {
+      resetError();
+      const formattedInput = prettier.format(input, {
+        parser: 'css',
+        plugins: [cssParser],
+      });
+      setInput(formattedInput);
+    } catch (err) {
+      handleError(err);
+    }
   }
 
   function saveState() {
@@ -86,10 +112,11 @@ export default () => {
     const resolvedConfig = resolveConfigs(configToSend);
     runner(input, resolvedConfig)
       .then((res) => {
+        resetError();
         setOutput(res.css);
       })
       .catch((err) => {
-        setOutput(err);
+        handleError(err);
       });
 
     setEditorLoading(false);
@@ -147,6 +174,7 @@ export default () => {
         format={format}
         save={saveState}
       />
+      {error && <InputError error={error} theme={theme} />}
       <div
         className={editorStyles.panelLoaderPlaceholder}
         style={{ display: editorLoading ? 'block' : 'none' }}