fix: introduce Error Boundaries to handle unexpected failures (#7671)

Two new components have been updated via plugin system: ErrorBoundary and Fallback.
These components can be overridden by user plugins.

Refs #7647

config/jest/jest.unit.config.js

@@ -18,6 +18,7 @@ module.exports = {
     '<rootDir>/test/unit/components/online-validator-badge.jsx',
     '<rootDir>/test/unit/components/live-response.jsx',
   ],
+  silent: true, // set to `false` to allow console.* calls to be printed
   transformIgnorePatterns: [
     '/node_modules/(?!(react-syntax-highlighter)/)'
   ]

src/core/components/layouts/base.jsx

@@ -28,6 +28,7 @@ export default class BaseLayout extends React.Component {
     const SchemesContainer = getComponent("SchemesContainer", true)
     const AuthorizeBtnContainer = getComponent("AuthorizeBtnContainer", true)
     const FilterContainer = getComponent("FilterContainer", true)
+    const ErrorBoundary = getComponent("ErrorBoundary", true)
     let isSwagger2 = specSelectors.isSwagger2()
     let isOAS3 = specSelectors.isOAS3()
 
@@ -85,8 +86,8 @@ export default class BaseLayout extends React.Component {
     const hasSecurityDefinitions = !!specSelectors.securityDefinitions()
 
     return (
-
       <div className='swagger-ui'>
+        <ErrorBoundary targetName="BaseLayout">
           <SvgAssets />
           <VersionPragmaFilter isSwagger2={isSwagger2} isOAS3={isOAS3} alsoShow={<Errors/>}>
             <Errors/>
@@ -119,6 +120,7 @@ export default class BaseLayout extends React.Component {
               </Col>
             </Row>
           </VersionPragmaFilter>
+        </ErrorBoundary>
       </div>
     )
   }

src/core/plugins/view/error-boundary.jsx

@@ -0,0 +1,45 @@
+import PropTypes from "prop-types"
+import React, { Component } from "react"
+
+import Fallback from "./fallback"
+
+export class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error(error, errorInfo) // eslint-disable-line no-console
+  }
+
+  render() {
+    const { getComponent, targetName, children } = this.props
+    const FallbackComponent = getComponent("Fallback")
+
+    if (this.state.hasError) {
+      return <FallbackComponent name={targetName} />
+    }
+
+    return children
+  }
+}
+ErrorBoundary.propTypes = {
+  targetName: PropTypes.string,
+  getComponent: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ])
+}
+ErrorBoundary.defaultProps = {
+  targetName: "this component",
+  getComponent: () => Fallback,
+  children: null,
+}
+
+export default ErrorBoundary

src/core/plugins/view/fallback.jsx

@@ -0,0 +1,13 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const Fallback = ({ name }) => (
+  <div className="fallback">
+    😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i>
+  </div>
+)
+Fallback.propTypes = {
+  name: PropTypes.string.isRequired,
+}
+
+export default Fallback

src/core/plugins/view/index.js

@@ -1,6 +1,9 @@
 import * as rootInjects from "./root-injects"
 import { memoize } from "core/utils"
 
+import ErrorBoundary from "./error-boundary"
+import Fallback from "./fallback"
+
 export default function({getComponents, getStore, getSystem}) {
 
   let { getComponent, render, makeMappedContainer } = rootInjects
@@ -14,6 +17,10 @@ export default function({getComponents, getStore, getSystem}) {
       getComponent: memGetComponent,
       makeMappedContainer: memMakeMappedContainer,
       render: render.bind(null, getSystem, getStore, getComponent, getComponents),
-    }
+    },
+    components: {
+      ErrorBoundary,
+      Fallback,
+    },
   }
 }

src/core/plugins/view/root-injects.jsx

@@ -1,20 +1,24 @@
 import React, { Component } from "react"
-import PropTypes from "prop-types"
 import ReactDOM from "react-dom"
 import { connect, Provider } from "react-redux"
 import omit from "lodash/omit"
 
 const SystemWrapper = (getSystem, ComponentToWrap ) => class extends Component {
   render() {
-    return <ComponentToWrap {...getSystem() } {...this.props} {...this.context} />
+    return <ComponentToWrap {...getSystem()} {...this.props} {...this.context} />
   }
 }
 
