Merge pull request #268 from meriadec/master

Add very basic throw handler

src/components/App.js

@@ -12,6 +12,7 @@ import theme from 'styles/theme'
 
 import i18n from 'renderer/i18n/electron'
 
+import ThrowBlock from 'components/ThrowBlock'
 import Default from 'components/layout/Default'
 import Dev from 'components/layout/Dev'
 import Print from 'components/layout/Print'
@@ -30,13 +31,15 @@ const App = ({
   <Provider store={store}>
     <I18nextProvider i18n={i18n} initialLanguage={language}>
       <ThemeProvider theme={theme}>
-        <ConnectedRouter history={history}>
-          <Switch>
-            {(__DEV__ || DEV_TOOLS) && <Route path="/dev" component={Dev} />}
-            <Route path="/print" component={Print} />
-            <Route component={Default} />
-          </Switch>
-        </ConnectedRouter>
+        <ThrowBlock>
+          <ConnectedRouter history={history}>
+            <Switch>
+              {(__DEV__ || DEV_TOOLS) && <Route path="/dev" component={Dev} />}
+              <Route path="/print" component={Print} />
+              <Route component={Default} />
+            </Switch>
+          </ConnectedRouter>
+        </ThrowBlock>
       </ThemeProvider>
     </I18nextProvider>
   </Provider>

src/components/ThrowBlock.js

@@ -0,0 +1,100 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+import { shell, remote } from 'electron'
+import qs from 'querystring'
+
+import { rgba } from 'styles/helpers'
+import db from 'helpers/db'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+
+type Props = {
+  children: any,
+}
+
+type State = {
+  error: ?Error,
+}
+
+const Container = styled(Box).attrs({
+  grow: true,
+  align: 'center',
+  justify: 'center',
+  bg: 'lightGraphite',
+  color: 'alertRed',
+  ff: 'Museo Sans|Bold',
+  flow: 2,
+})``
+
+const Inner = styled(Box).attrs({
+  p: 2,
+  bg: p => rgba(p.theme.colors.alertRed, 0.05),
+  borderRadius: 1,
+})`
+  border: ${p => `1px solid ${rgba(p.theme.colors.alertRed, 0.1)}`};
+`
+
+class ThrowBlock extends PureComponent<Props, State> {
+  state = {
+    error: null,
+  }
+
+  componentDidCatch(error: Error) {
+    this.setState({ error })
+  }
+
+  handleCreateIssue = () => {
+    const { error } = this.state
+    if (!error) {
+      return
+    }
+    const q = qs.stringify({
+      title: `Error: ${error.message}`,
+      body: `Error was thrown:
+
+\`\`\`
+${error.stack}
+\`\`\`
+`,
+    })
+    shell.openExternal(`https://github.com/LedgerHQ/ledger-wallet-desktop/issues/new?${q}`)
+  }
+
+  handleRestart = () => {
+    remote.app.relaunch()
+    remote.app.exit()
+  }
+
+  handleReset = () => {
+    db.resetAll()
+    this.handleRestart()
+  }
+
+  render() {
+    const { error } = this.state
+    if (error) {
+      return (
+        <Container>
+          <Inner>{`Error: ${error.message}`}</Inner>
+          <Box horizontal flow={2}>
+            <Button primary onClick={this.handleRestart}>
+              {'Restart app'}
+            </Button>
+            <Button primary onClick={this.handleReset}>
+              {'Reset app files'}
+            </Button>
+            <Button primary onClick={this.handleCreateIssue}>
+              {'Create ticket'}
+            </Button>
+          </Box>
+        </Container>
+      )
+    }
+    return this.props.children
+  }
+}
+
+export default ThrowBlock

src/helpers/db.js

@@ -83,4 +83,12 @@ export default {
 
     return val
   },
+
+  resetAll: () => {
+    const keys = ['settings', 'accounts', 'counterValues']
+    keys.forEach(k => {
+      const db = store(k)
+      db.clear()
+    })
+  },
 }