From d3aeff833db813e54c7e6604c8173a9d7dad3d2d Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 4 Aug 2018 10:56:36 -0700
Subject: [PATCH] Added ability to show more error details for reporting issue

---
 app/components/ErrorBoundary.js | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/components/ErrorBoundary.js b/app/components/ErrorBoundary.js
index cdda40444..81bdbecf6 100644
--- a/app/components/ErrorBoundary.js
+++ b/app/components/ErrorBoundary.js
@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import styled from 'styled-components';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
 import HelpText from 'components/HelpText';
@@ -14,10 +15,11 @@ type Props = {
 
 @observer
 class ErrorBoundary extends React.Component<Props> {
-  @observable error: boolean = false;
+  @observable error: ?Error;
+  @observable showDetails: boolean = false;
 
   componentDidCatch(error: Error, info: Object) {
-    this.error = true;
+    this.error = error;
 
     // Error handler is often blocked by the browser
     if (window.Bugsnag) {
@@ -29,7 +31,11 @@ class ErrorBoundary extends React.Component<Props> {
     window.location.reload();
   };
 
-  contactSupport = () => {
+  handleShowDetails = () => {
+    this.showDetails = true;
+  };
+
+  handleReportBug = () => {
     window.open(githubIssuesUrl());
   };
 
@@ -46,11 +52,16 @@ class ErrorBoundary extends React.Component<Props> {
               ' – our engineers have been notified'}. Please try reloading the
             page, it may have been a temporary glitch.
           </HelpText>
+          {this.showDetails && <Pre>{this.error.toString()}</Pre>}
           <p>
             <Button onClick={this.handleReload}>Reload</Button>{' '}
-            {DEPLOYMENT === 'hosted' && (
-              <Button onClick={this.contactSupport} light>
-                Report Bug…
+            {this.showDetails ? (
+              <Button onClick={this.handleReportBug} light>
+                Report a Bug…
+              </Button>
+            ) : (
+              <Button onClick={this.handleShowDetails} light>
+                Show Details…
               </Button>
             )}
           </p>
@@ -61,4 +72,11 @@ class ErrorBoundary extends React.Component<Props> {
   }
 }
 
+const Pre = styled.pre`
+  background: ${props => props.theme.smoke};
+  padding: 16px;
+  border-radius: 4px;
+  font-size: 12px;
+`;
+
 export default ErrorBoundary;