Bj feature 20124 (#950)

Bj feature 20124

web/init/props.md

@@ -10,3 +10,4 @@ apiEndpoint|string||Yes|API endpoint for the Ship binary
 basePath|string|""|No|Base path name for the internal Ship Init component router<br>Note: If basePath is omitted, it will default the base route to "/"
 headerEnabled|bool|false|No|Determines whether default header is displayed
 history|object|null|No|Parent history needed to sync Ship routing with parent<br>Note: Defaults to instantiate own internal BrowserRouter if omitted.
+onError|function|undefined|No|If there's an error inside of the component, `onError` will be called with the `error` and `info` arguments in `componentDidCatch` [lifecycle method](https://reactjs.org/docs/react-component.html#componentdidcatch).

web/init/src/ErrorBoundary.jsx

@@ -1,5 +1,8 @@
 import React from "react";
 
+/**
+ * Creates an error boundary for any child component rendered inside
+ */
 export default class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -10,21 +13,25 @@ export default class ErrorBoundary extends React.Component {
     }
   }
 
-  componentDidCatch(error, info) {
-    this.setState({
-      error: error,
-      errorInfo: info,
+  static getDerivedStateFromError(error) {
+    return {
+      error,
       hasError: true
-    });
+    };
+  }
+
+  componentDidCatch() {
     // We can thow an error modal, or some sort of error UI that can be used globally.
     // We should also send this error to bugsnag or some sort of reporting service here.
   }
 
   render() {
+    const { children } = this.props;
+    const { hasError, error } = this.state;
     return (
       <div className="flex flex1">
-        {this.state.hasError ? <div>{this.state.error.toString()}</div> : null}
-        {this.props.children}
+        {hasError && <div>{error.toString()}</div>}
+        {children}
       </div>
     );
   }

web/init/src/Ship.jsx

@@ -22,6 +22,8 @@ export class Ship extends React.Component {
     history: PropTypes.object,
     /** Callback function to be invoked at the finalization of the Ship Init flow */
     onCompletion: PropTypes.func,
+    /** Callback function to be invoked when there's an unresolved error thrown followed componentDidCatch() method signature */
+    onError: PropTypes.func
   }
 
   static defaultProps = {
@@ -50,6 +52,13 @@ export class Ship extends React.Component {
     }
   }
 
+  componentDidCatch(error, errorInfo) {
+    const { onError } = this.props;
+    if (onError) {
+      onError(error, errorInfo);
+    }
+  }
+
   render() {
     const { history, headerEnabled, stepsEnabled, basePath, onCompletion } = this.props;
     const { store } = this.state;