Handle invalid OpenAPI Responses (#3223)

.changeset/smart-feet-argue.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Handle invalid OpenAPI Responses

packages/react-openapi/src/OpenAPIResponseExample.tsx

@@ -6,8 +6,8 @@ import { OpenAPIResponseExampleContent } from './OpenAPIResponseExampleContent';
 import { type OpenAPIContext, getOpenAPIClientContext } from './context';
 import type { OpenAPIOperationData, OpenAPIWebhookData } from './types';
 import { getExampleFromReference, getExamples } from './util/example';
-import { createStateKey, getStatusCodeDefaultLabel } from './utils';
+import { createStateKey, getStatusCodeDefaultLabel, resolveDescription } from './utils';
-import { checkIsReference, resolveDescription } from './utils';
+import { checkIsReference } from './utils';
 
 /**
  * Display an example of the response content.
@@ -41,45 +41,47 @@ export function OpenAPIResponseExample(props: {
         return Number(a) - Number(b);
     });
 
-    const tabs = responses.map(([key, responseObject]) => {
+    const tabs = responses
-        const description = resolveDescription(responseObject);
+        .filter(([_, responseObject]) => responseObject && typeof responseObject === 'object')
-        const label = description ? (
+        .map(([key, responseObject]) => {
-            <Markdown source={description} />
+            const description = resolveDescription(responseObject);
-        ) : (
+            const label = description ? (
-            getStatusCodeDefaultLabel(key, context)
+                <Markdown source={description} />
-        );
+            ) : (
+                getStatusCodeDefaultLabel(key, context)
+            );
+
+            if (checkIsReference(responseObject)) {
+                return {
+                    key: key,
+                    label,
+                    statusCode: key,
+                    body: (
+                        <OpenAPIExample
+                            example={getExampleFromReference(responseObject, context)}
+                            context={context}
+                            syntax="json"
+                        />
+                    ),
+                };
+            }
+
+            if (!responseObject.content || Object.keys(responseObject.content).length === 0) {
+                return {
+                    key: key,
+                    label,
+                    statusCode: key,
+                    body: <OpenAPIEmptyExample context={context} />,
+                };
+            }
 
-        if (checkIsReference(responseObject)) {
             return {
                 key: key,
                 label,
                 statusCode: key,
-                body: (
+                body: <OpenAPIResponse context={context} content={responseObject.content} />,
-                    <OpenAPIExample
-                        example={getExampleFromReference(responseObject, context)}
-                        context={context}
-                        syntax="json"
-                    />
-                ),
             };
-        }
+        });
-
-        if (!responseObject.content || Object.keys(responseObject.content).length === 0) {
-            return {
-                key: key,
-                label,
-                statusCode: key,
-                body: <OpenAPIEmptyExample context={context} />,
-            };
-        }
-
-        return {
-            key: key,
-            label,
-            statusCode: key,
-            body: <OpenAPIResponse context={context} content={responseObject.content} />,
-        };
-    });
 
     if (tabs.length === 0) {
         return null;

packages/react-openapi/src/OpenAPIResponses.tsx

@@ -20,8 +20,9 @@ export function OpenAPIResponses(props: {
 }) {
     const { responses, context } = props;
 
-    const groups = Object.entries(responses).map(
+    const groups = Object.entries(responses)
-        ([statusCode, response]: [string, OpenAPIV3.ResponseObject]) => {
+        .filter(([_, response]) => response && typeof response === 'object')
+        .map(([statusCode, response]: [string, OpenAPIV3.ResponseObject]) => {
             const tabs = (() => {
                 // If there is no content, but there are headers, we need to show the headers
                 if (
@@ -83,8 +84,7 @@ export function OpenAPIResponses(props: {
                 ),
                 tabs,
             };
-        }
+        });
-    );
 
     const state = useResponseExamplesState(context.blockKey, groups[0]?.key);