Bug: Swagger UI doesn't load : Loading... with Uncaught SyntaxError about powertools-lambda-python HOT 8 OPEN

Hi @filol can you show me the Network tab of the browser to see which URL is giving out that "Syntax error" error?

from powertools-lambda-python.

Hi @rubenfonseca

There is :

But I found the problem ! I have inspected the files receives and each time it was the HTML content even for the js & css file. It was related to the API cache that was enable. Not sure you can do something about it. Just maybe display this info on the documentation

from powertools-lambda-python.

Awesome! So in this case, /swagger.js and /swagger.css were serving cached versions of /swagger is that correct?

from powertools-lambda-python.

@rubenfonseca Yes ! See the file selected in my 2nd screenshot. It's /swagger.js but the content is real content is HTML. That's why we get a syntax error, html code in javascript is not correct

from powertools-lambda-python.

Interesting! Let's keep the issue open so we can add a note in the documentation. Thank you for this!

from powertools-lambda-python.

Hey everyone! I was reading this issue to see if we can help on the Powertools side, but I don't think we can do anything. Just to clarify the issue and help us decide the next steps:

1 - Amazon API Gateway caches values based on the resource name and/or query string parameters. In this case, the cache will store the {/proxy+} resource. Just to simplify my explanation, I will assume that you are using Amazon API Gateway just to serve the Swagger file. In this case, Amazon API Gateway will cache the first request for {proxy+} which is /swagger (HTML). Subsequent requests for {/proxy+} will be /swagger.js and /swagger.json, and Amazon API Gateway will serve the HTML because the cache for the resource {/proxy+} is the HTML created by the first request /swagger.

2 - Amazon API Gateway does not depend on/use any header sent by downstream integration, in this case Lambda. The cache must be invalidated by the client, so we have nothing to do on the server side.
Reference: https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-caching.html

A client of your API can invalidate an existing cache entry and reload it from the integration endpoint for individual requests. The client must send a request that contains the Cache-Control: max-age=0 header. The client receives the response directly from the integration endpoint instead of the cache, provided that the client is authorized to do so. This replaces the existing cache entry with the new response, which is fetched from the integration endpoint.

3 - You can solve this by creating specific resources for each path, like this:

4 - I found another small problem when we served the CSS/JS from Powertools. In the files swagger-ui-bundle.min.js and swagger-ui.min.css we have the sourceMappingURL configuration at the end of them, which causes the browser to try to find the map debug files when someone opens the developer tools. This raises a 404 because we don't have this map file (we don't need it - we are not debugging the files) and 2 more executions in Lambda, which is not necessary.

So, as the next steps we have:

1 - Update our documentation to clarify the issue when using {proxy+} and cache in Amazon API Gateway.
2 - Remove the sourceMappingURL configuration.

I will work on both items and submit a PR.

Thanks again for opening this issue @filol and helping us make Powertools for AWS Lambda even better for our customers. Please let me know if you have any questions.

from powertools-lambda-python.