Full React Tutorial #19 - Handling Fetch Errors
Vložit
- čas přidán 10. 01. 2021
- 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
Not all heroes wear capes.Thanks Shaun for what u do for the community.
Because of these tutorials, I think you have made me love ReactJs
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 : )
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.
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!
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 !!!
The most understandable and concise video on Error Handling on CZcams
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 :)
You're welcome 🐱👤🐱👤🐱👤
You are the best coding teacher ever and by the way your modern Javascript Course is really Epic and is rocking
Thanks so much! 😃
Pleasure
My man, this tutorial has everything I ever wondered about!
Thanks a bunch!
Happy to help! :)
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
The best tutorial ever, thank you so much, Shaun!
you are the best teacher on youtube. Your explanation is so clean.
This is so helpful. Thank you for making these tutorials!
The explanation is really awesome!! Love it!!!
This tutorial is a godsend and you're an amazing teacher. I just keep hearing "error" as a DJ scratching noise XD
The best tutorial ever! I've got a ton of answers! Thanks soooooo much! I'm your follower forever!
I've never enjoyed an error handling tutorial until now 😉
Awesome as always. Super appreciate you!
Thank you for every thing.Love u SO much Shaun
Amazing, refreshing way of explaing by Net Ninja, keep up the good work. :)👌👌
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!
Very very easy and useful!!!
Great tutorial keep it up my friend!
Giving the best, always 🎊👍
thank you for making my dreams partly come true. I also love London.!!! rip grandma!!!
You are the best. Please keep up these contents.
Thank you! Very useful for me
I'm waiting for next video. Thank you so much
Thanks a lot, this is life saving.
It was already 3 years but it still do help 😘😘
Awesome please do more React.js projects.
Thank you so much for this series! I request you to make MERN series on youtube or MERN udemy course! We want that! Please!
yeap, that wuld be pretty great!
U are a legend thanks ! ♥
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.
waow what a leason
thanks shaun ♥♥♥
Really superb👌🏼👌🏼👌🏼
U should add finally and set pending there to false. It's good practice to add that block for any clean up
great video man
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!
i huess he wants to show it with more gymnastics so people know the possibilities
very good sir you are the best
Good as Always . Hi from India : )
God bless you! Thank for you work! 😍
Very welcome! Thanks for watching :)
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
One question when we use iterators and generators in programming and for what we use them?
I almost spend a month to learn React but I couldn't , By just watching your video in a day I learn a lot
Fookin champion as usual Shaun - is dealing with CORS issues beyond the scope of this series?
This is amazing
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?
how is the res value includes the type of Cors? Does this mean it allows other origin access control?
So clear , Bravo
Many thanks!
I follow your tutorials avidly. I do have a question though, shouldn’t “setIsPending(false)” be kept in “finally” instead of “then” and “catch”?
Yes, that would be a more appropriate way of doing it since you don't have to call it in two places.
Appreciated!
Thanks!
Thanks alot
Just briliant
Cool. My react ecommerce website is exactly facing same issue, thank you for your tips
You're welcome! Hope it helps :)
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.
Very precise
Thank you :)
thanks
very useful!!
Glad it was helpful! :)
You can set isPending in a finally block instead of repeating it in both then and catch.
Champion!
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 🙂.
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.
@@AndriusLauFullstack Thanks!
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 ?
Fam i love What your doing but the Ads are Killing me out here, still a massive fan of your work.
Just Amzing❤🔥
Thank you!
@@NetNinja Sir Big fan🫂
ty
This video was more of a js tutorial rather than react 😅 I'm gonna pause the list and review promises
For handling isPending, we can add finally block in Promise.then chain
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.
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?
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.
You saved my ass today
My fav
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
thank youuuu.
You're welcome 😊
dude i love ur accent
Here we go
i'm using async ,but cant make throw error running with 'try and catch'. Anyone can help?
Hello Shaun, great channel, lots of pedagogy here. Why don't you make a Patreon or Tipeee page ?
iam confused what we have to do while using axios on that code if(!res.ok)................can you reply me ninja the pro
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?
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.
@@codewithfarhad8594 Thanks, I got it now! I assumed that it skips all upcoming then-blocks by default.
you should axios
my control + C is not working to cancel out the data
auto subscribe hahaha
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.
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.
do u have a community in discord?
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);
}
}, []);
thankyou it helps me so much
Can anyone help? I am getting "Error is not a function".
C'est joli
The better option to manage states (loading, ready, error) is use numeric state
Can u give an example for this ? Im having trouble wrapping my head around this..
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.
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
Please do a dashboard project with latest react... With hooks not classes and redux and firebase..... Please please please
What happens to 4xx errors? Will it go to catch block?
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)
But why not async await?
Async await version stackblitz.com/edit/react-cbhrd7?file=src/Home.js
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
🤪
Ang galiingggggggggg mo magturoooooooo!
wew di man
1:23
I dont like this method
thanks