swagger UI stops working (white screen of death)

[tamis-laan]

After a while my swagger ui stops working showing a blank screen and the following client console errors:

*/:8 GET https://*/docs/swagger-ui.css net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
*/:71 GET https://*/docs/swagger-ui-standalone-preset.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
*/:70 GET https://*/docs/swagger-ui-bundle.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
swagger-ui-init.js:1045 Uncaught ReferenceError: SwaggerUIBundle is not defined
    at window.onload (swagger-ui-init.js:1045)
window.onload @ swagger-ui-init.js:1045
load (async)
(anonymous) @ swagger-ui-init.js:2
/docs/favicon-16x16.png:1 GET https://*/docs/favicon-16x16.png net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
/docs/favicon-32x32.png:1 GET https://*/docs/favicon-32x32.png net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

I'm using swagger-jsdoc to generate the schema from comments in the source code. I can fix the problem by commenting out apis, generating an empty schema, refreshing the swaager ui and then again uncommenting apis and generating the full schema again:

apis: [
  // './src/**/*.js'
]

apis: [
  './src/**/*.js'
]

After a while swagger stops working again and I have to repeat the trick from above to get things working again.

Versions:

"swagger-jsdoc": "^6.1.0",
"swagger-ui-express": "^4.1.6",

and node 16

In my staging environment where the code is first bundled and deployed I can't get the UI to work at all. I'm always getting a blank screen even though the OpenApi spec is loaded correctly from a json file generated using swagger-jsdoc during the build.

This is a problem for front end developers who need the docs as a reference.

[tamis-laan]

In order to make things more clear, here is what's happening illustrated visually:

[daniloab]

Is there an error in your console SwaggerUIBundle is not defined

[tamis-laan]

Yes there is:

BTW, looking at the source the schema definition is there, generated and loaded properly.

[daniloab]

Yes there is:

BTW, looking at the source the schema definition is there, generated and loaded properly.

You need to understand why this is happening

[tamis-laan]

Error originates from here:

For some reason swaggerUIBundle is not defined. I don't know why. Server side things look like they are working: Maybe swagger-ui-init.js is wrongly cached??

[tamis-laan]

Stuff is failing when looking at network requests:

[tamis-laan]

Curl also fails:

[tamis-laan]

Curl verbose, looks like a timeout: Something is taking to long swagger-ui end

[tamis-laan]

Can I turn on console logging for swagger-ui-express? Make it verbose?

[scottie1984]

There is no verbose logging mode for swagger-ui-express as it essentially relying of express middleware setup.

swagger-ui-bundle.js is served via express.static so the fact this isn't being served suggests you have something wrong with your node/express server set-up. So when you do app.use(swaggerUiExpress.serve) - you are essentially calling express.static pointing to the swagger-ui assets. It is important that you don't have any race conditions or any other routes that might interfere with these calls.

My suggestion would be to go back to a basic set up using the examples in the swagger-ui-express documentation, ensure that works and then work from there to gradually put in your set up until you identify the problem.

[tamis-laan]

@scottie1984 Thnx for the pointer, moving the swagger ui express route up fixes the problem:

app.use('/docs', swaggerUi.serve, swaggerUi.setup(schema))
app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(cookieParser())

One of these other middlewares is for some reason messing things up...