Full React Tutorial #19 - Handling Fetch Errors

Подписаться 1,5 млн

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

50% 1

Hey gang, in this React tutorial we'll handle any errors from the fetch request we made earlier & output any erors in the template.
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/Complet...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

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

10 янв 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@unknownman1 3 года назад

Not all heroes wear capes.Thanks Shaun for what u do for the community.

@Dexter101x 3 года назад

Because of these tutorials, I think you have made me love ReactJs

@Kai-yu1km 2 года назад

Me too. I hated React and tried to get motivated with it many times by watching a 2,5 hour video and doing the tic-tac game and reading, but no. It felt clumsy... One Saturday night I gave React on more chance, watching the Ninja's upload image firebase video, because it looked interesting. It was only 1:20 long. So cool! : ) Net Ninja has already taught me so much! Big thanks Sir Ninja : )

@maskman4821 3 года назад

I have learned a lot about conditional rendering, this is very important topic and used a lot/quite often with dynamic rendering in daily development, but with server side render/nextjs we dont need conditional loading. thank you Shaun for this terrific tutorial !!!

@johnconnor9787 3 года назад

The most understandable and concise video on Error Handling on RU-vid

@juanda531 2 года назад

Man, it's incredible the way you just explain some hard topics in a very easy way. Definetly, you're one of the best coding tutors I've ever seen. Congrats mate.

@_KimAngell 9 дней назад

I second this. The way he anticipates everything you might wonder is really great too. And every video is so jam-packed with valuable content that it's easy to pay attention!

@leeoiou7295 3 года назад

you are the best teacher on youtube. Your explanation is so clean.

@dragonreborn2141 Год назад

My man, this tutorial has everything I ever wondered about! Thanks a bunch!

@NetNinja Год назад

Happy to help! :)

@thedvlpr 3 года назад

The best tutorial ever, thank you so much, Shaun!

@r34ct4 Год назад

This tutorial is a godsend and you're an amazing teacher. I just keep hearing "error" as a DJ scratching noise XD

@kristine.wakeup 18 дней назад

I learned a lot from the tutorial !!! This is basic, but everything you need to know to kick start a bigger project. Thanks Net Ninja

@haha78923 2 года назад

This is so helpful. Thank you for making these tutorials!

@nkpvg6805 3 года назад

You are the best coding teacher ever and by the way your modern Javascript Course is really Epic and is rocking

@NetNinja 3 года назад

Thanks so much! 😃

@nkpvg6805 3 года назад

Pleasure

@yunger7 3 года назад

Shh! I'm an undercover ninja. 🐱‍👤 I'm still watching your Firebase courses and will learn react next, I just came here to say thanks in advance :)

@NetNinja 3 года назад

You're welcome 🐱‍👤🐱‍👤🐱‍👤

@pranavdhamanage 3 года назад

The explanation is really awesome!! Love it!!!

@sfybskot 3 года назад

The best tutorial ever! I've got a ton of answers! Thanks soooooo much! I'm your follower forever!

@dannyman2200 3 года назад

I've never enjoyed an error handling tutorial until now 😉

@woofcode3383 2 года назад

Awesome as always. Super appreciate you!

@leon8dev 3 года назад

Thank you for every thing.Love u SO much Shaun

@jaisgeorge1166 15 дней назад

Amazing, refreshing way of explaing by Net Ninja, keep up the good work. :)👌👌

@nikolozmacharashvili1212 Год назад

thank you for making my dreams partly come true. I also love London.!!! rip grandma!!!

@donmikkodanm.olmillo8154 3 года назад

Hello @TheNetNinja , I really love your courses and thank you so much for providing free knowledge to all of us aspiring web developers 🎊🎉. I would like to ask if what's the difference between using the fetch API and axios? I'm currently using axios while following your tutorial and sometimes It's hard for me to follow especially this handling fetch error. Also I would like to suggest of a course of you guiding us on how to use axios pleeease? thank you!

@Ismail-hq8cq Год назад

The time I am writing this comment I am watching the Ad on this video just to help you. I appreciate you hard work trying to help us for free. Thank you so much.

@CjammWest 3 года назад

You are the best. Please keep up these contents.

@kennanfattah1468 3 года назад

Giving the best, always 🎊👍

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

It was already 3 years but it still do help 😘😘

@_pve 3 года назад

Great tutorial keep it up my friend!

@i_am_human_being5570 2 года назад

Very very easy and useful!!!

@hamidr8391 2 года назад

Thanks a lot, this is life saving.

@sertacekici3342 3 года назад

I'm waiting for next video. Thank you so much

@karinljunggren22 3 года назад

Thank you! Very useful for me

@ROHANPAGAR 2 года назад

I almost spend a month to learn React but I couldn't , By just watching your video in a day I learn a lot

@mayarjaba6731 Год назад

waow what a leason thanks shaun ♥♥♥

@igorr4682 3 года назад

U should add finally and set pending there to false. It's good practice to add that block for any clean up

