From 35c84c929ae6866177ea41179da4cb8c3853cbe2 Mon Sep 17 00:00:00 2001
From: Mohamed Karray <mohamed.karray.sr@gmail.com>
Date: Wed, 13 Mar 2019 11:54:33 +0100
Subject: [PATCH] Add Error Boundary for Pages

---
 .../src/errorboundary/PageErrorBoundary.js    | 32 +++++++++++++++++++
 .../packages/ui-components/src/layout/Page.js | 17 ++++++----
 2 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/errorboundary/PageErrorBoundary.js

diff --git a/scm-ui-components/packages/ui-components/src/errorboundary/PageErrorBoundary.js b/scm-ui-components/packages/ui-components/src/errorboundary/PageErrorBoundary.js
new file mode 100644
index 0000000000..2be112455e
--- /dev/null
+++ b/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;
diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index eea9f66f72..37913a009c 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/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">
-        <div className="container">
-          {this.renderPageHeader()}
-          <ErrorNotification error={error} />
-          {this.renderContent()}
-        </div>
-      </section>
+      <PageErrorBoundary>
+        <section className="section">
+          <div className="container">
+            {this.renderPageHeader()}
+            <ErrorNotification error={error} />
+            {this.renderContent()}
+          </div>
+        </section>
+      </PageErrorBoundary>
     );
   }