CloudFront 502: The Lambda function returned invalid json: The json output is not parsable

Describe the bug Hello, guys.

The Default Lambda@Edge for the deployed distribution returns json that CloudFront does not understand.

To Reproduce When I visit https://xxxxxx.cloudfront.net/page/home I get this output:

502 ERROR
The request could not be satisfied.
The Lambda function returned invalid json: The json output is not parsable. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

It is weird that CloudFront Monitoring for that Lambda reports 100% success rate. If I go check the logs (in the edge region Lambda was executed for me), I can’t see any errors. There is some output related to the page render process, and at the end I get the default:

2020-07-29T12:32:09.058+03:00 | END RequestId: xxxx-yyyy-zzzz 2020-07-29T12:32:09.058+03:00 | REPORT RequestId: xxxx-yyyy-zzzz Duration: 7438.78 ms Billed Duration: 7450 ms Memory Size: 512 MB Max Memory Used: 254 MB

Additional context nextjs: 9.5.0 (also appears in 9.4.4) serverless-component: 1.15.0-alpha.5 (also appears in 1.16.0-alpha.0)

serverless.yml:

prj:
  component: "@sls-next/serverless-component@1.15.0-alpha.5"
  inputs:
    bucketName: prj-xxx-dev
    bucketRegion: eu-central-1
    useServerlessTraceTarget: true
    build:
      env:
        NEXT_PUBLIC_PORTAL: prj-xxx
        NEXT_PUBLIC_HIDE_EXTRA_OUTPUT: true
        NEXT_PUBLIC_STORYBLOK_DEVMODE: false

[dexter31]

+1 On this issue. I have an image lambda that is used for image optimization. Although I wasnt able to get the error response, I was able to isolate the cause.

All raw images(mine are webp by default) below 1MB seems to have no issues parsing, while anything above 1 MB gives out an invalid response.

Interestingly this is inline with a cloudfront limit on origin request evets as documented here - Restrictions on the Size of the Generated Response(https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-generating-http-responses-in-requests.html#lambda-generating-http-responses-errors)

[coltenkrauter]

I am having this issue as well. When my React app attempts to load a large image that is being optimized by NextJs/Image, I get a 502. It is using the imageLambda. When using a mobile device, a smaller optimized version of the same image is able to load just fine.

Requesting a large image in Google Chrome. URL: https://my-app-url.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmontana.dd08ffca.jpg&w=1920&q=100

@danielcondemarin, now that there are some more comments, do you have any other guidance on this issue?

I am wondering if there is any workaround. Perhaps a way to adjust the lambda limitations or use a non-EdgeLambda… I’m not really sure what the benefits of EdgeLambda are.

Related Stack Overflow

---

UPDATE In my case, I was able to work around the issue with NextJS/Image by unoptimizing my large image.