diff --git a/packages/resource-persea/src/components/resource/index.jsx b/packages/resource-persea/src/components/resource/index.jsx index 95bc013..da68095 100644 --- a/packages/resource-persea/src/components/resource/index.jsx +++ b/packages/resource-persea/src/components/resource/index.jsx @@ -7,7 +7,7 @@ import { import useResourceController from '../../hooks/use-resource-controller'; -import locals from './index.module.scss'; +import styles from './index.module.scss'; const Resource = ({resource, uri}) => { const {Component} = useResourceController(uri); @@ -16,11 +16,11 @@ const Resource = ({resource, uri}) => { displayedUri = [uri.split('/').slice(-2, -1), displayedUri].join('/'); } return ( -
-
+
+
-
{displayedUri}
+
{displayedUri}
); }; @@ -33,4 +33,47 @@ Resource.propTypes = { uri: PropTypes.string.isRequired, }; -export default Resource; +class ResourceErrorWrapper extends React.Component { + + state = { + failureReason: null, + }; + + static getDerivedStateFromError(error) { + return { + failureReason: error.stack, + }; + } + + render() { + const {resource, uri} = this.props; + const {failureReason} = this.state; + return ( +
+ { + failureReason + ? ( +
+

Loading the resource component failed:

+
{failureReason}
+
+ ) + : ( + + ) + } +
+ ); + } + +} + +ResourceErrorWrapper.displayName = 'Resource'; + +ResourceErrorWrapper.propTypes = { + // eslint-disable-next-line react/forbid-prop-types + resource: PropTypes.any.isRequired, + uri: PropTypes.string.isRequired, +}; + +export default ResourceErrorWrapper; diff --git a/packages/resource-persea/src/components/resource/index.module.scss b/packages/resource-persea/src/components/resource/index.module.scss index 84d7efa..fd751f4 100644 --- a/packages/resource-persea/src/components/resource/index.module.scss +++ b/packages/resource-persea/src/components/resource/index.module.scss @@ -1,3 +1,16 @@ +.failed { + + p { + margin: 2rem 0; + text-align: center; + } + + pre { + font-family: 'Courier New', Courier, monospace; + font-size: 0.8em; + } +} + .grow { flex-grow: 100; }