question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

502 error on exception in getServerSideProps

See original GitHub issue

Bug report

Describe the bug

When an exception is thrown in getServerSideProps in a serverless environment, the response is returned with a status code of 502 (Bad Gateway), which is definitely not what it is. In addition, custom or default 500 pages do not render in this case so the user may see a stack trace depending on how or where the app is deployed in production. This appears to be a Next 9.5+ issue, as it returned a 500 status code and a proper error page with the same code in 9.4.x.

To Reproduce

This will happen with any page that encounters an error in getServerSideProps. I’ve created a sample repo here with a “problem” page:

https://github.com/spencewood/throw-app

This simply includes:

import React from "react";

export default function Problem() {
  return (
    <>
      <h1>Problem!</h1>
    </>
  );
}

export const getServerSideProps = () => {
  throw new Error("error");
};

This page deployed to vercel: https://throw-app.vercel.app/problem

And curl:

❯ curl -I "https://throw-app.vercel.app/problem"
HTTP/2 502 
date: Fri, 07 Aug 2020 18:20:24 GMT
content-type: text/plain; charset=utf-8
x-nextjs-page: /problem
content-length: 68
server: Vercel
x-vercel-id: cle1::2cxmx-1596824424449-1d2c09ffce13
strict-transport-security: max-age=63072000; includeSubDomains; preload
cache-control: s-maxage=0

Expected behavior

Simply downgrading the above app to Next 9.4 will correctly render the default 500 page for Next and will return a 500 status code. This is what should be happening, as a 500 indicates simply “server error” and 502 indicates “invalid/no response”.

Screenshots

Below are screenshots from https://throw-app.vercel.app/problem with source here: https://github.com/spencewood/throw-app

Next 9.4

Screen Shot 2020-08-07 at 1 25 55 PM

Next 9.5

Screen Shot 2020-08-07 at 1 25 59 PM

Other Thoughts

Obviously you’re not going to throw an error like this, but any exceptions thrown while server-side generating dynamic data to be delivered to the app will cause the 502.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:40
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

8reactions
ErnestBrandicommented, Aug 17, 2020

Same problem here ! Plus, can’t see exception logs.

6reactions
akshayravikumarcommented, Jan 8, 2021

Running into the same issue - local production build displays my _errors.tsx but Vercel doesn’t. Are there any updates on this? Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why do I get a "502 Gateway" error from NextJs app hosted on ...
I am using Puppeteer in the API I expose through the server. I still was receiving 502 - Bad Gateway error because after...
Read more >
Advanced Features: Error Handling - Next.js
Error Handling. This documentation explains how you can handle development, server-side, and client-side errors. Handling Errors in Development.
Read more >
Why Do I Get A "502 Gateway" Error From Nextjs App Hosted ...
The 502 bad gateway error specifically means that server received an invalid response from an inbound server. Check out these common. An HTTP...
Read more >
502 Bad Gateway Error [Solved] - freeCodeCamp
Fix 1: Refresh the Page. Many server errors are only temporary, not permanent, and 502 bad gateway is no exception. If you're getting...
Read more >
error serializing `.csrftoken` returned from `getserversideprops`
Describe the bug. When an exception is thrown in getServerSideProps in a serverless environment, the response is returned with a status code of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found