From 7d5f29140ea24ae2fe5ca86352465285599671da Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Wed, 20 Jun 2018 12:04:46 +0200
Subject: [PATCH] Display error and translated error inside crash screen

---
 src/components/RenderError.js | 37 +++++++++++++++++++++++++++++++----
 static/i18n/en/app.yml        |  2 ++
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/RenderError.js b/src/components/RenderError.js
index 23034422..bb2d05e8 100644
--- a/src/components/RenderError.js
+++ b/src/components/RenderError.js
@@ -10,11 +10,12 @@ import hardReset from 'helpers/hardReset'
 
 import type { T } from 'types/common'
 
+import Spoiler from 'components/base/Spoiler'
 import ExportLogsBtn from 'components/ExportLogsBtn'
 import Box from 'components/base/Box'
 import Space from 'components/base/Space'
 import Button from 'components/base/Button'
-// import TranslatedError from './TranslatedError'
+import TranslatedError from './TranslatedError'
 
 type Props = {
   error: Error,
@@ -60,10 +61,11 @@ ${error.stack}
   }
 
   render() {
-    const { t, disableExport, children } = this.props
+    const { error, t, disableExport, children } = this.props
     const { isHardResetting } = this.state
     return (
-      <Box align="center" justify="center" grow>
+      <Box align="center" grow>
+        <Space of={100} />
         <img alt="" src={i('crash-screen.svg')} width={380} />
         <Space of={40} />
         <Box ff="Museo Sans|Regular" fontSize={7} color="dark">
@@ -92,11 +94,38 @@ ${error.stack}
             {t('app:crash.createTicket')}
           </Button>
         </Box>
+        <Space of={20} />
+        <Spoiler color="wallet" title={t('app:crash.showError')}>
+          <ErrContainer>
+            <TranslatedError error={error} />
+          </ErrContainer>
+        </Spoiler>
+        <Space of={10} />
+        <Spoiler color="wallet" title={t('app:crash.showDetails')}>
+          <ErrContainer>{error.stack}</ErrContainer>
+        </Spoiler>
+        <Space of={100} />
         {children}
       </Box>
     )
   }
 }
-// <TranslatedError error={error} />
+
+const ErrContainer = ({ children }: { children: any }) => (
+  <pre
+    style={{
+      marginTop: 10,
+      maxWidth: '80%',
+      overflow: 'auto',
+      fontSize: 10,
+      fontFamily: 'monospace',
+      background: 'rgba(0, 0, 0, 0.05)',
+      cursor: 'text',
+      userSelect: 'text',
+    }}
+  >
+    {children}
+  </pre>
+)
 
 export default translate()(RenderError)
diff --git a/static/i18n/en/app.yml b/static/i18n/en/app.yml
index ce8efa1c..eb9db936 100644
--- a/static/i18n/en/app.yml
+++ b/static/i18n/en/app.yml
@@ -373,3 +373,5 @@ crash:
   restart: Restart app
   reset: Hard reset
   createTicket: Create issue
+  showDetails: Show details
+  showError: Show error