Add global error handler (#98)

* Add global error handler

Fix #91

* Add loading message

* oopsy

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"

src/App.js

@@ -865,6 +865,7 @@ class App extends Component {
 
     const { voteStartTime, voteEndTime, trashBox } = this.state;
     const web3Props = { plasma: xdaiweb3, web3, account, metaAccount };
+
     return (
       <>
           {account ? (

src/components/Advanced.js

@@ -231,7 +231,7 @@ export default class Advanced extends React.Component {
         {privateKey &&
         <div>
           <div className="content ops row settings-row" >
-            <PrimaryButton onClick={() => this.props.history.push("/burn")}>              
+            <PrimaryButton onClick={() => this.props.history.push("/burn")}>
               <Scaler config={{startZoomAt:400,origin:"50% 50%"}}>
                 <i className="fas fa-fire"/> {i18n.t('burn')}
               </Scaler>

src/components/ErrorBoundary.js

@@ -0,0 +1,82 @@
+// 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) {
+    this.setState({ broken: true });
+
+    mapStackTrace(error.stack, stack => {
+      const message = [
+        error.toString(),
+        ...stack,
+        "---",
+        error.toString(),
+        errorInfo.componentStack
+      ].join("\n");
+      this.setState({ message });
+    });
+  }
+
+  render() {
+    const { broken, message, copied } = this.state;
+
+    if (broken) {
+      return (
+        <Container>
+          <h2>Something went wrong 😢</h2>
+          <p>
+            Please let us know about this error. If you did it already, reload
+            the page, thanks!
+          </p>
+
+          {message ? (
+            <>
+              <Details>
+                <details>
+                  <Pre>{message}</Pre>
+                </details>
+              </Details>
+
+              <CopyToClipboard
+                text={message}
+                onCopy={() => this.setState({ copied: true })}
+              >
+                <Button>Copy to clipboard</Button>
+              </CopyToClipboard>
+              {copied && <p>Copied!</p>}
+            </>
+          ) : (
+            <p>Loading details, wait... ⌛</p>
+          )}
+        </Container>
+      );
+    }
+    return this.props.children;
+  }
+}

src/index.js

@@ -7,14 +7,17 @@ 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";
 
 
 ReactDOM.render(
   <ThemeProvider theme={theme} style={{ height: '100%' }}>
     <I18nextProvider i18n={i18n}>
       <Router>
-        <App />
+        <ErrorBoundary>
+          <App />
+        </ErrorBoundary>
       </Router>
     </I18nextProvider>
   </ThemeProvider>,