Great video! I stumbled across this video because I wanted to show messages to the client from my server actions. There is not much out there right now for how to handle situations like these, so thanks for sharing!
thank you! i was using throw new Error() from the server component and it worked locally, then broke as soon as I deployed it. This is a much better way of handling errors 👍
great video, love it ! am really struggling with specific field erros (using Zod for example 'hours cannot be zero'). vs more generic errors ('this client already exists in db'). how to return errors what to do on the client side and what on the server .. how to reset the errors . if there can ever be a video on that it would save me :)
Thanks for the video :) Is there a way to have a global error handler set up to handle all server action errors? I tried an ErrorBoundary in a component marked with "use client" but was unsuccessful.
For Client Side Validation, we get the FormData only during Submit (inside the action). What if we need to do the validation immediately while updating a text field (blur)?? Storing the form fields in the local component state becomes necessary right. Also other features like for pre-filling the form on load showing the fields below based on a dropdown selection needs the data to be stored on the local state like the usual react component right?. Or is that any other way for it?
Why we need return error from server action catch? Can we use try catch in clientAction handler, and do all the same, but in catch, not in result.error condition?
But simply returning errors would still give 200 status code, no? Wouldn't that make our endpoints awkward, returning OK status while containing errors? Is that something I should worry about?
What if your app has several languajes? you can't just get the message from the error because it will always be in english, or worse: you may be displaying weird errors to the client like "unexpected < in JSON" or the typical "whatever is not a function"
This whole react-server-component fails totally the moment it meets the real world. It's nothing but a bad DX with no improvements whatsoever. What exactly do we achieve with this pattern when the client-side JS is anyways being shipped the moment we do "use client"?
👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs
Thank God I found your channel, the content is pure gold.
Thank you so much for sharing your knowledge with the community!
Cheers mate! 🍻
Much appreciated!
This approach is mind blown. I didn't think about having the server actions in a sperate functions in the page. Great video! Saved my day!
Great video! I stumbled across this video because I wanted to show messages to the client from my server actions. There is not much out there right now for how to handle situations like these, so thanks for sharing!
thank you! i was using throw new Error() from the server component and it worked locally, then broke as soon as I deployed it. This is a much better way of handling errors 👍
thank you so so much for this, i was completly lost and thought I would have to use client components for absolutely everything. Thanks for this video
Came here from Brazil! You helped me too much, thanks a lot! 🎉
Love your teaching style! This was really helpful!
Love your tutorials. Using them alot while learning next 13. You deserve more subs!
Your content is bang on every time. Perfect pace and crystal clear! Thanks so much. This way is leagues better than the version ChatGPT suggested 🙏
Greatest explanation about error handling in React and Toasts! Thanks a lot!!
Thank you so much! Will most probably use this in my production app at work.
Like always the most comphrensive tutorial in the web. Tanks a lot
yet another informative and detailed solution. Thanks a bunch
Is there a way to use a global error middleware in server actions, similar to the approach used in Express or Hono?
Ok. I'll hit that subscribe button. You totally deserve it :')
Wow that really sucks, we need to be able to handle errors in catch block of server action
You can? In both places. To handle both serverside and clientside logic accordingly?
exactly what i was looking for ty!
great video, love it !
am really struggling with specific field erros (using Zod for example 'hours cannot be zero'). vs more generic errors ('this client already exists in db'). how to return errors what to do on the client side and what on the server .. how to reset the errors . if there can ever be a video on that it would save me :)
Thanks for the video :)
Is there a way to have a global error handler set up to handle all server action errors? I tried an ErrorBoundary in a component marked with "use client" but was unsuccessful.
React's useFormState hook is kind of a shorthand to do the same thing
True, I published this video before that hook came on the scene. Still, that hook has quite some boilerplate / confusing way of working IMHO
@@ByteGrad I see! I like your videos, keep it up!
Great Content!
Thank you so much 🎉❤
For Client Side Validation, we get the FormData only during Submit (inside the action). What if we need to do the validation immediately while updating a text field (blur)?? Storing the form fields in the local component state becomes necessary right. Also other features like for pre-filling the form on load showing the fields below based on a dropdown selection needs the data to be stored on the local state like the usual react component right?. Or is that any other way for it?
Why we need return error from server action catch? Can we use try catch in clientAction handler, and do all the same, but in catch, not in result.error condition?
Sir, error boundary (error.jsx) doesn't catch errors occuring in event handlers invoking server actions in client components ?
Great work
oh mannn!! you're the best!!
But simply returning errors would still give 200 status code, no? Wouldn't that make our endpoints awkward, returning OK status while containing errors? Is that something I should worry about?
What if your app has several languajes? you can't just get the message from the error because it will always be in english, or worse: you may be displaying weird errors to the client like "unexpected < in JSON" or the typical "whatever is not a function"
this is gold
I was wondering, Why not throw the error? and handle it with try catch?
thank you so much
Useful!!!!
How do I do this if I want to use the transition hook? I can't seem to get the response on client side from my server action.
Nevermind, I figured it out, I can get the error inside the startTransition callback.
Nextjs dev team needs to add special return command syntax so that there won’t be “consistent return” eslint error.
what vs code theme do you use?
This whole react-server-component fails totally the moment it meets the real world. It's nothing but a bad DX with no improvements whatsoever. What exactly do we achieve with this pattern when the client-side JS is anyways being shipped the moment we do "use client"?
The server action is not shipped. How does it fail?
good one
Thanks
Thanks a lot!