Correctly handle OpenAPI errors (#3401)

Author: gregberge

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx

@@ -23,7 +23,7 @@ export async function OpenAPIOperation(props: BlockProps<AnyOpenAPIOperationsBlo
 }
 
 async function OpenAPIOperationBody(props: BlockProps<AnyOpenAPIOperationsBlock>) {
-    const { block, context } = props;
+    const { block, context, style } = props;
 
     if (!context.contentContext) {
         return null;
@@ -36,11 +36,9 @@ async function OpenAPIOperationBody(props: BlockProps<AnyOpenAPIOperationsBlock>
 
     if (error) {
         return (
-            <div className="hidden">
-                <p>
-                    Error with {specUrl}: {error.message}
-                </p>
-            </div>
+            <p aria-hidden className={tcls(style)}>
+                Error while loading OpenAPI operation — {error.message}
+            </p>
         );
     }
 

packages/gitbook/src/lib/openapi/resolveOpenAPIOperationBlock.ts

@@ -1,5 +1,5 @@
 import { fetchOpenAPIFilesystem } from '@/lib/openapi/fetch';
-import { OpenAPIParseError } from '@gitbook/openapi-parser';
+import type { OpenAPIParseError } from '@gitbook/openapi-parser';
 import { type OpenAPIOperationData, resolveOpenAPIOperation } from '@gitbook/react-openapi';
 import type {
     AnyOpenAPIOperationsBlock,
@@ -55,8 +55,8 @@ async function baseResolveOpenAPIOperationBlock(
 
         return { data, specUrl };
     } catch (error) {
-        if (error instanceof OpenAPIParseError) {
-            return { error };
+        if (error instanceof Error && error.name === 'OpenAPIParseError') {
+            return { error: error as OpenAPIParseError };
         }
 
         throw error;