fix: informative Stubs when document is invalid (#1068)

Co-authored-by: Cody's Dad <[email protected]>

library/package.json

@@ -70,7 +70,7 @@
   "dependencies": {
     "@asyncapi/avro-schema-parser": "^3.0.24",
     "@asyncapi/openapi-schema-parser": "^3.0.24",
-    "@asyncapi/parser": "^3.1.0",
+    "@asyncapi/parser": "^3.3.0",
     "@asyncapi/protobuf-schema-parser": "^3.2.14",
     "highlight.js": "^10.7.2",
     "isomorphic-dompurify": "^2.14.0",

library/src/containers/AsyncApi/Standalone.tsx

@@ -75,7 +75,13 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncAPIState> {
       if (!error) {
         return null;
       }
-      return concatenatedConfig.show?.errors && <Error error={error} />;
+      return (
+        concatenatedConfig.show?.errors && (
+          <section className="aui-root">
+            <Error error={error} />
+          </section>
+        )
+      );
     }
 
     return (

library/src/containers/Error/Error.tsx

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

library/src/helpers/parser.ts

@@ -3,7 +3,12 @@ import { OpenAPISchemaParser } from '@asyncapi/openapi-schema-parser';
 import { ProtoBuffSchemaParser } from '@asyncapi/protobuf-schema-parser';
 import { AvroSchemaParser } from '@asyncapi/avro-schema-parser';
 
-import { ErrorObject, ParserReturn, FetchingSchemaInterface } from '../types';
+import {
+  ErrorObject,
+  ParserReturn,
+  FetchingSchemaInterface,
+  ValidationError,
+} from '../types';
 
 import { VALIDATION_ERRORS_TYPE } from '../constants';
 
@@ -22,8 +27,40 @@ export class Parser {
   ): Promise<ParserReturn> {
     try {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      const { document } = await asyncapiParser.parse(content, parserOptions);
-      return { asyncapi: document };
+      const parseResult = await asyncapiParser.parse(content, parserOptions);
+
+      const error: {
+        title: string | undefined;
+        validationErrors: ValidationError[] | undefined;
+      } = {
+        title: 'There are errors in your Asyncapi document',
+        validationErrors: [],
+      };
+
+      if (parseResult.document === undefined) {
+        parseResult.diagnostics.forEach((diagnostic) => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+          if (diagnostic.severity == 0) {
+            const tempObj: ValidationError = {
+              title: diagnostic.message,
+              location: {
+                jsonPointer: '/' + diagnostic.path.join('/'),
+                startLine: diagnostic.range.start.line,
+                startColumn: diagnostic.range.start.character,
+                // as of @asyncapi/parser 3.3.0 offset of 1 correctly shows the error line
+                startOffset: 1,
+                endLine: diagnostic.range.end.line,
+                endColumn: diagnostic.range.end.character,
+                endOffset: 0,
+              },
+            };
+            error.validationErrors?.push(tempObj);
+          }
+        });
+        throw error;
+      }
+
+      return { asyncapi: parseResult.document };
     } catch (err) {
       return this.handleError(err as ErrorObject);
     }