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

Рет қаралды 20,094

Күн бұрын

How to do proper error handling with these new Server Actions...
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

Пікірлер: 36

@ofwoodfalegnameria1107 3 күн бұрын

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

@dog4ik 8 ай бұрын

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

@nsshing 7 ай бұрын

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!

@naylord5 2 ай бұрын

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 2 ай бұрын

Much appreciated!

@investandcyclecheap4890 6 ай бұрын

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!

Ай бұрын

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

@editdev 9 ай бұрын

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 👍

@aurorasofie 9 ай бұрын

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

@alanwilliamduarte5617 8 ай бұрын

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

@dawid_dahl 5 ай бұрын

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

@joaobebber 2 ай бұрын

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

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

yet another informative and detailed solution. Thanks a bunch

@LeeWalpole 3 ай бұрын

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 6 ай бұрын

exactly what i was looking for ty!

@umernasir4217 4 ай бұрын

Great Content!

@kevinpruett 8 ай бұрын

Great work

@programmingwithnit5308 8 ай бұрын

Thank you so much 🎉❤

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

Thanks a lot!

@kayodionizio2886 3 ай бұрын

Useful!!!!

@manoval1000 5 ай бұрын

this is gold

@stephenpaul7499 2 ай бұрын

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.

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

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?

@vignesh_m_1995 2 күн бұрын

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?

@tawsifhaque9360 5 ай бұрын

what vs code theme do you use?

@hongz1 Ай бұрын

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

@Milotiiic 4 ай бұрын

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"