Merge pull request #1516 from chrisgarrity/feature/gh1205-oops-error

Nicer crash message format

src/components/crash-message/crash-message.css

+@import "../../css/colors.css";
+@import "../../css/units.css";
+@import "../../css/typography.css";
+
+.crash-wrapper {
+    background-color: $motion-primary;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.body {
+    width: 35%;
+    color: white;
+    text-align: center;
+}
+
+.reloadButton {
+    border: 1px solid $motion-primary;
+    border-radius: 0.25rem;
+    padding: 0.5rem 2rem;
+    background: white;
+    color: $motion-primary;
+    font-weight: bold;
+    font-size: 0.875rem;
+    cursor: pointer;
+}

src/components/crash-message/crash-message.jsx

+import PropTypes from 'prop-types';
+import React from 'react';
+import Box from '../box/box.jsx';
+
+import styles from './crash-message.css';
+import reloadIcon from './reload.svg';
+
+const CrashMessage = props => (
+    <div className={styles.crashWrapper}>
+        <Box className={styles.body}>
+            <img
+                className={styles.reloadIcon}
+                src={reloadIcon}
+            />
+            <h2>
+                Oops! Something went wrong.
+            </h2>
+            <p>
+                We are so sorry, but it looks like Scratch has crashed. This bug has been
+                automatically reported to the Scratch Team. Please refresh your page to try
+                again.
+
+            </p>
+            <button
+                className={styles.reloadButton}
+                onClick={props.onReload}
+            >
+                Reload
+            </button>
+        </Box>
+    </div>
+);
+
+CrashMessage.propTypes = {
+    onReload: PropTypes.func.isRequired
+};
+
+export default CrashMessage;

src/containers/error-boundary.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import platform from 'platform';
 import BrowserModalComponent from '../components/browser-modal/browser-modal.jsx';
+import CrashMessageComponent from '../components/crash-message/crash-message.jsx';
 import log from '../lib/log.js';
 import analytics from '../lib/analytics';
 
@@ -28,21 +29,16 @@ class ErrorBoundary extends React.Component {
         window.history.back();
     }
 
+    handleReload () {
+        window.location.replace(window.location.origin);
+    }
+
     render () {
         if (this.state.hasError) {
             if (platform.name === 'IE') {
                 return <BrowserModalComponent onBack={this.handleBack} />;
             }
-            return (
-                <div style={{margin: '2rem'}}>
-                    <h1>Oops! Something went wrong.</h1>
-                    <p>
-                        We are so sorry, but it looks like Scratch has crashed. This bug has been
-                        automatically reported to the Scratch Team. Please refresh your page to try
-                        again.
-                    </p>
-                </div>
-            );
+            return <CrashMessageComponent onReload={this.handleReload} />;
         }
         return this.props.children;
     }