add generic error boundary, apply to preview iframe

decaporg · Nov 7, 2017 · 0afa73d · 0afa73d
1 parent a14f253
commit 0afa73d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 6 deletions.
diff --git 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 <Frame className="nc-previewPane-frame" head={styleEls} />;
     }
 
-    return (<Frame
-      className="nc-previewPane-frame"
-      head={styleEls}
-      initialContent={`
+    const initialContent = `
 <!DOCTYPE html>
 <html>
   <head><base target="_blank"/></head>
   <body><div></div></body>
-</html>`}
-    ><PreviewContent {...{ previewComponent, previewProps }}/></Frame>);
+</html>
+`;
+    return (
+      <ErrorBoundary>
+        <Frame className="nc-previewPane-frame" head={styleEls} initialContent={initialContent}>
+          <PreviewContent {...{ previewComponent, previewProps }}/>
+        </Frame>
+      </ErrorBoundary>
+    );
   }
 }
 

diff --git a/src/components/UI/ErrorBoundary/ErrorBoundary.css 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
@@ -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;
+  }
+}
diff --git a/src/index.css b/src/index.css
@@ -16,6 +16,7 @@
 @import "./components/UI/icon/Icon.css";
 @import "./components/UI/loader/Loader.css";
 @import "./components/UI/toast/Toast.css";
+@import "./components/UI/ErrorBoundary/ErrorBoundary.css";
 @import "./components/UnpublishedListing/UnpublishedListing.css";
 @import "./components/UnpublishedListing/UnpublishedListingCardMeta.css";
 @import "./components/Widgets/BooleanControl.css";