Added ability to show more error details for reporting issue

This commit is contained in:
Tom Moor
2018-08-04 10:56:36 -07:00
parent 892ce64712
commit d3aeff833d

View File

@ -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;