Added ability to show more error details for reporting issue
This commit is contained in:
@ -1,5 +1,6 @@
|
|||||||
// @flow
|
// @flow
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
import { observable } from 'mobx';
|
import { observable } from 'mobx';
|
||||||
import HelpText from 'components/HelpText';
|
import HelpText from 'components/HelpText';
|
||||||
@ -14,10 +15,11 @@ type Props = {
|
|||||||
|
|
||||||
@observer
|
@observer
|
||||||
class ErrorBoundary extends React.Component<Props> {
|
class ErrorBoundary extends React.Component<Props> {
|
||||||
@observable error: boolean = false;
|
@observable error: ?Error;
|
||||||
|
@observable showDetails: boolean = false;
|
||||||
|
|
||||||
componentDidCatch(error: Error, info: Object) {
|
componentDidCatch(error: Error, info: Object) {
|
||||||
this.error = true;
|
this.error = error;
|
||||||
|
|
||||||
// Error handler is often blocked by the browser
|
// Error handler is often blocked by the browser
|
||||||
if (window.Bugsnag) {
|
if (window.Bugsnag) {
|
||||||
@ -29,7 +31,11 @@ class ErrorBoundary extends React.Component<Props> {
|
|||||||
window.location.reload();
|
window.location.reload();
|
||||||
};
|
};
|
||||||
|
|
||||||
contactSupport = () => {
|
handleShowDetails = () => {
|
||||||
|
this.showDetails = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
handleReportBug = () => {
|
||||||
window.open(githubIssuesUrl());
|
window.open(githubIssuesUrl());
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -46,11 +52,16 @@ class ErrorBoundary extends React.Component<Props> {
|
|||||||
' – our engineers have been notified'}. Please try reloading the
|
' – our engineers have been notified'}. Please try reloading the
|
||||||
page, it may have been a temporary glitch.
|
page, it may have been a temporary glitch.
|
||||||
</HelpText>
|
</HelpText>
|
||||||
|
{this.showDetails && <Pre>{this.error.toString()}</Pre>}
|
||||||
<p>
|
<p>
|
||||||
<Button onClick={this.handleReload}>Reload</Button>{' '}
|
<Button onClick={this.handleReload}>Reload</Button>{' '}
|
||||||
{DEPLOYMENT === 'hosted' && (
|
{this.showDetails ? (
|
||||||
<Button onClick={this.contactSupport} light>
|
<Button onClick={this.handleReportBug} light>
|
||||||
Report Bug…
|
Report a Bug…
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button onClick={this.handleShowDetails} light>
|
||||||
|
Show Details…
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</p>
|
</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;
|
export default ErrorBoundary;
|
||||||
|
Reference in New Issue
Block a user