Added high level ErrorBoundary
This commit is contained in:
@@ -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}>
|
||||
|
||||
42
app/components/ErrorBoundary/ErrorBoundary.js
Normal file
42
app/components/ErrorBoundary/ErrorBoundary.js
Normal 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;
|
||||
3
app/components/ErrorBoundary/index.js
Normal file
3
app/components/ErrorBoundary/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
// @flow
|
||||
import ErrorBoundary from './ErrorBoundary';
|
||||
export default ErrorBoundary;
|
||||
Reference in New Issue
Block a user