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.

Sign up for GitHub

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

Jump to bottom

When I use a client component in root layout the server returns a 500 error #4339

Closed
elsueno opened this issue May 15, 2024 · 10 comments
Closed

When I use a client component in root layout the server returns a 500 error #4339

elsueno opened this issue May 15, 2024 · 10 comments
Labels
kind/bug Something isn't working status/done

Comments

@elsueno
Copy link

elsueno commented May 15, 2024 •
edited
Loading

What is the problem?

When I use a client component in root layout the server returns a 500 error but everything seems to be working properly.
So just the response status seems to be wrong.

Paste all your error logs here:

GET http://127.0.0.1:3000/ 500 (Internal Server Error)

Paste all relevant code snippets here:

See below

What are detailed steps to reproduce this?

Checkout repo that demonstrates the bug and start server

git clone https://github.com/elsueno/blitz-209-bug.git
cd blitz-209-bug
npm install
npx blitz@2.0.9 dev

Now open http://localhost:3000 in your browser - everything seems to be working properly but this error is logged in the browser console
GET http://127.0.0.1:3000/ 500 (Internal Server Error)

Run blitz -v and paste the output here:

Output of "npx blitz@2.0.9 -v"

Blitz version: 2.0.9 (local)
Linux 5.19 | linux-x64 | Node: v21.0.0


 Package manager: npm

  System:
    OS: Linux 5.19 Pop!_OS 22.04 LTS
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Memory: 4.16 GB / 14.86 GB
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 21.0.0 - ~/.nvm/versions/node/v21.0.0/bin/node
    Yarn: 1.22.19 - ~/.nvs/node/18.10.0/x64/bin/yarn
    npm: 10.2.0 - ~/.nvm/versions/node/v21.0.0/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.9 => 2.0.9 
    @blitzjs/next: 2.0.9 => 2.0.9 
    @blitzjs/rpc: 2.0.9 => 2.0.9 
    @prisma/client: 5.4.2 => 5.4.2 
    blitz: 2.0.9 => 2.0.9 
    next: 14.1.4 => 14.1.4 
    prisma: 5.4.2 => 5.4.2 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.8.4 => 4.9.5

Please include below any other applicable logs and screenshots that show your problem:

No response
@elsueno elsueno added kind/bug Something isn't working status/triage labels May 15, 2024
@ourmaninamsterdam
Copy link

@elsueno I installed your repo locally and it ran fine for me. Do the error logs in the terminal give any hints? I'm not sure what the default logging level Blitz sets, but perhaps overriding it in blitz-server.ts: BlitzLogger({ minLevel: 1 }) may yield more information.

@tordans
Copy link
Contributor

tordans commented May 22, 2024 •
edited
Loading

I can confirm the error based on the demo app https://github.com/elsueno/blitz-209-bug

image image image

The error is only visible in the browser, not the terminal.

@elsueno
Copy link
Author

elsueno commented May 22, 2024

@elsueno I installed your repo locally and it ran fine for me. Do the error logs in the terminal give any hints? I'm not sure what the default logging level Blitz sets, but perhaps overriding it in blitz-server.ts: BlitzLogger({ minLevel: 1 }) may yield more information.

The error is logged in the browser console. I've updated the ticket to make this more clear.

@tordans
Copy link
Contributor

tordans commented Aug 6, 2024

@siddhsuresh we noticed today that Meta's social sharing debugger seems to think our page returns a error 500 which we thing should be due to this error.

Do you have an idea what is going on? (There is a test case for this at https://github.com/elsueno/blitz-209-bug)

Testing https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fstaging.radverkehrsatlas.de%2F&locale=de_DE

And looking at this, testing with httpie also shows the error 500:

% http https://staging.radverkehrsatlas.de/
HTTP/1.1 500 Internal Server Error
Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Tue, 06 Aug 2024 13:31:39 GMT
Transfer-Encoding: chunked
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Accept-Encoding
X-Powered-By: Next.js

<!DOCTYPE html><html id="__next_error__"><head><meta…

The page does, however, load like expected and it seems not to be slower.

@siddhsuresh
Copy link
Member

@tordans yeah I think I can replicate this. Will get a fix in as soon as I figure out the reason.

The page initially loads with the next_error and soon hydrates with the working html. I am assuming this a suspense or hydration error we have missed handling.

@siddhsuresh
Copy link
Member

hey @tordans after a discussion, it was concluded that this is expected behaviour in order to get suspense working server side in next.js, so you can just ignore this as expected.

@tordans
Copy link
Contributor

tordans commented Aug 9, 2024

… so you can just ignore this as expected.

@siddhsuresh thanks for the update. I would happily ignore it, but the fact that Social Sharing does not seem to work with this I consider it a real issue.

Do you have hints into what we need to change in our app in order to work around this issue?

@siddhsuresh
Copy link
Member

siddhsuresh commented Aug 9, 2024 •
edited
Loading

@tordans imo the easiest way to work around this, would be to turn of suspense of blitz-rpc and handle the loading and error states imperatively.

does that work for you?

@eduhdev12
Copy link

@tordans I managed to fix this issue by wrapping the client components from the layout inside a suspense after <BlitzProvider>

@github-project-automation github-project-automation bot moved this to Done in Toolkit Aug 29, 2024
tordans added a commit to FixMyBerlin/trassenscout that referenced this issue Oct 14, 2024
@tordans
Blitz: Add Suspense wrapper to resolve initial error 500
84b6bb6 
Thanks blitz-js/blitz#4339 (comment)
tordans added a commit to FixMyBerlin/atlas-app that referenced this issue Oct 16, 2024
@tordans
Blitz: Add Suspense wrapper to resolve initial error 500
12bb1e6 
Thanks blitz-js/blitz#4339 (comment)
@tordans
Copy link
Contributor

tordans commented Nov 13, 2024 •
edited
Loading

@eduhdev12 thanks that resolved the issue for us.

Tested in LinkedIn- and Facebook-Social Sharing Debugger Tools

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
kind/bug Something isn't working status/done
Projects
Toolkit
Status: Done
Milestone
No milestone
Development

No branches or pull requests
6 participants
@tordans @ourmaninamsterdam @elsueno @eduhdev12 @blitzjs-bot @siddhsuresh