rubenfonseca
commented
9 months ago Hi @filol can you show me the Network tab of the browser to see which URL is giving out that "Syntax error" error?
Closed filol closed 8 months ago
rubenfonseca
commented
9 months ago Hi @filol can you show me the Network tab of the browser to see which URL is giving out that "Syntax error" error?
filol
commented
9 months ago 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
rubenfonseca
commented
9 months ago Awesome! So in this case, /swagger.js and /swagger.css were serving cached versions of /swagger is that correct?
filol
commented
9 months ago @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
rubenfonseca
commented
9 months ago Interesting! Let's keep the issue open so we can add a note in the documentation. Thank you for this!
leandrodamascena
commented
8 months ago 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.
leandrodamascena
commented
8 months ago We've modified the PR and we'll inject CSS and JS inline into the SwaggerUI HTML file. This way we reduce the number of Lambda invocations, optimize code execution, and fix caching issues.
github-actions[bot]
commented
8 months ago This issue is now closed. Please be mindful that future comments are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.
github-actions[bot]
commented
8 months ago This is now released under 2.32.0 version!
Expected Behaviour
Having swagger UI displayed
Current Behaviour
Uncaught SyntaxError: Unexpected token '<' (at swagger.js:1:1) swagger:543 Uncaught ReferenceError: SwaggerUIBundle is not defined at swagger:543:7
Code snippet
Possible Solution
No response
Steps to Reproduce
Having a lambda behind a edge API Gateway with a proxy+ to the lambda
Powertools for AWS Lambda (Python) version
latest
AWS Lambda function runtime
3.11
Packaging format used
Lambda Layers, PyPi
Debugging logs