mirror of
https://github.com/status-im/MyCrypto.git
synced 2025-01-13 12:35:38 +00:00
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:
parent
a46c35a3e4
commit
ae708e70a1
@ -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>
|
||||||
|
8
common/components/ErrorScreen/index.scss
Normal file
8
common/components/ErrorScreen/index.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
@import 'common/sass/variables';
|
||||||
|
@import 'common/sass/mixins';
|
||||||
|
|
||||||
|
.ErrorScreen {
|
||||||
|
@include cover-message;
|
||||||
|
background: $brand-danger;
|
||||||
|
|
||||||
|
}
|
30
common/components/ErrorScreen/index.tsx
Normal file
30
common/components/ErrorScreen/index.tsx
Normal 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;
|
Loading…
x
Reference in New Issue
Block a user