This is lovely, thank you. Although if I am using functional components, I find it weird having to write a class components for error boundaries, and this doesn't catch async or handlers, I kinda think it is better to use the package react-error-boundaries since we can get to use the useErrorBoundary hook and still show our error.
I truly appreciate your lessons. There are several videos that duplicate your content, but the way you present these topics is far superior. Not just your demonstrations, but the way you speak, even the tone of your voice, really helps me to understand. It is a free-flowing delivery that is great to listen to, even as background noise at work.
I had to use Error boundary two days back. I ended up using `react-error-boundary` which was suggested if we did not want to use class based components in Beta React docs
It's nice to have an error boundary in react. It would be PERFECT if react had implemented a functional ErrorBoundary component. Some react-based frameworks have already implemented their own functional error boundaries so it's really weird that react itself doesn't have one.
Something like useErrorBoundary would be nice could be as simple as taking a fallback which takes a component function which will handle the error on mount and show the user some Informations but I don't see a problem adding a one time class component as a wrapper
A huge hearty thanks for the video... Have been following this channel for quite a while now and you have really made the entire web dev simplified... If u don't mind, can u create a tutorial on rxjs and it's operators... I have been trying to use it but am unable to bring out entire potential of that tool. It really goes well with react too. Thks
Do wrapping Error Boundary for an entire app is worth it ?? for an api call that fetches content for one component in app. Also we need to keep in mind that components unmount by this approach which means we might loose other active states of that mounted components. I think individual Error Boundaries would give better Experience. Great Content sir...
Localized and individual error boundaries are the best for a good UX, but a global Error Boundary can catch error which would not necessary comes from api calls. So it is more like a safety net, so you can report back the error to a reporting system and investigate the problem. A good example would be if you are migrating to typescript or a loosely typed application and investigate 'property of undefined' error which can crash the application.
Thank you so much for the quality and useful content! I have a question, is there any way to catch errors in the build-version of the app? I've been struggling with this task for three days now. The deadline is burning.
Thank you, that's very useful. Once an ErrorBoundary detects an error and updates its state to that on { hasError: true }, how can it be reset? Scenarios: If the error was caused by bad user input and your code allows the user to try again. If a sporadic error was thrown and may not occur again so trying to render the component again may be an option.
Just handle the error on the right place and update some context inside componentDidCatch which will rerender the bad component in it's reset state if you use keys they are pretty handy to let react now that they handle their own state
Hi Kayal, thanks for showing us how to use the React way of handling the error boundaries. Could you also please upload a video showing how to use the node package react-error-boundary. I have been trying to use that following exactly what they say on their documentation, but it is not working for me. I am using the error boundary over a react router. I am using react router 6.
Error boundaries will only catch errors during render. It will not catch any other errors, e.g. errors that happen in async code, or errors that happen in event handlers.
Great video! A small unrelated question. Is there a syntactical style reason you don't really use semi-colons to end your statements, or just personal preference?
I recommend using react query or something that wraps suspense in production, Because if I remember correctly suspense is not fully developed to be used as it is during prod.
Hey kyle bro ! Why u don't make videos for beginners also? Mostly of that basic thongs which are taught in premium courses. I'm saying this because its very hard to find such things on UA-cam and most people don't know how to take udemy courses in free😎 pls, if u can make such tutorials make them.
I have tons of videos on beginner topics and even have full courses that go from beginner to advanced on many topics (linked in the description of all my videos). You can use the search feature on my channel page or my playlists to find these videos.
If you have an ErrorBoundry on a parent (entire app) and then another ErrorBoundry on a child, will the child's ErrorBoundry display first and only if there are no ErrorBoundries on a certain child then does it render the parent ErrorBoundry?
Errors bubble up to the nearest parent error boundary. so it's depends on where the error occurs, if the error occurs at the child, the child error boundary fallback would be shown, but if it was the whole app, then the page error boundary fallback would be shown instead
Why did you pasted all the data from json file into the html file instead off import entire file to index.js for example and actually use the data you want from the file? In this example you are not using json file at all.
I am facing too many issues when I integrate api with fetch in react native , The problem is that i am getting the api response but the hard part is that set the data with useState, useeffect and many logical issues how to fix that ...
This is lovely, thank you. Although if I am using functional components, I find it weird having to write a class components for error boundaries, and this doesn't catch async or handlers, I kinda think it is better to use the package react-error-boundaries since we can get to use the useErrorBoundary hook and still show our error.
Just implemented error boundaries at my job. It was sorely lacking!
I truly appreciate your lessons. There are several videos that duplicate your content, but the way you present these topics is far superior. Not just your demonstrations, but the way you speak, even the tone of your voice, really helps me to understand. It is a free-flowing delivery that is great to listen to, even as background noise at work.
Error Boundary is asked frequently in interviews. Thanks so much!
We just implemented this past week. Thanks kyle, I am bookmarking this for my team
Love from India
+1
-1
It's 0
@@MrTruth-rc2fr no it isnt including Nilesh (2-1) = +1
Same to u nilesh bro
I had to use Error boundary two days back. I ended up using `react-error-boundary` which was suggested if we did not want to use class based components in Beta React docs
That seems a better solution, thanks for the tip
Really good and straight forward content. Thanks!
Just built a new feature and saw this vid, implemented straight away. Very insightful, great video :)
It's nice to have an error boundary in react. It would be PERFECT if react had implemented a functional ErrorBoundary component. Some react-based frameworks have already implemented their own functional error boundaries so it's really weird that react itself doesn't have one.
Yes, nextjs have inbuilt error and loading for a page. But do they have for a component level? Something like this example?
Something like useErrorBoundary would be nice could be as simple as taking a fallback which takes a component function which will handle the error on mount and show the user some Informations but I don't see a problem adding a one time class component as a wrapper
TIP: If you wanna catch async errors, you have to put in an event listener for "unhandledrejection" in componentDidMount in your error boundary.
yes
Very nicely explained. Thanks for sharing
Simple and amazing explanation! Great video!
love it brother. It really help me as a junior developer. Thanks a lot .
This component is really really useful.. I will add in my projects ❤
Was just dealing with errors on a project recently, might attempt a refactor.
A huge hearty thanks for the video... Have been following this channel for quite a while now and you have really made the entire web dev simplified...
If u don't mind, can u create a tutorial on rxjs and it's operators... I have been trying to use it but am unable to bring out entire potential of that tool. It really goes well with react too. Thks
Do wrapping Error Boundary for an entire app is worth it ?? for an api call that fetches content for one component in app.
Also we need to keep in mind that components unmount by this approach which means we might loose other active states of that mounted components. I think individual Error Boundaries would give better Experience.
Great Content sir...
Localized and individual error boundaries are the best for a good UX, but a global Error Boundary can catch error which would not necessary comes from api calls. So it is more like a safety net, so you can report back the error to a reporting system and investigate the problem. A good example would be if you are migrating to typescript or a loosely typed application and investigate 'property of undefined' error which can crash the application.
@@Nicholas-qy5bu 👍
Thank you so much for the quality and useful content! I have a question, is there any way to catch errors in the build-version of the app? I've been struggling with this task for three days now. The deadline is burning.
Do a video with best practices on fetching multiple datas for multiples components or join multiples datas on react with stateless components. Thx
Amazing, spot on videos, its not just your programming skills that are amazing but your teaching skills are top notch 😉.
Thank you for sharing and explaining it so explicitly !
Awesome Bro.. I Wait For This Video Couple Of Days
Give this man a medal! :D
Is there going to be guitar tutorial? april 1st is coming up 😬
Most underrated topic and most important! 🎉
Love from Bangladesh 🇧🇩
Thank you, that's very useful.
Once an ErrorBoundary detects an error and updates its state to that on { hasError: true }, how can it be reset?
Scenarios:
If the error was caused by bad user input and your code allows the user to try again.
If a sporadic error was thrown and may not occur again so trying to render the component again may be an option.
Just handle the error on the right place and update some context inside componentDidCatch which will rerender the bad component in it's reset state if you use keys they are pretty handy to let react now that they handle their own state
@@YasinAkimura makes sense.
I've just implemented error boundaries in my React app.
Hi Kayal, thanks for showing us how to use the React way of handling the error boundaries. Could you also please upload a video showing how to use the node package react-error-boundary. I have been trying to use that following exactly what they say on their documentation, but it is not working for me. I am using the error boundary over a react router. I am using react router 6.
Thank you for the video, it was amazing
Error boundaries will only catch errors during render. It will not catch any other errors, e.g. errors that happen in async code, or errors that happen in event handlers.
I guess it is for the easy use of developers for clients
it will cach all those errors that can crash your application.
@@mubasher0331 nope, async errors won't get caught.
Briliant as always.
I've watched your videos since 2019, and it helps me a lot till right now.
Big appreciate, Thank you Kyle.
nicely explained
Thanks a lot, i really appreciate your content
Thanks for this tutorial.
thanks man, you were very helpful ;))
This is very useful bro
Thanks Kyle! 👍
Nice to see you Kyle.
Hey Kyle,
Can you please make a video on tests ?
Can you make a video on how to make ripple effect (like Google's) in react, if not a whole dedicated video than please make a short on that !
Is it just me or are you in a really good mood Kyle :D
man, you make things so simple that I actually made a solid career out of your youtube channel.
Brother can u make video for interview preparation short video for JavaScript 🙏🙏 please
Great video! A small unrelated question. Is there a syntactical style reason you don't really use semi-colons to end your statements, or just personal preference?
Most likely personal preference. I think he’s said before he doesn’t like them? I might be wrong or thinking about someone else 😂
@@TannerBarcelos he did.
It's personal preference, I don't like using them either
@@TannerBarcelos I could honestly see why..it makes every so muddy with a bunch of them all over the place lol
@@lemon_maho I was always taught it was best practice but to me without them it makes the code that much more clean
very useful
Great content, any plans for a react Formik tutorial?
Can you please start doing tutorials for Vue js 👀
Thank you
How did you move the closing tag at 3:36 down? cool video!
I think that's with the "alt + arrow buttons" keys
I wonder, can we create Reusable Error Boundary, Suspense, with dynamic lazy loading child in one component so we can reduce the code?
This can be used for class components but what about functional components
The best of bestests 😀
Can you provide much more exampl like logging the error
Is it advisable to use ErrorBoundary during the development stage?
I recommend using react query or something that wraps suspense in production,
Because if I remember correctly suspense is not fully developed to be used as it is during prod.
Is it work if my error boundary is a function component with a try catch that try to render the children component and catch renders fallback?
Bro, can I use this component in next js?
Hey kyle bro ! Why u don't make videos for beginners also? Mostly of that basic thongs which are taught in premium courses. I'm saying this because its very hard to find such things on UA-cam and most people don't know how to take udemy courses in free😎 pls, if u can make such tutorials make them.
I have tons of videos on beginner topics and even have full courses that go from beginner to advanced on many topics (linked in the description of all my videos). You can use the search feature on my channel page or my playlists to find these videos.
May you share the code for the “getDataFromType” function?
Nice
useful
How did you tab your down without having to cut and paste it?
To anyone else curious, it's Alt + Down Arrow
Hey Kyle, what if the hasError changes, will the component remain in error state?
i guess u can test that out.
If you have an ErrorBoundry on a parent (entire app) and then another ErrorBoundry on a child, will the child's ErrorBoundry display first and only if there are no ErrorBoundries on a certain child then does it render the parent ErrorBoundry?
Errors bubble up to the nearest parent error boundary. so it's depends on where the error occurs, if the error occurs at the child, the child error boundary fallback would be shown, but if it was the whole app, then the page error boundary fallback would be shown instead
Good video dude! Nice topic to cover, I think I will also make similar video in my channel.
Seems like react-error-boundary can work on functional components - not just class components.
How to implement error boundary on component in react like remix does?
but what about functional component...(i know there is npm lib)
How do you get known about all these new things
far better than all these indians tutorials 😂
What separates a jr dev from a senior dev is how they handle errors… truer words have never been spoken
Why did you pasted all the data from json file into the html file instead off import entire file to index.js for example and actually use the data you want from the file? In this example you are not using json file at all.
Sure would be nice to see the source code.
Kyle, thank you for your videos. It is a chest with treasure for web technology leaners. From Russia with respect to you!!! 🇷🇺🇷🇺🇷🇺
Did same thing but not workig not sure why
Please make a complex error boundary
I am facing too many issues when I integrate api with fetch in react native , The problem is that i am getting the api response but the hard part is that set the data with useState, useeffect and many logical issues how to fix that ...
I need a code
Никто не пишет уже на классовых компонентах
React makes web development unnecessarily complicated.
Next FTW
First Comment
You don’t need to use class components in 2023
Is there another way of implementing an error boundary in the component level 🤔
last
Wow. I was thinking of using React. Now I know not to. It's CRAP.
Does it catch async errors to?!
Async error wont crash the UI, they will just terminate the async process. You need to use try catch to catch async error.