84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
// @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';
|
||
import Button from 'components/Button';
|
||
import CenteredContent from 'components/CenteredContent';
|
||
import PageTitle from 'components/PageTitle';
|
||
import { githubIssuesUrl } from '../../shared/utils/routeHelpers';
|
||
|
||
type Props = {
|
||
children: React.Node,
|
||
};
|
||
|
||
@observer
|
||
class ErrorBoundary extends React.Component<Props> {
|
||
@observable error: ?Error;
|
||
@observable showDetails: boolean = false;
|
||
|
||
componentDidCatch(error: Error, info: Object) {
|
||
this.error = error;
|
||
|
||
// Error handler is often blocked by the browser
|
||
if (window.Bugsnag) {
|
||
Bugsnag.notifyException(error, { react: info });
|
||
}
|
||
}
|
||
|
||
handleReload = () => {
|
||
window.location.reload();
|
||
};
|
||
|
||
handleShowDetails = () => {
|
||
this.showDetails = true;
|
||
};
|
||
|
||
handleReportBug = () => {
|
||
window.open(githubIssuesUrl());
|
||
};
|
||
|
||
render() {
|
||
if (this.error) {
|
||
const isReported = !!window.Bugsnag;
|
||
|
||
return (
|
||
<CenteredContent>
|
||
<PageTitle title="Something Unexpected Happened" />
|
||
<h1>Something Unexpected Happened</h1>
|
||
<HelpText>
|
||
Sorry, an unrecoverable error occurred{isReported &&
|
||
' – 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>{' '}
|
||
{this.showDetails ? (
|
||
<Button onClick={this.handleReportBug} light>
|
||
Report a Bug…
|
||
</Button>
|
||
) : (
|
||
<Button onClick={this.handleShowDetails} light>
|
||
Show Details…
|
||
</Button>
|
||
)}
|
||
</p>
|
||
</CenteredContent>
|
||
);
|
||
}
|
||
return this.props.children;
|
||
}
|
||
}
|
||
|
||
const Pre = styled.pre`
|
||
background: ${props => props.theme.smoke};
|
||
padding: 16px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
white-space: pre-wrap;
|
||
`;
|
||
|
||
export default ErrorBoundary;
|