Add Error Boundary for Pages

scm-ui-components/packages/ui-components/src/errorboundary/PageErrorBoundary.js

@@ -0,0 +1,32 @@
+//@flow
+
+import * as React from "react";
+
+
+class PageErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  /**
+   * This lifecycle is invoked after an error has been thrown by a descendant component.
+   * It receives the error that was thrown as a parameter and should return a value to update state.
+   * @param error
+   * @returns {{hasError: boolean}}
+   */
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default PageErrorBoundary;

scm-ui-components/packages/ui-components/src/layout/Page.js

@@ -7,6 +7,7 @@ import Subtitle from "./Subtitle";
 import injectSheet from "react-jss";
 import classNames from "classnames";
 import PageActions from "./PageActions";
+import PageErrorBoundary from "../errorboundary/PageErrorBoundary";
 
 type Props = {
   title?: string,
@@ -31,6 +32,7 @@ class Page extends React.Component<Props> {
   render() {
     const { error } = this.props;
     return (
+      <PageErrorBoundary>
         <section className="section">
           <div className="container">
             {this.renderPageHeader()}
@@ -38,6 +40,7 @@ class Page extends React.Component<Props> {
             {this.renderContent()}
           </div>
         </section>
+      </PageErrorBoundary>
     );
   }