Full React Tutorial #19 - Handling Fetch Errors
Vložit
- čas přidán 29. 08. 2024
- 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/iam...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninj...
+ D3.js & Firebase - www.thenetninj...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstu...
🐱💻 🐱💻 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 !!!
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
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 🐱👤🐱👤🐱👤
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
you are the best teacher on youtube. Your explanation is so clean.
cleaning my concepts thanks to you. appreciation from here.
Great job! :) thanks for watching
This guy is the best Coach💯
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!
Amazing, refreshing way of explaing by Net Ninja, keep up the good work. :)👌👌
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, thank you so much, Shaun!
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.
This is so helpful. Thank you for making these tutorials!
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
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!
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
Thank you so much Shaun.
It was already 3 years but it still do help 😘😘
I've never enjoyed an error handling tutorial until now 😉
The best tutorial ever! I've got a ton of answers! Thanks soooooo much! I'm your follower forever!
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
thank you for making my dreams partly come true. I also love London.!!! rip grandma!!!
The explanation is really awesome!! Love it!!!
Thanks man. This is awesome.
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.
Thank you for every thing.Love u SO much Shaun
Awesome please do more React.js projects.
Awesome as always. Super appreciate you!
U should add finally and set pending there to false. It's good practice to add that block for any clean up
God bless you! Thank for you work! 😍
Very welcome! Thanks for watching :)
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.
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
🤪
This video was more of a js tutorial rather than react 😅 I'm gonna pause the list and review promises
So clear , Bravo
Many thanks!
For handling isPending, we can add finally block in Promise.then chain
You can set isPending in a finally block instead of repeating it in both then and catch.
I almost spend a month to learn React but I couldn't , By just watching your video in a day I learn a lot
You are the best. Please keep up these contents.
U are a legend thanks ! ♥
very good sir you are the best
Fookin champion as usual Shaun - is dealing with CORS issues beyond the scope of this series?
Thanks a lot, this is life saving.
Fam i love What your doing but the Ads are Killing me out here, still a massive fan of your work.
Cool. My react ecommerce website is exactly facing same issue, thank you for your tips
You're welcome! Hope it helps :)
Really superb👌🏼👌🏼👌🏼
Very very easy and useful!!!
great video man
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?
Very precise
Thank you :)
I'm waiting for next video. Thank you so much
waow what a leason
thanks shaun ♥♥♥
Giving the best, always 🎊👍
Great tutorial keep it up my friend!
This is amazing
Thank you! Very useful for me
you should axios
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!
Good as Always . Hi from India : )
Thanks alot
Appreciated!
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.
Just Amzing❤🔥
Thank you!
@@NetNinja Sir Big fan🫂
very useful!!
Glad it was helpful! :)
Champion!
Just briliant
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.
thanks
how is the res value includes the type of Cors? Does this mean it allows other origin access control?
Thanks!
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
Hello Shaun, great channel, lots of pedagogy here. Why don't you make a Patreon or Tipeee page ?
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..
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 ?
One question when we use iterators and generators in programming and for what we use them?
i'm using async ,but cant make throw error running with 'try and catch'. Anyone can help?
dude i love ur accent
My fav
thank youuuu.
You're welcome 😊
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.
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.
iam confused what we have to do while using axios on that code if(!res.ok)................can you reply me ninja the pro
You saved my ass today
ty
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
my control + C is not working to cancel out the data
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.
Here we go
Please do a dashboard project with latest react... With hooks not classes and redux and firebase..... Please please please
do u have a community in discord?
Can anyone help? I am getting "Error is not a function".
But why not async await?
Async await version stackblitz.com/edit/react-cbhrd7?file=src/Home.js
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)
Ang galiingggggggggg mo magturoooooooo!
wew di man
C'est joli