53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
import { observer } from 'mobx-react';
|
|
import { observable } from 'mobx';
|
|
import CenteredContent from 'components/CenteredContent';
|
|
import PageTitle from 'components/PageTitle';
|
|
|
|
type Props = {
|
|
children?: ?React.Node,
|
|
};
|
|
|
|
@observer
|
|
class ErrorBoundary extends React.Component<Props> {
|
|
@observable error: boolean = false;
|
|
|
|
componentDidCatch(error: Error, info: Object) {
|
|
this.error = true;
|
|
|
|
// Error handler is often blocked by the browser
|
|
if (window.Bugsnag) {
|
|
Bugsnag.notifyException(error, { react: info });
|
|
}
|
|
}
|
|
|
|
handleReload = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
render() {
|
|
if (this.error) {
|
|
return (
|
|
<CenteredContent>
|
|
<PageTitle title="Something went wrong" />
|
|
<h1>
|
|
<span role="img" aria-label="Space ship">
|
|
🛸
|
|
</span>{' '}
|
|
Something unexpected happened
|
|
</h1>
|
|
<p>
|
|
An unrecoverable error occurred{window.Bugsnag ||
|
|
(true && ' and our engineers have been notified')}. Please try{' '}
|
|
<a onClick={this.handleReload}>reloading</a>.
|
|
</p>
|
|
</CenteredContent>
|
|
);
|
|
}
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
export default ErrorBoundary;
|