From 4f835b793496e6ebcacb2d4cdb1740cfa35ececc Mon Sep 17 00:00:00 2001 From: vrde Date: Fri, 6 Sep 2019 16:24:19 +0200 Subject: [PATCH 1/3] Add global error handler Fix #91 --- package-lock.json | 15 +++++++ package.json | 1 + src/App.js | 1 + src/components/Advanced.js | 2 +- src/components/ErrorBoundary.js | 74 +++++++++++++++++++++++++++++++++ src/index.js | 5 ++- 6 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 src/components/ErrorBoundary.js diff --git a/package-lock.json b/package-lock.json index b43b5231c..86a9ba68e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24758,6 +24758,21 @@ "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=" }, + "sourcemapped-stacktrace": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.11.tgz", + "integrity": "sha512-O0pcWjJqzQFVsisPlPXuNawJHHg9N9UgpJ/aDmvi9+vnS3x1C0NhwkVFzzZ1VN0Xo+bekyweoqYvBw5ZBKiNnQ==", + "requires": { + "source-map": "0.5.6" + }, + "dependencies": { + "source-map": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=" + } + } + }, "space-separated-tokens": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.4.tgz", diff --git a/package.json b/package.json index 0225b7851..80c5095f7 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "react-scroll": "^1.7.10", "react-sound": "^1.2.0", "rimble-ui": "0.4.2", + "sourcemapped-stacktrace": "^1.1.11", "styled-components": "^4.1.3", "web3": "1.0.0-beta.36", "ya-bbcode": "^1.0.9" diff --git a/src/App.js b/src/App.js index f4b4eab5b..404853780 100644 --- a/src/App.js +++ b/src/App.js @@ -867,6 +867,7 @@ class App extends Component { const { voteStartTime, voteEndTime, trashBox } = this.state; const web3Props = { plasma: xdaiweb3, web3, account, metaAccount }; + return ( <> {account ? ( diff --git a/src/components/Advanced.js b/src/components/Advanced.js index d586732df..e8ec2ec93 100644 --- a/src/components/Advanced.js +++ b/src/components/Advanced.js @@ -231,7 +231,7 @@ export default class Advanced extends React.Component { {privateKey &&
- this.props.history.push("/burn")}> + this.props.history.push("/burn")}> {i18n.t('burn')} diff --git a/src/components/ErrorBoundary.js b/src/components/ErrorBoundary.js new file mode 100644 index 000000000..b139938c0 --- /dev/null +++ b/src/components/ErrorBoundary.js @@ -0,0 +1,74 @@ +// Nice stuff here: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html +// Code taken from Dan Abramov's pen https://codepen.io/gaearon/pen/wqvxGa + +import React from "react"; +import { Box, Card, Heading, Flex, Button } from "rimble-ui"; +import styled from "styled-components"; +import { CopyToClipboard } from "react-copy-to-clipboard"; +import { mapStackTrace } from "sourcemapped-stacktrace"; + +const Container = styled(Card)` + margin: 0; +`; + +const Details = styled(Box).attrs(() => ({ + mt: 0, + mb: 4, + fontSize: 2 +}))``; + +const Pre = styled.pre` + font-family: monospace; + font-size: 10px; +`; + +export default class ErrorBoundary extends React.Component { + constructor(props) { + super(props); + this.state = { error: null, errorInfo: null }; + } + + componentDidCatch(error, errorInfo) { + mapStackTrace(error.stack, stack => { + const message = [ + error.toString(), + ...stack, + "---", + error.toString(), + errorInfo.componentStack + ].join("\n"); + this.setState({ message }); + }); + } + + render() { + const { message, copied } = this.state; + + if (message) { + return ( + +

Something went wrong 😢

+

+ Please let us know about this error. If you did it already, reload + the page, thanks! +

+ +
+
+ 
{message}
+
+
+ + this.setState({ copied: true })} + > + + + {copied &&

Copied!

} + + ); + } + return this.props.children; + } +} diff --git a/src/index.js b/src/index.js index 2e78ad184..1f164e388 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ import { BrowserRouter as Router } from 'react-router-dom'; import i18n from "./i18n"; import { I18nextProvider } from "react-i18next"; import { ThemeProvider } from "rimble-ui"; +import ErrorBoundary from "./components/ErrorBoundary"; import theme from "./theme"; @@ -14,7 +15,9 @@ ReactDOM.render( - + + + , From 1b3d0eacb03af6ce3323a5d99bbc423a2afb290c Mon Sep 17 00:00:00 2001 From: vrde Date: Fri, 6 Sep 2019 17:14:32 +0200 Subject: [PATCH 2/3] Add loading message --- src/App.js | 1 + src/components/ErrorBoundary.js | 36 ++++++++++++++++++++------------- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index 404853780..7c76d335d 100644 --- a/src/App.js +++ b/src/App.js @@ -867,6 +867,7 @@ class App extends Component { const { voteStartTime, voteEndTime, trashBox } = this.state; const web3Props = { plasma: xdaiweb3, web3, account, metaAccount }; + throw new Error("🍌"); return ( <> diff --git a/src/components/ErrorBoundary.js b/src/components/ErrorBoundary.js index b139938c0..af0eb0890 100644 --- a/src/components/ErrorBoundary.js +++ b/src/components/ErrorBoundary.js @@ -29,6 +29,8 @@ export default class ErrorBoundary extends React.Component { } componentDidCatch(error, errorInfo) { + this.setState({ broken: true }); + mapStackTrace(error.stack, stack => { const message = [ error.toString(), @@ -42,9 +44,9 @@ export default class ErrorBoundary extends React.Component { } render() { - const { message, copied } = this.state; + const { broken, message, copied } = this.state; - if (message) { + if (broken) { return (

Something went wrong 😢

@@ -53,19 +55,25 @@ export default class ErrorBoundary extends React.Component { the page, thanks!

-
-
- 
{message}
-
-
+ {message ? ( + <> +
+
+ 
{message}
+
+
- this.setState({ copied: true })} - > - - - {copied &&

Copied!

} + this.setState({ copied: true })} + > + + + {copied &&

Copied!

} + + ) : ( +

Loading details, wait... ⌛

+ )} ); } From 3dd08340641e981f0b2e768824152a2642541b13 Mon Sep 17 00:00:00 2001 From: vrde Date: Fri, 6 Sep 2019 20:08:57 +0200 Subject: [PATCH 3/3] oopsy --- src/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.js b/src/App.js index 7c76d335d..404853780 100644 --- a/src/App.js +++ b/src/App.js @@ -867,7 +867,6 @@ class App extends Component { const { voteStartTime, voteEndTime, trashBox } = this.state; const web3Props = { plasma: xdaiweb3, web3, account, metaAccount }; - throw new Error("🍌"); return ( <>