Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Undesirable custom error page behaviour (output + re-fetching data client-side) #47978

Closed
1 task done
tills13 opened this issue Apr 5, 2023 · 5 comments · Fixed by #51377
Closed
1 task done

Undesirable custom error page behaviour (output + re-fetching data client-side) #47978

tills13 opened this issue Apr 5, 2023 · 5 comments · Fixed by #51377
Labels
bug Issue was opened via the bug report template. locked Pages Router Related to Pages Router.

Comments

@tills13
Copy link
Contributor

tills13 commented Apr 5, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 16.20.0
      npm: 8.19.4
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.30
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Data fetching (gS(S)P, getInitialProps)

Link to the code that reproduces this issue

https://github.com/tills13/nextjs-error-behaviour-reproduction

To Reproduce

  1. pull repo
  2. configure node / npm (I have provided a .nvmrc)
  3. run NODE_ENV=production npx next build && npx next start
  4. navigate to /
  5. view HTML flashing, console output

Describe the Bug

  1. undesirable console output in production

image

  1. error page re-runs getIntialProps client-side on the initial render resulting in a mismatch between server HTML and client HTML. This behaviour is different from other pages. Additionally, the err received by gIP client-side is different from the error received server-side. I recognize that it cannot be the same instance / class / whatever due to it needing to be serialized. This is more of a nit than anything as the desirable solution would be to just not re-run gIP client-side (see Expected Behaviour)
    Re-running gIP client-side also means that long running getInitialProps prevents JavaScript from running client-side until getInitialProps resolves. I have left some commented code in _error to demonstrate this.

Expected Behavior

  1. no output in the console. If I need console output to instruct users in production, I will do it myself.
  2. ideally the error page would not re-run getIntialProps client-side for a server-side error. I'm not too upset about this as our app gIP is fast, but it can result in the server HTML flashing before the client HTML settles.

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

next start

@tills13 tills13 added the bug Issue was opened via the bug report template. label Apr 5, 2023
@github-actions github-actions bot added the Pages Router Related to Pages Router. label Apr 5, 2023
@TasukuUno
Copy link
Contributor

Hi, thank you for the issue. I've faced the same problem...
In my case, it does not occur up to 12.2.1-canary.3, but it does occur from 12.2.1-canary.4 onwards.
Is there a workaround for this issue at the moment?

@tills13
Copy link
Contributor Author

tills13 commented Jun 19, 2023

@TasukuUno you could check out the attached PR for a solution.

@tills13
Copy link
Contributor Author

tills13 commented Jun 19, 2023

Ah, sorry, just noticed 12.x. The PR is for 13. I'm not sure how much that file has changed but you might be able to apply the same fix on 12.

@TasukuUno
Copy link
Contributor

@tills13 Thank you for your response!
What I want to know is whether end-users like me can do something to avoid this behavior in the latest version. Is our only option to wait for your PR to be merged? As far as I can see, there are no workarounds...

ijjk added a commit that referenced this issue Feb 8, 2024
Fixes: #47978

When an error occurs in getInitialProps, the error page's
getInitialProps is run server-side and returned in `__NEXT_DATA__`.
Following, there's no need to re-run `getInitialProps` client-side on
the hydrate pass.

---------

Co-authored-by: JJ Kasper <jj@jjsweb.site>
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 22, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked Pages Router Related to Pages Router.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants