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

elsueno commented 5 months ago

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

ourmaninamsterdam commented 5 months ago

@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 commented 5 months ago

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

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

Layout with <User> client component https://github.com/elsueno/blitz-209-bug/blob/main/src/app/layout.tsx
User client component https://github.com/elsueno/blitz-209-bug/blob/main/src/app/components/User.tsx

elsueno commented 5 months ago

@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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

… 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 commented 3 months ago

@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 commented 2 months ago

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

blitz-js / blitz