2019-10-19 16:38:07 +02:00
|
|
|
import * as React from 'react';
|
|
|
|
|
import ErrorNotification from './ErrorNotification';
|
2019-03-13 21:41:08 +01:00
|
|
|
|
2019-03-14 10:08:34 +01:00
|
|
|
type Props = {
|
2019-10-19 16:38:07 +02:00
|
|
|
fallback?: React.ComponentType<any>;
|
|
|
|
|
children: React.Node;
|
2019-03-14 10:08:34 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type ErrorInfo = {
|
2019-10-19 16:38:07 +02:00
|
|
|
componentStack: string;
|
2019-03-14 10:08:34 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type State = {
|
2019-10-19 16:38:07 +02:00
|
|
|
error?: Error;
|
|
|
|
|
errorInfo?: ErrorInfo;
|
2019-03-14 10:08:34 +01:00
|
|
|
};
|
|
|
|
|
|
2019-10-19 16:38:07 +02:00
|
|
|
class ErrorBoundary extends React.Component<Props, State> {
|
2019-03-14 10:08:34 +01:00
|
|
|
constructor(props: Props) {
|
2019-03-13 21:41:08 +01:00
|
|
|
super(props);
|
2019-03-14 10:08:34 +01:00
|
|
|
this.state = {};
|
2019-03-13 21:41:08 +01:00
|
|
|
}
|
|
|
|
|
|
2019-03-14 10:08:34 +01:00
|
|
|
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
2019-03-13 21:41:08 +01:00
|
|
|
// Catch errors in any components below and re-render with error message
|
|
|
|
|
this.setState({
|
2019-03-14 10:08:34 +01:00
|
|
|
error,
|
2019-10-19 16:38:07 +02:00
|
|
|
errorInfo,
|
2019-03-13 21:41:08 +01:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-14 10:08:34 +01:00
|
|
|
renderError = () => {
|
|
|
|
|
let FallbackComponent = this.props.fallback;
|
|
|
|
|
if (!FallbackComponent) {
|
|
|
|
|
FallbackComponent = ErrorNotification;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return <FallbackComponent {...this.state} />;
|
|
|
|
|
};
|
|
|
|
|
|
2019-03-13 21:41:08 +01:00
|
|
|
render() {
|
2019-03-14 10:08:34 +01:00
|
|
|
const { error } = this.state;
|
|
|
|
|
if (error) {
|
|
|
|
|
return this.renderError();
|
2019-03-13 21:41:08 +01:00
|
|
|
}
|
|
|
|
|
return this.props.children;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
export default ErrorBoundary;
|