next.js `statusCode` on _error page are always 500 on client side

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64 Binaries: Node: 16.13.0 npm: 8.1.0 Yarn: 1.22.17 pnpm: N/A Relevant packages: next: 12.2.6-canary.0 eslint-config-next: 12.2.5 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

statusCode returned from server are ignored on client side render. The pageProps are ignored.

{
  "props": {
    "pageProps": {
      "statusCode": 403
    }
  },
  "page": "/_error",
  "query": {},
  "buildId": "lh4K5uJr9QedbEnta2Tm7",
  "isFallback": false,
  "err": {
    "name": "Internal Server Error.",
    "message": "500 - Internal Server Error.",
    "statusCode": 500
  },
  "gip": true,
  "scriptLoader": []
}

Expected Behavior

statusCode returned from server will be reused client side

Link to reproduction

https://github.com/Andrey-Bazhanov/next-error-status-code-bug

To Reproduce

run app
go to /
_error page will render 403 on server and then override with 500 on client side

Aug 15 '22 14:08 Andrey-Bazhanov

As workaround now I use:

/**
 * FIXME: check this later, maybe this behavior already fixed in Next.js (https://github.com/vercel/next.js/issues/39616)
 * for some reasons `statusCode` on client always 500 even if GIP return other code
 * so extract it from `__NEXT_DATA__` on the client
 */
const getStatusCode = (statusCodeFromProps: number) => {
  if (typeof window !== 'object') return statusCodeFromProps;

  try {
    return JSON.parse(document.getElementById('__NEXT_DATA__')?.textContent ?? '').props.pageProps
      .statusCode;
  } catch (e) {
    return statusCodeFromProps;
  }
};

const ErrorPage: NextPage<{ statusCode: number }> = props => {
  const statusCode = getStatusCode(props.statusCode);
  return <Error statusCode={statusCode} />;
};

Aug 15 '22 14:08 Andrey-Bazhanov

+1 have the same issue