feat: error boundary in layout to handle application errors / crashes (#1108)

Co-authored-by: Cody's Dad <40604284+AceTheCreator@users.noreply.github.com>

Author: catosaurusrex2003

library/package.json

@@ -76,6 +76,7 @@
     "isomorphic-dompurify": "^2.14.0",
     "marked": "^4.0.14",
     "openapi-sampler": "^1.2.1",
+    "react-error-boundary": "^4.1.2",
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {

library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { ReactNode } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { ErrorObject } from '../../types';
+import { Error } from '../Error/Error';
+
+interface Props {
+  children: ReactNode;
+}
+
+function fallbackRender({ error }: FallbackProps) {
+  const ErrorObject: ErrorObject = {
+    title: 'Something went wrong',
+    type: 'application-error',
+    validationErrors: [
+      {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+        title: error?.message,
+      },
+    ],
+  };
+  return <Error error={ErrorObject} />;
+}
+
+const AsyncApiErrorBoundary = ({ children }: Props) => {
+  const [key, setKey] = useState(0);
+
+  useEffect(() => {
+    setKey((prevKey) => prevKey + 1);
+  }, [children]);
+
+  return (
+    <ErrorBoundary key={key} fallbackRender={fallbackRender}>
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+export default AsyncApiErrorBoundary;

library/src/containers/AsyncApi/Layout.tsx

@@ -8,22 +8,19 @@ import { Servers } from '../Servers/Servers';
 import { Operations } from '../Operations/Operations';
 import { Messages } from '../Messages/Messages';
 import { Schemas } from '../Schemas/Schemas';
-import { Error } from '../Error/Error';
 
 import { ConfigInterface } from '../../config';
 import { SpecificationContext, ConfigContext } from '../../contexts';
-import { ErrorObject } from '../../types';
+import AsyncApiErrorBoundary from '../ApplicationErrorHandler/ErrorBoundary';
 
 interface Props {
   asyncapi: AsyncAPIDocumentInterface;
   config: ConfigInterface;
-  error?: ErrorObject;
 }
 
 const AsyncApiLayout: React.FunctionComponent<Props> = ({
   asyncapi,
   config,
-  error = null,
 }) => {
   const [observerClassName, setObserverClassName] = useState('container:xl');
 
@@ -48,24 +45,25 @@ const AsyncApiLayout: React.FunctionComponent<Props> = ({
     <ConfigContext.Provider value={config}>
       <SpecificationContext.Provider value={asyncapi}>
         <section className="aui-root">
-          <div
-            className={`${observerClassName} relative md:flex bg-white leading-normal`}
-            id={config.schemaID ?? undefined}
-            ref={ref}
-          >
-            {configShow.sidebar && <Sidebar />}
-            <div className="panel--center relative py-8 flex-1">
-              <div className="relative z-10">
-                {configShow.errors && error && <Error error={error} />}
-                {configShow.info && <Info />}
-                {configShow.servers && <Servers />}
-                {configShow.operations && <Operations />}
-                {configShow.messages && <Messages />}
-                {configShow.schemas && <Schemas />}
+          <AsyncApiErrorBoundary>
+            <div
+              className={`${observerClassName} relative md:flex bg-white leading-normal`}
+              id={config.schemaID ?? undefined}
+              ref={ref}
+            >
+              {configShow.sidebar && <Sidebar />}
+              <div className="panel--center relative py-8 flex-1">
+                <div className="relative z-10">
+                  {configShow.info && <Info />}
+                  {configShow.servers && <Servers />}
+                  {configShow.operations && <Operations />}
+                  {configShow.messages && <Messages />}
+                  {configShow.schemas && <Schemas />}
+                </div>
+                <div className="panel--right absolute top-0 right-0 h-full bg-gray-800" />
               </div>
-              <div className="panel--right absolute top-0 right-0 h-full bg-gray-800" />
             </div>
-          </div>
+          </AsyncApiErrorBoundary>
         </section>
       </SpecificationContext.Provider>
     </ConfigContext.Provider>

library/src/containers/AsyncApi/Standalone.tsx

@@ -84,13 +84,7 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncAPIState> {
       );
     }
 
-    return (
-      <AsyncApiLayout
-        asyncapi={asyncapi}
-        config={concatenatedConfig}
-        error={error}
-      />
-    );
+    return <AsyncApiLayout asyncapi={asyncapi} config={concatenatedConfig} />;
   }
 
   private updateState(schema: PropsSchema) {

library/src/containers/Error/Error.tsx

@@ -15,7 +15,10 @@ const renderErrors = (errors: ValidationError[]): React.ReactNode => {
       }
       return (
         <div key={index} className="flex gap-2">
-          <span>{`line ${singleError?.location?.startLine + singleError?.location?.startOffset}:`}</span>
+          {(singleError?.location?.startLine ??
+            singleError?.location?.startOffset) && (
+            <span>{`line ${singleError?.location?.startLine + singleError?.location?.startOffset}:`}</span>
+          )}
           <code className="whitespace-pre-wrap break-all ml-2">
             {singleError.title}
           </code>

library/src/types.ts

@@ -44,7 +44,7 @@ export interface MessageExample {
 
 export interface ValidationError {
   title: string;
-  location: {
+  location?: {
     jsonPointer: string;
     startLine: number;
     startColumn: number;