Added high level ErrorBoundary

This commit is contained in:
Tom Moor
2017-11-12 16:08:55 -08:00
parent 0909dc61ff
commit ee89fb852b
4 changed files with 106 additions and 52 deletions

View File

@@ -15,6 +15,7 @@ type Props = {
readOnly: boolean,
component?: string,
attributes: Object,
className?: string,
};
function Heading(props: Props) {
@@ -26,6 +27,7 @@ function Heading(props: Props) {
readOnly,
children,
component = 'h1',
className,
attributes,
} = props;
const parentIsDocument = parent instanceof Document;
@@ -40,7 +42,7 @@ function Heading(props: Props) {
emoji && title.match(new RegExp(`^${emoji}\\s`));
return (
<Component {...attributes} id={slugish}>
<Component {...attributes} id={slugish} className={className}>
<Wrapper hasEmoji={startsWithEmojiAndSpace}>{children}</Wrapper>
{showPlaceholder && (
<Placeholder contentEditable={false}>

View File

@@ -0,0 +1,42 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import CenteredContent from 'components/CenteredContent';
import PageTitle from 'components/PageTitle';
@observer
class ErrorBoundary extends Component {
@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="Unknown Error" />
<h1>Something went wrong</h1>
<p>
An unrecoverable error occurred. Please try{' '}
<a onClick={this.handleReload}>reloading</a>.
</p>
</CenteredContent>
);
}
return this.props.children;
}
}
export default ErrorBoundary;

View File

@@ -0,0 +1,3 @@
// @flow
import ErrorBoundary from './ErrorBoundary';
export default ErrorBoundary;