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,13 +32,15 @@ class Page extends React.Component<Props> {
   render() {
     const { error } = this.props;
     return (
-      <section className="section">
+      <PageErrorBoundary>
-        <div className="container">
+        <section className="section">
-          {this.renderPageHeader()}
+          <div className="container">
-          <ErrorNotification error={error} />
+            {this.renderPageHeader()}
-          {this.renderContent()}
+            <ErrorNotification error={error} />
-        </div>
+            {this.renderContent()}
-      </section>
+          </div>
+        </section>
+      </PageErrorBoundary>
     );
   }