environment variable cannot be read intermittently in getServerSideProps

[hanwool95]

Link to the code that reproduces this issue

https://codesandbox.io/p/live/64ca5b47-160d-409a-8d03-591a34a12858

To Reproduce

1. Occurs in certain cases when accessing a page rendered through server-side rendering.
2. It works well in another preview environment of feature branches targeting the same branch. Works well even in a local development environment. Working well means that the environment variables are read as intended on the server side, the logic is executed, and then rendered.

Current vs. Expected behavior

In the preview environment, the environment variables are read properly within the getServerSideProps function, but in the production environment, the environment variables are not read properly within the getServerSideProps function intermittently.

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { cookie } = context.req.headers
  const token = getCookie(cookie, 'app_at')

  const headers: Record<string, string> = {
    'Content-Type': 'application/json',
  }

  if (token) headers['Authorization'] = `Bearer ${token}`
  try {
    const response = await fetch(`${process.env.API_URL}/api/route`, {
      method: 'GET',
      headers,
    })
    const status = response?.status
  
    if (status === 200) {
      const result = await response.json()
      const data = result.data
      if (data) {
        return {
          props: {
            data,
          },
        }
      }
      return {
        props: {
          data: null,
        },
      }
    } else {
      return { notFound: true }
    }
  } catch (e) {
    return {
      redirect: {
        destination: '/500',
      },
    }
  }
}

In this situation, the data is coming in as null.

return {
          props: {
            data,
            apiUrl: process.env.API_URL
            vercelEnv: process.env.VERCEL_ENV,
          },
        }

In the process of debugging the error, I sent process.env.API_URL down to props and logged it in console.log, but it was recorded as undefined. Additionally, I checked to see if VERCEL_ENV was displayed properly, and it was also displayed as undefined. (In the preview environment, it was clearly marked as “preview.”)

The strange thing is that if API_URL is undefined because the environment variable cannot be read, a fetch error occurs and it should go to 500, but it does not.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:53 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6020
Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 8.9.2
Relevant Packages:
  next: 13.5.6
  eslint-config-next: 13.5.6
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Pages Router

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

[Abhishek-90]

Hello @hanwool95 , since you are working in different environment and all seems to be working fine, my first instinct would check if the API_URL is defined properly in vercel production server. Also are you getting this error suddenly or are you getting this error from start?

[hanwool95]

Hello @hanwool95 , since you are working in different environment and all seems to be working fine, my first instinct would check if the API_URL is defined properly in vercel production server. Also are you getting this error suddenly or are you getting this error from start?

Hi @Abhishek-90,

The API_URL environment variable is correctly set to Production. However, even the VERCEL_ENV system environment variable from Vercel cannot be read from getServerSideProps in the Production environment. In the preview environment, both API_URL and VERCEL_ENV are read correctly.

This logic has been working well in Production for over a year. However, around 4 a.m. UTC on May 28, 2024, an issue occurred during deployment. None of the deployed content changed the server-side rendering logic.

Upon further investigation today, other pages using server-side rendering are also encountering errors and are currently being examined.

[hanwool95]

Our team eventually created a new vercel project and tested it by setting the same environment variables as the existing production, and there were no problems.
Therefore, the error has now been resolved by moving the production domain to a new project.

We still don't know what the exact cause is.