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
This commit is contained in:
Daniel Ternyak 2017-12-07 22:16:27 -08:00 committed by GitHub
parent a46c35a3e4
commit ae708e70a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 6 deletions

View File

@ -12,6 +12,7 @@ import ViewWallet from 'containers/Tabs/ViewWallet';
import SignAndVerifyMessage from 'containers/Tabs/SignAndVerifyMessage'; import SignAndVerifyMessage from 'containers/Tabs/SignAndVerifyMessage';
import BroadcastTx from 'containers/Tabs/BroadcastTx'; import BroadcastTx from 'containers/Tabs/BroadcastTx';
import RestoreKeystore from 'containers/Tabs/RestoreKeystore'; import RestoreKeystore from 'containers/Tabs/RestoreKeystore';
import ErrorScreen from 'components/ErrorScreen';
// TODO: fix this // TODO: fix this
interface Props { interface Props {
@ -19,11 +20,26 @@ interface Props {
history: any; 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() { public render() {
const { store, history } = this.props; 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 // 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()}> <Provider store={store} key={Math.random()}>
<Router history={history} key={Math.random()}> <Router history={history} key={Math.random()}>
<div> <div>
@ -35,10 +51,7 @@ export default class Root extends Component<Props, {}> {
<Route path="/contracts" component={Contracts} /> <Route path="/contracts" component={Contracts} />
<Route path="/ens" component={ENS} /> <Route path="/ens" component={ENS} />
<Route path="/utilities" component={RestoreKeystore} /> <Route path="/utilities" component={RestoreKeystore} />
<Route <Route path="/sign-and-verify-message" component={SignAndVerifyMessage} />
path="/sign-and-verify-message"
component={SignAndVerifyMessage}
/>
<Route path="/pushTx" component={BroadcastTx} /> <Route path="/pushTx" component={BroadcastTx} />
<LegacyRoutes /> <LegacyRoutes />
</div> </div>

View File

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

View File

@ -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;