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

Scripts in head of layout.tsx are not run when underlying page.tsx throws a server error. #63980

Closed
HofmannZ opened this issue Apr 2, 2024 · 3 comments
Labels
bug Issue was opened via the bug report template. locked

Comments

@HofmannZ
Copy link

HofmannZ commented Apr 2, 2024

Link to the code that reproduces this issue

https://github.com/HofmannZ/reproduction-app

To Reproduce

  1. Clone the reproduction issue
  2. Build the app: pnpm build
  3. Start the app: pnpm start
  4. Go to localhost:3000/page-with-error

Current vs. Expected behavior

Current Situation: I only see the error in the console.

Expected Behavior: I would expect to see logs saying I am a log and I am another log from the layout, even in the presence of an error on the page.

When you navigate to localhost:3000/, the logs do appear as this page does not trigger an error.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: N/A
  pnpm: 8.15.6
Relevant Packages:
  next: 14.1.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

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

App Router

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

next start (local)

Additional context

No response

@lubieowoce
Copy link
Member

lubieowoce commented Apr 15, 2024

I believe that what you're seeing is caused by a React behavior, not anything Next.js-specific:
https://github.com/reactjs/rfcs/blob/ba9bd5744cb922184ec9390515910cd104a30c6e/text/0215-server-errors-in-react-18.md
If an error occurs on the server, react will skip SSR up to the nearest suspense boundary, and retry rendering on the client. but rendering a <script> doesn't work there like it does in SSR (and, i believe, neither does <Script strategy="beforeInteractive">) -- it will get inserted, but not actually run, which is what we're seeing in your case.

This can be fixed by adding a loading.tsx alongside the page that is erroring, which will stop the error from "bubbling up" above the layout.

See also #62228 (comment) about error boundaries not being SSRed -- it's a similar issue, because internally, notFound throws an error that gets caught by a boundary.

@huozhi
Copy link
Member

huozhi commented Apr 22, 2024

Close per #63980 (comment)

@huozhi huozhi closed this as completed Apr 22, 2024
Copy link
Contributor

github-actions bot commented May 7, 2024

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 added the locked label May 7, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 7, 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
Projects
None yet
Development

No branches or pull requests

3 participants