feat: Resource error boundary

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 (
-    <div className={locals.resource}>
-      <div className={locals.grow}>
+    <div className={styles.resource}>
+      <div className={styles.grow}>
         <Component resource={resource} uri={uri} />
       </div>
-      <div className={locals.uri}>{displayedUri}</div>
+      <div className={styles.uri}>{displayedUri}</div>
     </div>
   );
 };
@@ -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 (
+      <div className={styles.resource}>
+        {
+          failureReason
+            ? (
+              <div className={styles.failed}>
+                <p>Loading the resource component failed:</p>
+                <pre>{failureReason}</pre>
+              </div>
+            )
+            : (
+              <Resource resource={resource} uri={uri} />
+            )
+        }
+      </div>
+    );
+  }
+
+}
+
+ResourceErrorWrapper.displayName = 'Resource';
+
+ResourceErrorWrapper.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  resource: PropTypes.any.isRequired,
+  uri: PropTypes.string.isRequired,
+};
+
+export default ResourceErrorWrapper;

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;
 }