diff --git a/common/Root.tsx b/common/Root.tsx index 301ac050..3ae6f5ff 100644 --- a/common/Root.tsx +++ b/common/Root.tsx @@ -21,25 +21,28 @@ interface Props { } interface State { - hasError: boolean; + error: Error | null; } export default class Root extends Component { public state = { - hasError: false + error: null }; - public componentDidCatch() { - this.setState({ hasError: true }); + public componentDidCatch(error) { + this.setState({ error }); } public render() { const { store, history } = this.props; - const { hasError } = this.state; + const { error } = this.state; + + if (error) { + return ; + } + // key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395 - return hasError ? ( - - ) : ( + return (
diff --git a/common/components/ErrorScreen/index.scss b/common/components/ErrorScreen/index.scss index e840be61..f4998219 100644 --- a/common/components/ErrorScreen/index.scss +++ b/common/components/ErrorScreen/index.scss @@ -5,4 +5,16 @@ @include cover-message; background: $brand-danger; + code { + display: block; + word-wrap: break-word; + background: rgba(#fff, 0.25); + border: 1px solid rgba(#fff, 0.6); + color: #FFF; + width: 100%; + padding: 10px; + border-radius: 2px; + text-shadow: none; + opacity: 0.8; + } } diff --git a/common/components/ErrorScreen/index.tsx b/common/components/ErrorScreen/index.tsx index efb51165..bb263c4f 100644 --- a/common/components/ErrorScreen/index.tsx +++ b/common/components/ErrorScreen/index.tsx @@ -3,9 +3,13 @@ import './index.scss'; const SUBJECT = 'Error!'; const DESCRIPTION = - 'I encountered an error while using MyEtherWallet. Here are the steps to re-create the issue: ...'; + 'I encountered an error while using MyEtherWallet. Here are the steps to re-create the issue:\n\nThe full error message:'; -const ErrorScreen: React.SFC<{}> = () => { +interface Props { + error: Error; +} + +const ErrorScreen: React.SFC = ({ error }) => { return (
@@ -20,8 +24,14 @@ const ErrorScreen: React.SFC<{}> = () => { > support@myetherwallet.com {' '} - if a refresh doesn't fix it (or click it anyway to open a ticket 😊 ). + if a refresh doesn't fix it (or click it anyway to open a ticket 😊). If you attach the + following error, you'll make it a ton easier to fix the issue.

+
+ Please make sure the error message does not include any sensitive information before + sending it us. We don't want your private keys! +
+ {error.message}
); diff --git a/common/index.html b/common/index.html index 3268314a..81d0f531 100644 --- a/common/index.html +++ b/common/index.html @@ -97,9 +97,6 @@ eval('let a = 1;'); eval('const b = 1'); - // Object.assign - Object.assign({}, {}); - // Local storage window.localStorage.setItem('test', 'test'); window.localStorage.removeItem('test'); diff --git a/common/index.tsx b/common/index.tsx index 79aeaa7e..7f4a9850 100644 --- a/common/index.tsx +++ b/common/index.tsx @@ -2,6 +2,8 @@ import 'assets/styles/etherwallet-master.less'; import 'font-awesome/scss/font-awesome.scss'; import 'sass/styles.scss'; +import 'babel-polyfill'; +import 'whatwg-fetch'; import React from 'react'; import { render } from 'react-dom'; import Root from './Root'; diff --git a/package.json b/package.json index d9402ce6..e53e542d 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "npm": ">= 5.0.0" }, "dependencies": { + "babel-polyfill": "6.26.0", "bip39": "2.4.0", "bn.js": "4.11.8", "bootstrap-sass": "3.3.7", @@ -136,6 +137,9 @@ "prepush": "npm run tslint && npm run tscheck" }, "lint-staged": { - "*.{ts,tsx}": ["prettier --write", "git add"] + "*.{ts,tsx}": [ + "prettier --write", + "git add" + ] } }