Swagger ui 4.11.1 screen is blank #8069

[Mathias02]

Content & configuration

Swagger/OpenAPI definition:

# your YAML here

openapi: 3.0.0
info:
 title: Example API
 version: 1.0.0
paths:
 /example:
   get:
     summary: Get an example
     responses:
       200:
         description: A list of examples
         content:
           application/json:
             schema:
               type: array
               items:
                 type: string

Swagger-UI configuration options:

SwaggerUI({
  // your config options here

 url: "https://my-api.com/openapi.json",  // Path to your OpenAPI spec
 dom_id: '#swagger-ui',  // Element where Swagger UI will render
 presets: [SwaggerUI.presets.apis],
 layout: 'BaseLayout'
})

Ensure the OpenAPI spec is valid and accessible //
url: "https://my-api.com/openapi.json",

dom_id corresponds to an existing HTML element with the ID swagger-ui

``` ?yourQueryStringConfig ``` ### Is your feature request related to a problem?

Yes. When using Swagger UI (version 4.11.1), the screen appears blank. Upon inspecting the console logs, no Swagger UI components are rendering, possibly due to issues with loading the OpenAPI spec, missing configuration, or JavaScript errors. This prevents users from interacting with or testing the API directly from the Swagger UI.

Describe the solution you'd like

• A fix to ensure Swagger UI properly renders even when configuration or network issues arise.
• Provide clearer error messages or diagnostics within Swagger UI to help users identify the root cause of issues (e.g., missing or invalid OpenAPI spec, CORS issues).
• Support better error handling to avoid blank screens due to minor configuration issues.

Describe alternatives you've considered

• Using Postman to test APIs, but this does not provide the seamless Swagger UI experience.
• Manually rendering the OpenAPI spec or using a local proxy for testing.

Additional context

• Swagger UI version: 4.11.1
• Browser: Chrome 89 (or specify your browser version)
• OpenAPI spec is hosted on a remote server (with URL "https://my-api.com/openapi.json").
• You may want to check CORS configurations if your API is hosted on a different domain.