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

Подписаться 130 тыс.

Просмотров 22 тыс.

50% 1

👉 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

Опубликовано:

25 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@ByteGrad 27 дней назад

👉 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

@hydrognspa8753 Месяц назад

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

@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!

@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!

@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 👍

@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

2 месяца назад

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

@amershboul9107 17 дней назад

oh mannn!! you're the best!!

@joaobebber 3 месяца назад

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

@dawid_dahl 7 месяцев назад

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

@weichen3994 7 месяцев назад

exactly what i was looking for ty!

@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 🙏

@user-hg9qy6ny2p 5 месяцев назад

yet another informative and detailed solution. Thanks a bunch

@umernasir4217 5 месяцев назад

Great Content!

@kevinpruett 9 месяцев назад

Great work

@programmingwithnit5308 9 месяцев назад

Thank you so much 🎉❤

@user-wr5bs5yg4i 6 месяцев назад

Thanks a lot!

@santiskiffa День назад

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 :)

@kayodionizio2886 4 месяца назад

Useful!!!!

@manoval1000 6 месяцев назад

this is gold

@stephenpaul7499 4 месяца назад

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?

@tawsifhaque9360 6 месяцев назад

what vs code theme do you use?

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

@hongz1 2 месяца назад

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

@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!

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

@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.

@alexlykesas9733 Месяц назад

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

@user-uh6lv4xh2l 11 месяцев назад

good one

@ByteGrad 11 месяцев назад

Thanks

@codedusting 10 дней назад

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