Error Handling in Server Actions Next.js (Incl. Toasts!)

Рет қаралды 21,908

Күн бұрын

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Server Action example
1:10 Try Catch
1:58 Client Action
3:22 Refactor to client component
4:44 Show error to user
5:30 Toasts (react-hot-toast)
7:01 Errors with useState
7:45 Get error message
#webdevelopment #programming #coding

Пікірлер: 40

@ByteGrad 21 күн бұрын

👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs

@nsshing 8 ай бұрын

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!

@dog4ik 9 ай бұрын

Wow that really sucks, we need to be able to handle errors in catch block of server action

@investandcyclecheap4890 7 ай бұрын

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!

2 ай бұрын

Greatest explanation about error handling in React and Toasts! Thanks a lot!!

@naylord5 3 ай бұрын

Thank God I found your channel, the content is pure gold. Thank you so much for sharing your knowledge with the community! Cheers mate! 🍻

@ByteGrad 3 ай бұрын

Much appreciated!

@alanwilliamduarte5617 9 ай бұрын

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

@aurorasofie 10 ай бұрын

Love your tutorials. Using them alot while learning next 13. You deserve more subs!

@editdev 10 ай бұрын

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 👍

@joaobebber 3 ай бұрын

Came here from Brazil! You helped me too much, thanks a lot! 🎉

@hydrognspa8753 26 күн бұрын

Ok. I'll hit that subscribe button. You totally deserve it :')

@dawid_dahl 6 ай бұрын

Thank you so much! Will most probably use this in my production app at work.

@ofwoodfalegnameria1107 Ай бұрын

Like always the most comphrensive tutorial in the web. Tanks a lot

@LeeWalpole 4 ай бұрын

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 🙏

@weichen3994 7 ай бұрын

exactly what i was looking for ty!

@user-hg9qy6ny2p 5 ай бұрын

yet another informative and detailed solution. Thanks a bunch

@programmingwithnit5308 8 ай бұрын

Thank you so much 🎉❤

@user-wr5bs5yg4i 6 ай бұрын

Thanks a lot!

@kevinpruett 9 ай бұрын

Great work

@umernasir4217 5 ай бұрын

Great Content!

@kayodionizio2886 4 ай бұрын

Useful!!!!

@amershboul9107 11 күн бұрын

oh mannn!! you're the best!!

@manoval1000 6 ай бұрын

this is gold

@stephenpaul7499 3 ай бұрын

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.

@vignesh_m_1995 Ай бұрын

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?

@user-rj1fv8hk3k 3 ай бұрын

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?

@tawsifhaque9360 6 ай бұрын

what vs code theme do you use?

@liu-river 10 ай бұрын

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.

@liu-river 10 ай бұрын

Nevermind, I figured it out, I can get the error inside the startTransition callback.

@user-uh6lv4xh2l 10 ай бұрын

good one

@ByteGrad 10 ай бұрын

Thanks

@Milotiiic 5 ай бұрын

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"

@alexlykesas9733 Ай бұрын

I was wondering, Why not throw the error? and handle it with try catch?

@codinginflow 6 ай бұрын

React's useFormState hook is kind of a shorthand to do the same thing

@ByteGrad 6 ай бұрын

True, I published this video before that hook came on the scene. Still, that hook has quite some boilerplate / confusing way of working IMHO

@codinginflow 6 ай бұрын

@@ByteGrad I see! I like your videos, keep it up!

@hongz1 2 ай бұрын

Nextjs dev team needs to add special return command syntax so that there won’t be “consistent return” eslint error.

@codedusting 4 күн бұрын

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"?