@parthipankalayini8 3 года назад

Awesome please do more React.js projects.

@chtiouimoncer6092 Год назад

U are a legend thanks ! ♥

@marimuthur9456 2 года назад

Really superb👌🏼👌🏼👌🏼

@GiancarloCarccamo 2 года назад

great video man

@akashnegi913 3 года назад

Good as Always . Hi from India : )

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

This is amazing

@Lok1goD Год назад

God bless you! Thank for you work! 😍

@NetNinja Год назад

Very welcome! Thanks for watching :)

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

So clear , Bravo

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

Many thanks!

@kashifmehmood4399 2 года назад

very good sir you are the best

@ChristopherPhillipsDev Год назад

Since we always want to setIsLoading(false) after the fetch completes (whether success or failure), it's best to chain a .finally(() => setIsLoading(false)) to the end

@deonvisser2480 Год назад

Appreciated!

@hassanhafiz44 3 года назад

Thanks!

@vijaytembugade 3 года назад

Thank you so much for this series! I request you to make MERN series on youtube or MERN udemy course! We want that! Please!

@digiexploration530 3 года назад

yeap, that wuld be pretty great!

@GAJARI Год назад

Cool. My react ecommerce website is exactly facing same issue, thank you for your tips

@NetNinja Год назад

You're welcome! Hope it helps :)

@rohan1765 3 года назад

Thanks alot

@RandomGuy-jv4vd Год назад

Just briliant

@darshanakv4946 8 месяцев назад

very useful!!

@NetNinja 8 месяцев назад

Glad it was helpful! :)

@dev-290ch5 6 месяцев назад

Note that when Strict Mode is enabled, rendering occurs twice even though you specified empty array for useEffect dependency - hence you will see the error message being displayed twice. Maybe it happens for the new version of React.

@mohammadabdelrahman786 Год назад

This video was more of a js tutorial rather than react 😅 I'm gonna pause the list and review promises

@HamedQaderi 3 года назад

You can set isPending in a finally block instead of repeating it in both then and catch.

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

Very precise

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

Thank you :)

@thicctamil204 2 года назад

Fam i love What your doing but the Ads are Killing me out here, still a massive fan of your work.

@sammyg123456654565 2 года назад

Shaun, thanks for the great tutorial. Just out of curiosity, rather than using the state for removing the loading message when there is an error, could you instead do the following: { !error && isLoading && Loading... } I tested it and it worked, but want to know if that isn't a best practice? Thanks!

@clarckkim Год назад

i huess he wants to show it with more gymnastics so people know the possibilities

@dipstickjimmy789 3 года назад

Fookin champion as usual Shaun - is dealing with CORS issues beyond the scope of this series?

@craig-scott 2 года назад

Champion!

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

Just Amzing❤‍🔥

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

Thank you!

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

@@NetNinja Sir Big fan🫂

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

Great video!, btw a question, how can status be true (200) with cors error? @3:22, like it should throw an error due to cors right?

@ckatke 3 года назад

Here we go

@griimaze7049 3 года назад

for those who are using async like me, use 'try and catch' like this. useEffect(async () => { try{ const res = await fetch('localhost:8000/blogss'); if(!res.ok){ throw Error("could not fetch data for that resource"); } const data = await res.json(); setError(null); setBlogs(data); setIsPending(false); } catch(err){ setIsPending(false); setError(err.message); } }, []);

@indobikelovers7158 Год назад

thankyou it helps me so much

@zhakshylykkozhobekov8683 2 года назад

thanks

@ridl27 3 года назад

@aleksejvidic6897 3 года назад

One question when we use iterators and generators in programming and for what we use them?

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

For handling isPending, we can add finally block in Promise.then chain

@Lovatic1boy 3 года назад

dude i love ur accent

@nguyennam5056 2 года назад

thank youuuu.

@NetNinja 2 года назад

You're welcome 😊

@liewweijun6728 3 года назад

how is the res value includes the type of Cors? Does this mean it allows other origin access control?

@kundogb Год назад

You saved my ass today

@SaiKiran-xc2ge Год назад

My fav

@Levoxel 3 года назад

Hello Shaun, great channel, lots of pedagogy here. Why don't you make a Patreon or Tipeee page ?

@rickvian 2 года назад

you should axios

@siddhantgupta6719 3 года назад

I follow your tutorials avidly. I do have a question though, shouldn’t “setIsPending(false)” be kept in “finally” instead of “then” and “catch”?

@WorstDeveloper 3 года назад

Yes, that would be a more appropriate way of doing it since you don't have to call it in two places.

@louis_dev6981 3 года назад

npx json-server --watch data/db.json --port 8000 ^ for those of you who have been following the tutorial series and don't want to type out the command to start the json server

@mayankprakash9651 2 года назад

🤪

@chinmayghule8272 Год назад

