Add Error Boundary for

- the Page component
- the Main component

scm-ui-components/packages/ui-components/src/ErrorBoundary.js

@@ -0,0 +1,28 @@
+// @flow
+import React from "react";
+import ErrorNotification from "./ErrorNotification";
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    });
+  }
+
+  render() {
+    if (this.state.errorInfo) {
+      return (
+        <ErrorNotification error={this.state.error} />
+      );
+    }
+    return this.props.children;
+  }
+}
+export default ErrorBoundary;

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

@@ -1,32 +0,0 @@
-//@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/index.js

@@ -25,6 +25,7 @@ export { default as Tooltip } from "./Tooltip";
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
 export { default as BranchSelector } from "./BranchSelector";
+export { default as ErrorBoundary } from "./ErrorBoundary";
 
 export { apiClient } from "./apiclient.js";
 export * from "./errors";

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

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

scm-ui/src/containers/Main.js

@@ -9,7 +9,7 @@ import Users from "../users/containers/Users";
 import Login from "../containers/Login";
 import Logout from "../containers/Logout";
 
-import { ProtectedRoute } from "@scm-manager/ui-components";
+import {ErrorBoundary, ProtectedRoute} from "@scm-manager/ui-components";
 import {binder,  ExtensionPoint } from "@scm-manager/ui-extensions";
 
 import AddUser from "../users/containers/AddUser";
@@ -38,6 +38,7 @@ class Main extends React.Component<Props> {
       url = redirectUrlFactory(this.props);
     }
     return (
+      <ErrorBoundary>
         <div className="main">
           <Switch>
             <Redirect exact from="/" to={url}/>
@@ -129,6 +130,7 @@ class Main extends React.Component<Props> {
             />
           </Switch>
         </div>
+      </ErrorBoundary>
     );
   }
 }