Add Error Boundary and Crash message

Added all the strings to general l10n as error boundary/crash message applies to all pages.

src/components/crashmessage/crashmessage.jsx

@@ -0,0 +1,38 @@
+const classNames = require('classnames');
+const PropTypes = require('prop-types');
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+
+const Button = require('../forms/button.jsx');
+
+require('./crashmessage.scss');
+
+const CrashMessage = props => (
+    <div className={classNames(['crash-container', props.className])}>
+        <img
+            className=""
+            src="/images/unhandled.png"
+        />
+        <div className="crash-message">
+            <h2>
+                <FormattedMessage id="general.error" />
+            </h2>
+            <p>
+                <FormattedMessage id="general.unhandledError" />
+            </p>
+            <Button
+                className=""
+                onClick={props.onBack}
+            >
+                <FormattedMessage id="general.back" />
+            </Button>
+        </div>
+    </div>
+);
+
+CrashMessage.propTypes = {
+    className: PropTypes.string,
+    onBack: PropTypes.func
+};
+
+module.exports = CrashMessage;

src/components/crashmessage/crashmessage.scss

@@ -0,0 +1,22 @@
+.crash-container {
+    @import "../../colors";
+    @import "../../frameless";
+    
+    margin: 3rem auto;
+    
+    border: 1px solid $ui-border;
+    border-radius: 10px;
+    background-color: $background-color;
+    width: 60%;
+    overflow: hidden;
+    text-align: center;
+    
+    img {
+        width: 100%;
+    }
+    
+    .crash-message {
+        margin: 2rem;
+    }
+
+}

src/components/errorboundary/errorboundary.jsx

@@ -0,0 +1,36 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+const CrashMessageComponent = require('../crashmessage/crashmessage.jsx');
+import log from '../../lib/log.js';
+
+class ErrorBoundary extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            hasError: false
+        };
+    }
+
+    componentDidCatch (error, info) {
+        // Display fallback UI
+        this.setState({hasError: true});
+        log.error(`Unhandled Error: ${error}, info: ${info}`);
+    }
+
+    handleBack () {
+        window.history.back();
+    }
+
+    render () {
+        if (this.state.hasError) {
+            return <CrashMessageComponent onBack={this.handleBack} />;
+        }
+        return this.props.children;
+    }
+}
+ErrorBoundary.propTypes = {
+    children: PropTypes.node
+};
+
+module.exports = ErrorBoundary;

src/components/page/www/page.jsx

@@ -4,8 +4,10 @@ const React = require('react');
 
 const Navigation = require('../../navigation/www/navigation.jsx');
 const Footer = require('../../footer/www/footer.jsx');
+const ErrorBoundary = require('../../errorboundary/errorboundary.jsx');
 
 const Page = props => (
+    <ErrorBoundary>
         <div className="page">
             <div
                 className={classNames({
@@ -22,6 +24,7 @@ const Page = props => (
                 <Footer />
             </div>
         </div>
+    </ErrorBoundary>
 );
 
 Page.propTypes = {

src/l10n.json

@@ -2,6 +2,7 @@
     "general.accountSettings": "Account settings",
     "general.about": "About",
     "general.aboutScratch": "About Scratch",
+    "general.back": "Back",
     "general.birthMonth": "Birth Month",
     "general.birthYear": "Birth Year",
     "general.donate": "Donate",
@@ -73,6 +74,7 @@
     "general.tips": "Tips",
     "general.tipsWindow": "Tips Window",
     "general.termsOfUse": "Terms of Use",
+    "general.unhandledError": "We are so sorry, but it looks like Scratch has crashed. This bug has been automatically reported to the Scratch Team.",
     "general.username": "Username",
     "general.validationEmail": "Please enter a valid email address",
     "general.validationEmailMatch": "The emails do not match",