diff --git a/app/components/ErrorBoundary.js b/app/components/ErrorBoundary.js index cdda4044..81bdbecf 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 { - @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 { window.location.reload(); }; - contactSupport = () => { + handleShowDetails = () => { + this.showDetails = true; + }; + + handleReportBug = () => { window.open(githubIssuesUrl()); }; @@ -46,11 +52,16 @@ class ErrorBoundary extends React.Component { ' – our engineers have been notified'}. Please try reloading the page, it may have been a temporary glitch. + {this.showDetails &&
{this.error.toString()}
}

{' '} - {DEPLOYMENT === 'hosted' && ( - + ) : ( + )}

@@ -61,4 +72,11 @@ class ErrorBoundary extends React.Component { } } +const Pre = styled.pre` + background: ${props => props.theme.smoke}; + padding: 16px; + border-radius: 4px; + font-size: 12px; +`; + export default ErrorBoundary;