From b3af4e86cb72bf18da594957e71b8e4c19e879ef Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Tue, 7 Nov 2017 10:11:56 -0500 Subject: [PATCH] add generic error boundary, apply to preview iframe --- src/components/PreviewPane/PreviewPane.js | 17 +++++---- .../UI/ErrorBoundary/ErrorBoundary.css | 8 +++++ .../UI/ErrorBoundary/ErrorBoundary.js | 35 +++++++++++++++++++ src/index.css | 1 + 4 files changed, 55 insertions(+), 6 deletions(-) create mode 100644 src/components/UI/ErrorBoundary/ErrorBoundary.css create mode 100644 src/components/UI/ErrorBoundary/ErrorBoundary.js diff --git a/src/components/PreviewPane/PreviewPane.js b/src/components/PreviewPane/PreviewPane.js index e14bbe4c..0f13ddb1 100644 --- a/src/components/PreviewPane/PreviewPane.js +++ b/src/components/PreviewPane/PreviewPane.js @@ -4,6 +4,7 @@ import { List, Map } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Frame from 'react-frame-component'; import registry from '../../lib/registry'; +import ErrorBoundary from '../UI/ErrorBoundary/ErrorBoundary'; import { resolveWidget } from '../Widgets'; import { selectTemplateName, selectInferedField } from '../../reducers/collections'; import { INFERABLE_FIELDS } from '../../constants/fieldInference'; @@ -144,16 +145,20 @@ export default class PreviewPane extends React.Component { return ; } - return (
-`} - >); + +`; + return ( + + + + + + ); } } diff --git a/src/components/UI/ErrorBoundary/ErrorBoundary.css b/src/components/UI/ErrorBoundary/ErrorBoundary.css new file mode 100644 index 00000000..7e6212c5 --- /dev/null +++ b/src/components/UI/ErrorBoundary/ErrorBoundary.css @@ -0,0 +1,8 @@ +.nc-errorBoundary { + padding: 0 20px; +} + +.nc-errorBoundary-heading, +.nc-errorBoundary-link { + color: var(--errorColor); +} diff --git a/src/components/UI/ErrorBoundary/ErrorBoundary.js b/src/components/UI/ErrorBoundary/ErrorBoundary.js new file mode 100644 index 00000000..ad094a6b --- /dev/null +++ b/src/components/UI/ErrorBoundary/ErrorBoundary.js @@ -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 ( +
+

Sorry!

+

+ There's been an error - please + report it! +

+
+ ); +}; + +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 || ; + return this.state.hasError ? errorComponent : this.props.children; + } +} diff --git a/src/index.css b/src/index.css index f43a4f05..b26c8201 100644 --- a/src/index.css +++ b/src/index.css @@ -17,6 +17,7 @@ @import "./components/UI/loader/Loader.css"; @import "./components/UI/toast/Toast.css"; @import "./components/UI/Dialog/Dialog.css"; +@import "./components/UI/ErrorBoundary/ErrorBoundary.css"; @import "./components/UnpublishedListing/UnpublishedListing.css"; @import "./components/UnpublishedListing/UnpublishedListingCardMeta.css"; @import "./components/Widgets/BooleanControl.css";