If you're using async/await instead of promise chaining, note that fetch will not throw an error on a 404 response. A 404 response is considered a valid response so the code in the try block won't throw an error. You will have to manually check with an if statement, before you try to extract using the .json() method. This is how I did in my try block: *** const users = await fetch(URL); if(users.status !== 200) { throw Error('failed to fetch'); } usersData = await users.json(); *** I'm going to link the stackoverflow link for this problem by replying myself. YT seems to be deleting comments with links.

@jorgearraga 3 года назад

The better option to manage states (loading, ready, error) is use numeric state

@exodion4173 3 года назад

Can u give an example for this ? Im having trouble wrapping my head around this..

@tarikmujcic2966 Год назад

Why do I always have double console.logs in the console. When I log anything to the console that is in useEffect I have it logged 2 times in the console.

@moe3551 2 года назад

so the throw Error function automatically puts the error message we type in, inside the error hook we defined in the beginning ? if so why is this the case ?

@janvar6914 3 года назад

Hi, Shaun, I have a question/problem. At the very end of this lesson I wanted to know if it's working so I kept switching between correct and incorrect endpoints (blogs vs. blogssss) and I noticed that on just saving the file it showed both the error message and the fetched data at the same time, which is not okay. To be sure I copied your code from the repo and it behaved the same way, so I think I eliminated any misspellings/mistakes/typos/omissions in my code. I am a learner, help me out, sensei 🙂.

@AndriusLauFullstack 2 года назад

Yes, that's why you need to setError(null) in the second .then block, and setBlogs(null) in .catch block. Now rendering will display only one post or only an error message.

@faizansaleem9905 2 года назад

@@AndriusLauFullstack Thanks!

@asharma741 3 года назад

Hi Shaun I got a quick question there, at last, you use setError(null) again in then block but is there any need there because the state of error is already set to null, Can I just know what is the idea of setting state again to null?

@AndriusLauFullstack 2 года назад

If you do not refresh the page, but instead change URL to link with 404 status and then try again with the right URL, you will see that component renders, but it will have the error message. When refreshing, this doesn't appear.

@helpingselflearner4391 3 года назад

Please do a dashboard project with latest react... With hooks not classes and redux and firebase..... Please please please

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

At 1:26, you stopped the server, then you reloaded the page, and it appeared ( Loading..... )The error also appeared via Console, but the question is, how did it appear if you stopped the server? The page should not work in the first place because you stopped the server, and this is what happened to me

@akkaradechsrithongchai7766 Год назад

@lenardesguerra4548 3 года назад

Ang galiingggggggggg mo magturoooooooo!

@yema8319 3 года назад

wew di man

@syncr7433 2 года назад

do u have a community in discord?

@jcavenue 2 года назад

auto subscribe hahaha

@camarafasseli0 Год назад

C'est joli

@krishnaTiwari851 Год назад

iam confused what we have to do while using axios on that code if(!res.ok)................can you reply me ninja the pro

@indobikelovers7158 Год назад

i'm using async ,but cant make throw error running with 'try and catch'. Anyone can help?

@phantom7132 3 года назад

I'm a little bit confused. Why do you check if res.ok does not exist while pinging a wrong endpoint already results in an error that gets handled within the catch-block?

@codewithfarhad8594 3 года назад

when you throw Error in a then() block, it skips all upcoming then() blocks and goes directly to the catch block. that is why when pinging wrong endpoints, the code sees that the res.ok == false and then error is thrown which ultimately gets caught in the catch block and we see the error get render due to our setup of error state.

@phantom7132 3 года назад

@@codewithfarhad8594 Thanks, I got it now! I assumed that it skips all upcoming then-blocks by default.

@sharriceowens913 3 года назад

my control + C is not working to cancel out the data

@user-zp9yx4lw8k Год назад

Help, please. By some reason instead of server's response 200 I get 304. I got 200 just once , the first time the db loaded, I guess... I tried to fix it and even started the tut again. But it doesn't help. And it's crutial, as further on there will be error abortion and it always aborts ((( because catches this 304 response. Or I just can't figure it out... I understand that it's somehow connected to my cookies-settings, maybe. I would really appreciate if someone finds time to reply to me.

@AMANKUMAR-qg7pf 3 года назад

Can anyone help? I am getting "Error is not a function".

@4541047 3 года назад

But why not async await?

@miguelfereauromero1244 3 года назад

Async await version stackblitz.com/edit/react-cbhrd7?file=src/Home.js

@intensiveadvancedmath5281 Год назад

7:12 Error message doesn't pop up even not inser setError(null). Is it by default? Actually we don't have to put setError(null). Who knows, answer please.

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

Know, it is a bit late, so here is an example: When you sent a request to a server and it responded with a rejection, it would be saved in the state. And when you decided to send another request to the server and it responded without any errors, your error state would indicate the opposite

@demogyani2419 3 года назад

What happens to 4xx errors? Will it go to catch block?

@EnesKab 2 года назад

Yes it will. If you want to catch specific type of error (maybe to customize the error message) you can use response.status in your if statement. Like if (response.status !==200)