add generic error boundary, apply to preview iframe

This commit is contained in:
Shawn Erquhart
2017-11-07 10:11:56 -05:00
parent 41897de4c9
commit b3af4e86cb
4 changed files with 55 additions and 6 deletions

View File

@ -0,0 +1,8 @@
.nc-errorBoundary {
padding: 0 20px;
}
.nc-errorBoundary-heading,
.nc-errorBoundary-link {
color: var(--errorColor);
}

View File

@ -0,0 +1,35 @@
import PropTypes from 'prop-types';
import React from 'react';
const ErrorComponent = () => {
const issueUrl = "https://github.com/netlify/netlify-cms/issues/new";
return (
<div className="nc-errorBoundary">
<h1 className="nc-errorBoundary-heading">Sorry!</h1>
<p>
<span>There's been an error - please </span>
<a href={issueUrl} target="_blank" className="nc-errorBoundary-link">report it</a>!
</p>
</div>
);
};
export default class ErrorBoundary extends React.Component {
static propTypes = {
render: PropTypes.element,
};
state = {
hasError: false,
};
componentDidCatch(error) {
console.error(error);
this.setState({ hasError: true });
}
render() {
const errorComponent = this.props.errorComponent || <ErrorComponent/>;
return this.state.hasError ? errorComponent : this.props.children;
}
}