Error Screen on Exception (#539)

* Create ErrorScreen component to show Errors when a component catches.

* Show ErrorScreen component when Root component's componentDidCatch lifecycle method is called.

This should catch all of the applications errors, as Root is at the top of the tree.

* Convert ErrorScreen Component to SFC

* Address PR comments

common/Root.tsx

@@ -12,6 +12,7 @@ import ViewWallet from 'containers/Tabs/ViewWallet';
 import SignAndVerifyMessage from 'containers/Tabs/SignAndVerifyMessage';
 import BroadcastTx from 'containers/Tabs/BroadcastTx';
 import RestoreKeystore from 'containers/Tabs/RestoreKeystore';
+import ErrorScreen from 'components/ErrorScreen';
 
 // TODO: fix this
 interface Props {
@@ -19,11 +20,26 @@ interface Props {
   history: any;
 }
 
-export default class Root extends Component<Props, {}> {
+interface State {
+  hasError: boolean;
+}
+
+export default class Root extends Component<Props, State> {
+  public state = {
+    hasError: false
+  };
+
+  public componentDidCatch() {
+    this.setState({ hasError: true });
+  }
+
   public render() {
     const { store, history } = this.props;
+    const { hasError } = this.state;
     // key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
-    return (
+    return hasError ? (
+      <ErrorScreen />
+    ) : (
       <Provider store={store} key={Math.random()}>
         <Router history={history} key={Math.random()}>
           <div>
@@ -35,10 +51,7 @@ export default class Root extends Component<Props, {}> {
             <Route path="/contracts" component={Contracts} />
             <Route path="/ens" component={ENS} />
             <Route path="/utilities" component={RestoreKeystore} />
-            <Route
-              path="/sign-and-verify-message"
-              component={SignAndVerifyMessage}
-            />
+            <Route path="/sign-and-verify-message" component={SignAndVerifyMessage} />
             <Route path="/pushTx" component={BroadcastTx} />
             <LegacyRoutes />
           </div>

common/components/ErrorScreen/index.scss

@@ -0,0 +1,8 @@
+@import 'common/sass/variables';
+@import 'common/sass/mixins';
+
+.ErrorScreen {
+  @include cover-message;
+  background: $brand-danger;
+
+}

common/components/ErrorScreen/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import './index.scss';
+
+const SUBJECT = 'Error!';
+const DESCRIPTION =
+  'I encountered an error while using MyEtherWallet. Here are the steps to re-create the issue: ...';
+
+const ErrorScreen: React.SFC<{}> = () => {
+  return (
+    <div className="ErrorScreen">
+      <div className="ErrorScreen-content">
+        <h2>Oops!</h2>
+        <p>Something went really wrong, so we're showing you this red error page! 😱</p>
+        <p>
+          Please contact{' '}
+          <a
+            target="_blank"
+            rel="noopener"
+            href={`mailto:support@myetherwallet.com?Subject=${SUBJECT}&body=${DESCRIPTION}`}
+          >
+            support@myetherwallet.com
+          </a>{' '}
+          if a refresh doesn't fix it (or click it anyway to open a ticket 😊 ).
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorScreen;