From 03cc9466fccc8aeabf8abda65f5eb8d862a13207 Mon Sep 17 00:00:00 2001
From: catosaurusrex2003 <mohdmehdi2003@gmail.com>
Date: Wed, 13 Nov 2024 22:02:59 +0530
Subject: [PATCH 1/6] error boundary added

---
 library/package.json                          |  1 +
 .../ApplicationErrorHandler/ErrorBoundary.tsx | 42 +++++++++++++++++++
 library/src/containers/AsyncApi/Layout.tsx    | 35 +++++++++-------
 library/src/containers/Error/Error.tsx        |  5 ++-
 library/src/types.ts                          |  2 +-
 package-lock.json                             | 13 ++++++
 6 files changed, 80 insertions(+), 18 deletions(-)
 create mode 100644 library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx

diff --git a/library/package.json b/library/package.json
index 02769b0c1..4378f5077 100644
--- a/library/package.json
+++ b/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": {
diff --git a/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx b/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
new file mode 100644
index 000000000..5dd810d98
--- /dev/null
+++ b/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorObject } from '../../types';
+import { Error } from '../Error/Error';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface FallbackProps {
+  error: any;
+  resetErrorBoundary?: (...args: any[]) => void;
+}
+
+function fallbackRender({ error, resetErrorBoundary }: FallbackProps) {
+  const ErrorObject: ErrorObject = {
+    title: "Something went wrong",
+    type: 'application-error',
+    validationErrors:[
+      {
+        title:error.message,
+      }
+    ]
+  };
+  return <Error error={ErrorObject} />;
+}
+
+const AsyncApiErrorBoundary = ({ children }: Props) => {
+  const onReset = (details: any) => {
+    // TODO: some magic to make monaco editor undo
+    console.log('resetting', details);
+  };
+
+  return (
+    <ErrorBoundary fallbackRender={fallbackRender} onReset={onReset}>
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+export default AsyncApiErrorBoundary;
diff --git a/library/src/containers/AsyncApi/Layout.tsx b/library/src/containers/AsyncApi/Layout.tsx
index 3a6a6702f..4c13a28f1 100644
--- a/library/src/containers/AsyncApi/Layout.tsx
+++ b/library/src/containers/AsyncApi/Layout.tsx
@@ -13,6 +13,7 @@ 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;
@@ -48,24 +49,26 @@ 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.errors && error && <Error error={error} />}
+                  {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>
diff --git a/library/src/containers/Error/Error.tsx b/library/src/containers/Error/Error.tsx
index eba833efa..de258ca38 100644
--- a/library/src/containers/Error/Error.tsx
+++ b/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>
diff --git a/library/src/types.ts b/library/src/types.ts
index c1d52ae4c..9f58864e2 100644
--- a/library/src/types.ts
+++ b/library/src/types.ts
@@ -44,7 +44,7 @@ export interface MessageExample {
 
 export interface ValidationError {
   title: string;
-  location: {
+  location?: {
     jsonPointer: string;
     startLine: number;
     startColumn: number;
diff --git a/package-lock.json b/package-lock.json
index 2037cabe7..22954bdd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,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"
       },
       "devDependencies": {
@@ -22001,6 +22002,18 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
+      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

From 338df6346f6220dea9e048c3ec5cda431dd1d83d Mon Sep 17 00:00:00 2001
From: catosaurusrex2003 <mohdmehdi2003@gmail.com>
Date: Wed, 13 Nov 2024 22:18:08 +0530
Subject: [PATCH 2/6] removed console.log

---
 .../src/containers/ApplicationErrorHandler/ErrorBoundary.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx b/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
index 5dd810d98..7919971b2 100644
--- a/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
+++ b/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
@@ -28,8 +28,7 @@ function fallbackRender({ error, resetErrorBoundary }: FallbackProps) {
 
 const AsyncApiErrorBoundary = ({ children }: Props) => {
   const onReset = (details: any) => {
-    // TODO: some magic to make monaco editor undo
-    console.log('resetting', details);
+    // TODO: maybe some magic to recover the previous document ( the one without the error ) automatically 
   };
 
   return (

From 305eca0c0fb6f6f66b44d4d569ba05d22ce51dc6 Mon Sep 17 00:00:00 2001
From: catosaurusrex2003 <mohdmehdi2003@gmail.com>
Date: Wed, 13 Nov 2024 22:38:00 +0530
Subject: [PATCH 3/6] linting

---
 .../ApplicationErrorHandler/ErrorBoundary.tsx | 28 ++++++-------------
 library/src/containers/Error/Error.tsx        |  2 +-
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx b/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
index 7919971b2..f1a802687 100644
--- a/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
+++ b/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ReactNode } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { ErrorObject } from '../../types';
 import { Error } from '../Error/Error';
 
@@ -8,33 +8,23 @@ interface Props {
   children: ReactNode;
 }
 
-interface FallbackProps {
-  error: any;
-  resetErrorBoundary?: (...args: any[]) => void;
-}
-
-function fallbackRender({ error, resetErrorBoundary }: FallbackProps) {
+function fallbackRender({ error }: FallbackProps) {
   const ErrorObject: ErrorObject = {
-    title: "Something went wrong",
+    title: 'Something went wrong',
     type: 'application-error',
-    validationErrors:[
+    validationErrors: [
       {
-        title:error.message,
-      }
-    ]
+        // 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 onReset = (details: any) => {
-    // TODO: maybe some magic to recover the previous document ( the one without the error ) automatically 
-  };
-
   return (
-    <ErrorBoundary fallbackRender={fallbackRender} onReset={onReset}>
-      {children}
-    </ErrorBoundary>
+    <ErrorBoundary fallbackRender={fallbackRender}>{children}</ErrorBoundary>
   );
 };
 
diff --git a/library/src/containers/Error/Error.tsx b/library/src/containers/Error/Error.tsx
index de258ca38..e22618ea3 100644
--- a/library/src/containers/Error/Error.tsx
+++ b/library/src/containers/Error/Error.tsx
@@ -15,7 +15,7 @@ const renderErrors = (errors: ValidationError[]): React.ReactNode => {
       }
       return (
         <div key={index} className="flex gap-2">
-          {(singleError?.location?.startLine ||
+          {(singleError?.location?.startLine ??
             singleError?.location?.startOffset) && (
             <span>{`line ${singleError?.location?.startLine + singleError?.location?.startOffset}:`}</span>
           )}

From 27b3ab993147859c5cc0ad2ae3cb1b8ff23f721d Mon Sep 17 00:00:00 2001
From: catosaurusrex2003 <mohdmehdi2003@gmail.com>
Date: Sun, 17 Nov 2024 15:55:42 +0530
Subject: [PATCH 4/6] logic to rerender

---
 .../ApplicationErrorHandler/ErrorBoundary.tsx        | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx b/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
index f1a802687..ecefbaf08 100644
--- a/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
+++ b/library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ReactNode } from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { ErrorObject } from '../../types';
@@ -23,8 +23,16 @@ function fallbackRender({ error }: FallbackProps) {
 }
 
 const AsyncApiErrorBoundary = ({ children }: Props) => {
+  const [key, setKey] = useState(0);
+
+  useEffect(() => {
+    setKey((prevKey) => prevKey + 1);
+  }, [children]);
+
   return (
-    <ErrorBoundary fallbackRender={fallbackRender}>{children}</ErrorBoundary>
+    <ErrorBoundary key={key} fallbackRender={fallbackRender}>
+      {children}
+    </ErrorBoundary>
   );
 };
 

From 4f524be58cddc73ec0508a6de55bd6c7786a0487 Mon Sep 17 00:00:00 2001
From: catosaurusrex2003 <mohdmehdi2003@gmail.com>
Date: Thu, 28 Nov 2024 21:00:59 +0530
Subject: [PATCH 5/6] removed Error from layout.tsx

---
 library/src/containers/AsyncApi/Layout.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/library/src/containers/AsyncApi/Layout.tsx b/library/src/containers/AsyncApi/Layout.tsx
index 4c13a28f1..6af5a3809 100644
--- a/library/src/containers/AsyncApi/Layout.tsx
+++ b/library/src/containers/AsyncApi/Layout.tsx
@@ -8,7 +8,6 @@ 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';
@@ -58,7 +57,6 @@ const AsyncApiLayout: React.FunctionComponent<Props> = ({
               {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 />}

From e18b21bce610bac7b05fad00834f5bb62e37da30 Mon Sep 17 00:00:00 2001
From: catosaurusrex2003 <mohdmehdi2003@gmail.com>
Date: Thu, 28 Nov 2024 21:03:05 +0530
Subject: [PATCH 6/6] lint

---
 library/src/containers/AsyncApi/Layout.tsx     | 3 ---
 library/src/containers/AsyncApi/Standalone.tsx | 8 +-------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/library/src/containers/AsyncApi/Layout.tsx b/library/src/containers/AsyncApi/Layout.tsx
index 6af5a3809..b6105b392 100644
--- a/library/src/containers/AsyncApi/Layout.tsx
+++ b/library/src/containers/AsyncApi/Layout.tsx
@@ -11,19 +11,16 @@ import { Schemas } from '../Schemas/Schemas';
 
 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');
 
diff --git a/library/src/containers/AsyncApi/Standalone.tsx b/library/src/containers/AsyncApi/Standalone.tsx
index 9c5cc3c8e..b4ac3665a 100644
--- a/library/src/containers/AsyncApi/Standalone.tsx
+++ b/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) {