diff --git a/scm-ui-components/packages/ui-components/src/ErrorBoundary.js b/scm-ui-components/packages/ui-components/src/ErrorBoundary.js index f955f03c49..3dd7e7bbd2 100644 --- a/scm-ui-components/packages/ui-components/src/ErrorBoundary.js +++ b/scm-ui-components/packages/ui-components/src/ErrorBoundary.js @@ -1,26 +1,48 @@ // @flow -import React from "react"; +import * as React from "react"; import ErrorNotification from "./ErrorNotification"; -class ErrorBoundary extends React.Component { - constructor(props) { +type Props = { + fallback?: React.ComponentType, + children: React.Node +}; + +type ErrorInfo = { + componentStack: string +}; + +type State = { + error?: Error, + errorInfo?: ErrorInfo +}; + +class ErrorBoundary extends React.Component { + constructor(props: Props) { super(props); - this.state = { error: null, errorInfo: null }; + this.state = {}; } - componentDidCatch(error, errorInfo) { + componentDidCatch(error: Error, errorInfo: ErrorInfo) { // Catch errors in any components below and re-render with error message this.setState({ - error: error, - errorInfo: errorInfo + error, + errorInfo }); } + renderError = () => { + let FallbackComponent = this.props.fallback; + if (!FallbackComponent) { + FallbackComponent = ErrorNotification; + } + + return ; + }; + render() { - if (this.state.errorInfo) { - return ( - - ); + const { error } = this.state; + if (error) { + return this.renderError(); } return this.props.children; }