-
Notifications
You must be signed in to change notification settings - Fork 26.6k
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
blog-with-comment issue mapping comments if undefined
#61941
Comments
Hi, The problem starts here:
We are hitting that line in the API route. Notably that returns a 400 with JSON payload. Then when we SWR is used here: We hit the second issue. So when the 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 ![]() And we can confirm our assumptions by looking at the network tab, where we see a 400 Bad Request, from I'll make a PR to fix this, so that it throws when 400 comes in. |
Fixes #61941 example blog-with-comment. The root issue is that the SWR fetcher does not check the `ok` status of the response, and that way we end up putting the error message object into the SWR data. And then `.map` is invoked in the object. Since this is a learning kind of example, I think perhaps the presented change is just about enough to understand what's going on. Whether or not the people using the example want to gain access to the message from the server is up to them.
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. |
Verify canary release
Provide environment information
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
![image](https://private-user-images.githubusercontent.com/6768725/304112451-2b9d5856-3c8e-4dab-9008-f954797d81a9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUzOTQwNTMsIm5iZiI6MTcyNTM5Mzc1MywicGF0aCI6Ii82NzY4NzI1LzMwNDExMjQ1MS0yYjlkNTg1Ni0zYzhlLTRkYWItOTAwOC1mOTU0Nzk3ZDgxYTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDNUMjAwMjMzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTY3NTY5ODJmNTFmYTdmZjIwY2EyYzMzZTJhZjcyNDJjNWQ3ZjA4YWY0YWVjODFkNmQxOTE3YjBkNmNiZWE4NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.0OoG6BTnBUOUFXWCOGIkviMKQ1vzqBMlsNLYTsVptNc)
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
The text was updated successfully, but these errors were encountered: