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

Something went wrong.

; + } + + 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 { render() { const { error } = this.props; return ( -
-
- {this.renderPageHeader()} - - {this.renderContent()} -
-
+ +
+
+ {this.renderPageHeader()} + + {this.renderContent()} +
+
+
); }