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 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
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.
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
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.
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
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.
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.
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.
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 RUclips 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.
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.
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.
wrapping the entire application in an error boundary does not make any sense. The whole application will grind to a halt if a subcomponent fails - when the user could have continued without it.
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 ...
![Lethal Company Music Video 🎵 "Follow The Orders" [VERSION A]](http://i.ytimg.com/vi/QeooZB4Z7RA/mqdefault.jpg)
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!
Error Boundary is asked frequently in interviews. Thanks so much!
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
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.
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
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
Just built a new feature and saw this vid, implemented straight away. Very insightful, great video :)
Was just dealing with errors on a project recently, might attempt a refactor.
love it brother. It really help me as a junior developer. Thanks a lot .
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 👍
This component is really really useful.. I will add in my projects ❤
Simple and amazing explanation! Great video!
Really good and straight forward content. Thanks!
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
Very nicely explained. Thanks for sharing
Most underrated topic and most important! 🎉
Amazing, spot on videos, its not just your programming skills that are amazing but your teaching skills are top notch 😉.
Do a video with best practices on fetching multiple datas for multiples components or join multiples datas on react with stateless components. Thx
Thank you for sharing and explaining it so explicitly !
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.
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.
Awesome Bro.. I Wait For This Video Couple Of Days
Give this man a medal! :D
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
nicely explained
Thanks a lot, i really appreciate your content
Is it just me or are you in a really good mood Kyle :D
Thanks Kyle! 👍
Love from Bangladesh 🇧🇩
Thanks for this tutorial.
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 !
Hey Kyle,
Can you please make a video on tests ?
Is there going to be guitar tutorial? april 1st is coming up 😬
thanks man, you were very helpful ;))
Briliant as always.
I've watched your videos since 2019, and it helps me a lot till right now.
Big appreciate, Thank you Kyle.
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.
Brother can u make video for interview preparation short video for JavaScript 🙏🙏 please
Nice to see you Kyle.
very useful
This is very useful bro
Thank you
Can you please start doing tutorials for Vue js 👀
The best of bestests 😀
Nice
man, you make things so simple that I actually made a solid career out of your youtube channel.
useful
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 RUclips 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.
Can you provide much more exampl like logging the error
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?
How did you move the closing tag at 3:36 down? cool video!
I think that's with the "alt + arrow buttons" keys
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
far better than all these indians tutorials 😂
I wonder, can we create Reusable Error Boundary, Suspense, with dynamic lazy loading child in one component so we can reduce the code?
Bro, can I use this component in next js?
What if you want to "retry loading the failed component", how would you achieve that?
May you share the code for the “getDataFromType” function?
How to implement error boundary on component in react like remix does?
Good video dude! Nice topic to cover, I think I will also make similar video in my channel.
How did you tab your down without having to cut and paste it?
To anyone else curious, it's Alt + Down Arrow
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.
This can be used for class components but what about functional components
Kyle, thank you for your videos. It is a chest with treasure for web technology leaners. From Russia with respect to you!!! 🇷🇺🇷🇺🇷🇺
Hey Kyle, what if the hasError changes, will the component remain in error state?
i guess u can test that out.
Great content, any plans for a react Formik tutorial?
How do you get known about all these new things
Seems like react-error-boundary can work on functional components - not just class components.
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
Sure would be nice to see the source code.
but what about functional component...(i know there is npm lib)
What separates a jr dev from a senior dev is how they handle errors… truer words have never been spoken
Did same thing but not workig not sure why
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.
Please make a complex error boundary
First Comment
I need a code
Никто не пишет уже на классовых компонентах
Next FTW
last
React makes web development unnecessarily complicated.
wrapping the entire application in an error boundary does not make any sense. The whole application will grind to a halt if a subcomponent fails - when the user could have continued without it.
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 ...
Wow. I was thinking of using React. Now I know not to. It's CRAP.
You don’t need to use class components in 2023
Is there another way of implementing an error boundary in the component level 🤔
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.