-const RootWrapper = (reduxStore, ComponentToWrap) => class extends Component {
+const RootWrapper = (getSystem, reduxStore, ComponentToWrap) => class extends Component {
   render() {
+    const { getComponent } = getSystem()
+    const ErrorBoundary = getComponent("ErrorBoundary", true)
+
     return (
       <Provider store={reduxStore}>
+        <ErrorBoundary targetName={ComponentToWrap?.name}>
           <ComponentToWrap {...this.props} {...this.context} />
+        </ErrorBoundary>
       </Provider>
     )
   }
@@ -30,7 +34,7 @@ const makeContainer = (getSystem, component, reduxStore) => {
   let wrappedWithSystem = SystemWrapper(getSystem, component, reduxStore)
   let connected = connect( mapStateToProps )(wrappedWithSystem)
   if(reduxStore)
-    return RootWrapper(reduxStore, connected)
+    return RootWrapper(getSystem, reduxStore, connected)
   return connected
 }
 
@@ -66,73 +70,43 @@ export const makeMappedContainer = (getSystem, getStore, memGetComponent, getCom
 }
 
 export const render = (getSystem, getStore, getComponent, getComponents, domNode) => {
-  let App = (getComponent(getSystem, getStore, getComponents, "App", "root"))
-  ReactDOM.render(( <App/> ), domNode)
+  let App = getComponent(getSystem, getStore, getComponents, "App", "root")
+  ReactDOM.render(<App/>, domNode)
 }
 
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props)
-    this.state = { hasError: false, error: null }
-  }
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error }
-  }
-
-  componentDidCatch(error, errorInfo) {
-    console.error(error, errorInfo) // eslint-disable-line no-console
-  }
-
+/**
+ * Creates a class component from a stateless one and wrap it with Error Boundary
+ * to handle errors coming from a stateless component.
+ */
+const createClass = (getSystem, OriginalComponent) => class extends Component {
   render() {
-    if (this.state.hasError) {
-      return <Fallback name={this.props.targetName} />
-    }
+    const { getComponent } = getSystem()
+    const ErrorBoundary = getComponent("ErrorBoundary")
 
-    return this.props.children
-  }
-}
-ErrorBoundary.propTypes = {
-  targetName: PropTypes.string,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ])
-}
-ErrorBoundary.defaultProps = {
-  targetName: "this component",
-  children: null,
-}
-
-const Fallback = ({ name }) => (
-  <div className="fallback">
-    😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i>
-  </div>
-)
-Fallback.propTypes = {
-  name: PropTypes.string.isRequired,
-}
-
-// Render try/catch wrapper
-const createClass = OriginalComponent => class extends Component {
-  render() {
     return (
-      <ErrorBoundary targetName={OriginalComponent?.name}>
+      <ErrorBoundary targetName={OriginalComponent?.name} getComponent={getComponent}>
         <OriginalComponent {...this.props} />
       </ErrorBoundary>
     )
   }
 }
 
