blog-with-comment issue mapping comments if undefined

[aumbriac]

Verify canary release

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

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.17.1
  npm: N/A
  Yarn: N/A
  pnpm: 8.6.12
Relevant Packages:
  next: 14.0.3
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which example does this report relate to?

blog-with-comment

What browser are you using? (if relevant)

Chrome/Opera GX

How are you deploying your application? (if relevant)

No response

Describe the Bug

The client application responds with Application error: a client-side exception has occurred (see the browser console for more information).
The bug happens when the comments array is undefined. This occurs locally as well as in production example:

Expected Behavior

When the user clicks on a blog post, the client application should not respond with Application error: a client-side exception has occurred (see the browser console for more information).

To Reproduce

Clicks on a blog post without comments or just go here: https://blog-with-comment.vercel.app/posts/prancing-pony

[icyJoseph]

Hi,

The problem starts here:

• https://github.com/vercel/next.js/blob/canary/examples/blog-with-comment/lib/fetchComment.ts#L29
• For completeness sake that code is invoked in this API handler, https://github.com/vercel/next.js/blob/canary/examples/blog-with-comment/pages/api/comment.ts

We are hitting that line in the API route. Notably that returns a 400 with JSON payload.

Then when we SWR is used here:

• https://github.com/vercel/next.js/blob/canary/examples/blog-with-comment/hooks/useComment.ts#L6

We hit the second issue. fetch doesn't throw for 4xx range requests. A library such as axios does throw/error out for non 2xx status codes (let's not think of 3xx for now).

So when the fetcher does:

const fetcher = (url) => fetch(url).then((res) => res.json());

It'll simply decode the error message with error 400 we sent from the API route, and then pass that SWR, which puts it in the data state.

So comments is no longer an Array, but an Object, and you can see that if you debug the application:

And we can confirm our assumptions by looking at the network tab, where we see a 400 Bad Request, from
https://blog-with-comment.vercel.app/api/comment?url=%2Fapi%2Fcomment

I'll make a PR to fix this, so that it throws when 400 comes in.

[github-actions]

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.