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

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'>
-        {Topbar ? <Topbar /> : null}
-        <BaseLayout /> 
-        <Row>
-          <Col>
-            <OnlineValidatorBadge />
-          </Col>
-        </Row>
+        <ErrorBoundary targetName="Topbar">
+          {Topbar ? <Topbar /> : null}
+        </ErrorBoundary>
+        <BaseLayout />
+        <ErrorBoundary targetName="OnlineValidatorBadge">
+          <Row>
+            <Col>
+              <OnlineValidatorBadge />
+            </Col>
+          </Row>
+        </ErrorBoundary>
       </Container>
     )
   }