-const wrapRender = (component) => {
+const wrapRender = (getSystem, component) => {
   const isStateless = component => !(component.prototype && component.prototype.isReactComponent)
-  const target = isStateless(component) ? createClass(component) : component
+  const target = isStateless(component) ? createClass(getSystem, component) : component
   const { render: oriRender} = target.prototype
 
+  /**
+   * This render method override handles errors that are throw in render method
+   * of class components.
+   */
   target.prototype.render = function render(...args) {
     try {
       return oriRender.apply(this, args)
     } catch (error) {
+      const { getComponent } = getSystem()
+      const Fallback = getComponent("Fallback")
+
       console.error(error) // eslint-disable-line no-console
       return <Fallback name={target.name} />
     }
@@ -159,11 +133,11 @@ export const getComponent = (getSystem, getStore, getComponents, componentName,
   }
 
   if(!container)
-    return wrapRender(component)
+    return wrapRender(getSystem, component)
 
   if(container === "root")
     return makeContainer(getSystem, component, getStore())
 
   // container == truthy
-  return makeContainer(getSystem, wrapRender(component))
+  return makeContainer(getSystem, wrapRender(getSystem, component))
 }

src/standalone/layout.jsx

@@ -1,5 +1,3 @@
-
-
 import React from "react"
 import PropTypes from "prop-types"
 
@@ -16,27 +14,29 @@ export default class StandaloneLayout extends React.Component {
   }
 
   render() {
-    let { getComponent } = this.props
-
-    let Container = getComponent("Container")
-    let Row = getComponent("Row")
-    let Col = getComponent("Col")
-
+    const { getComponent } = this.props
+    const Container = getComponent("Container")
+    const Row = getComponent("Row")
+    const Col = getComponent("Col")
     const Topbar = getComponent("Topbar", true)
     const BaseLayout = getComponent("BaseLayout", true)
     const OnlineValidatorBadge = getComponent("onlineValidatorBadge", true)
+    const ErrorBoundary = getComponent("ErrorBoundary", true)
 
 
     return (
-
       <Container className='swagger-ui'>
+        <ErrorBoundary targetName="Topbar">
           {Topbar ? <Topbar /> : null}
+        </ErrorBoundary>
         <BaseLayout />
+        <ErrorBoundary targetName="OnlineValidatorBadge">
           <Row>
             <Col>
               <OnlineValidatorBadge />
             </Col>
           </Row>
+        </ErrorBoundary>
       </Container>
     )
   }

test/unit/core/system/system.jsx

@@ -940,7 +940,7 @@ describe("bound system", function(){
         expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
       })
 
-      it("should catch errors thrown inside of pure component render methods", function() {
+      it("should catch errors thrown inside of pure component", function() {
         // Given
         class BrokenComponent extends PureComponent {
           // eslint-disable-next-line react/require-render-return
@@ -962,16 +962,16 @@ describe("bound system", function(){
 
         // When
         let Component = system.getSystem().getComponent("BrokenComponent")
-        const renderedComponent = render(<Component />)
+        const wrapper = mount(<Component />)
 
         // Then
-        expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+        expect(wrapper.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
       })
 
-      it("should catch errors thrown inside of stateless component functions", function() {
+      it("should catch errors thrown inside of stateless component function", function() {
         // Given
         // eslint-disable-next-line react/require-render-return
-        let BrokenComponent = function BrokenComponent() { throw new Error("This component is broken") }
+        const BrokenComponent = () => { throw new Error("This component is broken") }
         const system = new System({
           plugins: [
             ViewPlugin,
@@ -985,15 +985,14 @@ describe("bound system", function(){
 
         // When
         const Component = system.getSystem().getComponent("BrokenComponent")
-        const renderedComponent = mount(<Component />)
+        const wrapper = mount(<Component />)
 
-        expect(renderedComponent.text().startsWith("😱 Could not render")).toEqual(true)
+        expect(wrapper.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
       })
 
-      it("should catch errors thrown inside of container components", function() {
+      it("should catch errors thrown inside of container created from class component", function() {
         // Given
         class BrokenComponent extends React.Component {
-          // eslint-disable-next-line react/require-render-return
           render() {
             throw new Error("This component is broken")
           }
@@ -1011,15 +1010,42 @@ describe("bound system", function(){
         })
 
         // When
-        let Component = system.getSystem().getComponent("BrokenComponent", true)
-        const renderedComponent = render(
+        const Component = system.getSystem().getComponent("BrokenComponent", true)
+        const wrapper = render(
           <Provider store={system.getStore()}>
             <Component />
           </Provider>
         )
 
         // Then
-        expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+        expect(wrapper.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+      })
+
+      it("should catch errors thrown inside of container created from stateless component function", function() {
+        // Given
+        const BrokenComponent = () => { throw new Error("This component is broken") }
+
+        const system = new System({
+          plugins: [
+            ViewPlugin,
+            {
+              components: {
+                BrokenComponent
+              }
+            }
+          ]
+        })
+
+        // When
+        const Component = system.getSystem().getComponent("BrokenComponent", true)
+        const wrapper = mount(
+          <Provider store={system.getStore()}>
+            <Component />
+          </Provider>
+        )
+
+        // Then
+        expect(wrapper.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
       })
     })
   })