gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add generic error boundary, apply to preview iframe

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/PreviewPane/PreviewPane.js
View File

@ -4,6 +4,7 @@ import { List, Map } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Frame from 'react-frame-component'; import Frame from 'react-frame-component';
import registry from '../../lib/registry'; import registry from '../../lib/registry';
import ErrorBoundary from '../UI/ErrorBoundary/ErrorBoundary';
import { resolveWidget } from '../Widgets'; import { resolveWidget } from '../Widgets';
import { selectTemplateName, selectInferedField } from '../../reducers/collections'; import { selectTemplateName, selectInferedField } from '../../reducers/collections';
import { INFERABLE_FIELDS } from '../../constants/fieldInference'; 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} />;
} }
return (<Frame const initialContent = `
className="nc-previewPane-frame"
head={styleEls}
initialContent={`
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head><base target="_blank"/></head> <head><base target="_blank"/></head>
<body><div></div></body> <body><div></div></body>
</html>`} </html>
><PreviewContent {...{ previewComponent, previewProps }}/></Frame>); `;
return (
<ErrorBoundary>
<Frame className="nc-previewPane-frame" head={styleEls} initialContent={initialContent}>
<PreviewContent {...{ previewComponent, previewProps }}/>
</Frame>
</ErrorBoundary>
);
} }
} }

8
src/components/UI/ErrorBoundary/ErrorBoundary.css Normal file
View File

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

35
src/components/UI/ErrorBoundary/ErrorBoundary.js Normal file
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;
}
}

1
src/index.css
View File

@ -17,6 +17,7 @@
@import "./components/UI/loader/Loader.css"; @import "./components/UI/loader/Loader.css";
@import "./components/UI/toast/Toast.css"; @import "./components/UI/toast/Toast.css";
@import "./components/UI/Dialog/Dialog.css"; @import "./components/UI/Dialog/Dialog.css";
@import "./components/UI/ErrorBoundary/ErrorBoundary.css";
@import "./components/UnpublishedListing/UnpublishedListing.css"; @import "./components/UnpublishedListing/UnpublishedListing.css";
@import "./components/UnpublishedListing/UnpublishedListingCardMeta.css"; @import "./components/UnpublishedListing/UnpublishedListingCardMeta.css";
@import "./components/Widgets/BooleanControl.css"; @import "./components/Widgets/BooleanControl.css";