Learn React Error Boundaries In 7 Minutes

[@nwaguchima2280]

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.

[@mahdiabolghasemi189]

Error Boundary is asked frequently in interviews. Thanks so much!

[@AmbroseKTal]

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.

[@dave6012]

Just implemented error boundaries at my job. It was sorely lacking!

[@hari9321]

We just implemented this past week. Thanks kyle, I am bookmarking this for my team

[@MastAdmiLive]

Love from India

[@arihantjain8347]

+1

[@ashishkkrishna]

-1

[@MrTruth-rc2fr]

It's 0

[@arihantjain8347]

@@MrTruth-rc2fr no it isnt including Nilesh (2-1) = +1

[@utkarshsiddhpura2401]

Same to u nilesh bro

[@piyushaggarwal5207]

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

[@jtaylor8606]

That seems a better solution, thanks for the tip

[@BeeBeeEight]

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.

[@shantanukulkarni007]

Yes, nextjs have inbuilt error and loading for a page. But do they have for a component level? Something like this example?

[@YasinAkimura]

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

[@mattb8426]

Just built a new feature and saw this vid, implemented straight away. Very insightful, great video :)

[@petarkolev6928]

Simple and amazing explanation! Great video!

[@FrancescoOrsi]

This component is really really useful.. I will add in my projects ❤

[@abdurrahim-bi8kd]

love it brother. It really help me as a junior developer. Thanks a lot .

[@kuken72]

TIP: If you wanna catch async errors, you have to put in an event listener for "unhandledrejection" in componentDidMount in your error boundary.

[@ahmadshakik]

yes

[@shantanukulkarni007]

Very nicely explained. Thanks for sharing

[@cyril7104]

Most underrated topic and most important! 🎉

[@Wakpinside]

Give this man a medal! :D

[@guilhermeagostini9247]

Really good and straight forward content. Thanks!

[@mak271979]

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.

[@yazraf]

Amazing, spot on videos, its not just your programming skills that are amazing but your teaching skills are top notch 😉.

[@iakivpekarskyi1631]

Thank you for sharing and explaining it so explicitly !

[@MatthewWeiler1984]

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.

[@YasinAkimura]

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

[@MatthewWeiler1984]

@@YasinAkimura makes sense. I've just implemented error boundaries in my React app.

[@montaser-bugless]

Awesome Bro.. I Wait For This Video Couple Of Days

[@princesiachin279]

Briliant as always. I've watched your videos since 2019, and it helps me a lot till right now. Big appreciate, Thank you Kyle.

[@legends_assemble4938]

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

[@tim7703]

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.

[@alfaphoenix50]

Is there going to be guitar tutorial? april 1st is coming up 😬

[@dol4579]

Do a video with best practices on fetching multiple datas for multiples components or join multiples datas on react with stateless components. Thx

[@adamreed2000]

Was just dealing with errors on a project recently, might attempt a refactor.

[@theisoj]

Thanks Kyle! 👍

[@jmcclinton8]

Nice to see you Kyle.

[@edisonbedoyagarcia5416]

Thank you for the video, it was amazing

[@shilohgeorge1078]

Thanks a lot, i really appreciate your content

[@renatobmps]

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?

[@vigneshwarrv]

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...

[@Nicholas-qy5bu]

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.

[@vigneshwarrv]

@@Nicholas-qy5bu 👍

[@hmswrth]

man, you make things so simple that I actually made a solid career out of your youtube channel.

[@majklzumberi1761]

What if you want to "retry loading the failed component", how would you achieve that?

[@md.mohiulislam6516]

Love from Bangladesh 🇧🇩

[@siavashmosadegh1766]

thanks man, you were very helpful ;))

[@solnone]

Thanks for this tutorial.

[@alexanderst.7993]

Is it just me or are you in a really good mood Kyle :D

[@IAmLesleh]

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.

[@rajusharma823]

I guess it is for the easy use of developers for clients

[@mubasher0331]

it will cach all those errors that can crash your application.

[@IAmLesleh]

@@mubasher0331 nope, async errors won't get caught.

[@RalfarTV]

I wonder, can we create Reusable Error Boundary, Suspense, with dynamic lazy loading child in one component so we can reduce the code?

[@jacobsimerly5233]

How did you tab your down without having to cut and paste it?

[@jacobsimerly5233]

To anyone else curious, it's Alt + Down Arrow

[@evolutionxbox]

May you share the code for the “getDataFromType” function?

[@antu_saha]

This is very useful bro

[@greengurke]

How did you move the closing tag at 3:36 down? cool video!

[@abdulramonlasisi3385]

I think that's with the "alt + arrow buttons" keys

[@anujkumar760]

nicely explained

[@akshaykamble9193]

How to implement error boundary on component in react like remix does?

[@User-w8t4t]

Bro, can I use this component in next js?

[@StockWithSayee]

This can be used for class components but what about functional components

[@shatadal_das]

Hey Kyle, Can you please make a video on tests ?

[@mauro21523]

The best of bestests 😀

[@ajayprakash1167]

Can you provide much more exampl like logging the error

[@fullViewJay]

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?

[@TannerBarcelos]

Most likely personal preference. I think he’s said before he doesn’t like them? I might be wrong or thinking about someone else 😂

[@lemon_maho]

@@TannerBarcelos he did.

[@lemon_maho]

It's personal preference, I don't like using them either

[@fullViewJay]

@@TannerBarcelos I could honestly see why..it makes every so muddy with a bunch of them all over the place lol

[@fullViewJay]

@@lemon_maho I was always taught it was best practice but to me without them it makes the code that much more clean

[@SameerSingh-dn6kd]

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 !

[@andriishymkiv6364]

Is it advisable to use ErrorBoundary during the development stage?

[@thatsalot3577]

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.

[@GachiTscho]

but what about functional component...(i know there is npm lib)

[@stevenoketch6950]

Hey Kyle, what if the hasError changes, will the component remain in error state?

[@lemon_maho]

i guess u can test that out.

[@Yolo_Swagins]

Thank you

[@bernhardsmuts2265]

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?

[@abdulramonlasisi3385]

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

[@mphy]

very useful

[@shiekhpalace2401]

How do you get known about all these new things

[@channel6k]

Brother can u make video for interview preparation short video for JavaScript 🙏🙏 please

[@navaneethbuilds]

Can you please start doing tutorials for Vue js 👀

[@adityakumarsingh7648]

Did same thing but not workig not sure why

[@benoitgrasset]

far better than all these indians tutorials 😂

[@Photo-Ninja]

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.

[@omidsoleimani3817]

Great content, any plans for a react Formik tutorial?

[@ekansh03]

Nice

[@investneur8232]

useful

[@malachiconstant2756]

What separates a jr dev from a senior dev is how they handle errors… truer words have never been spoken

[@utkarshsiddhpura2401]

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 KZbin and most people don't know how to take udemy courses in free😎 pls, if u can make such tutorials make them.

[@WebDevSimplified]

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.

[@АлексейСтепанов-к9о]

Kyle, thank you for your videos. It is a chest with treasure for web technology leaners. From Russia with respect to you!!! 🇷🇺🇷🇺🇷🇺

[@thebikashweb]

Good video dude! Nice topic to cover, I think I will also make similar video in my channel.

[@markcarringer4567]

Sure would be nice to see the source code.

[@indigosay]

I need a code

[@EranDromy]

Seems like react-error-boundary can work on functional components - not just class components.

[@alertWolrd]

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 ...

[@bring_you_up]

Никто не пишет уже на классовых компонентах

[@avijitchanda7944]

Please make a complex error boundary

[@Almighty_Flat_Earth]

React makes web development unnecessarily complicated.

[@gamerversez5372]

First Comment

[@purplesalad]

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.

[@8koi245]

Next FTW

[@vladyslavvin]

You don’t need to use class components in 2023

[@abdulramonlasisi3385]

Is there another way of implementing an error boundary in the component level 🤔

[@SteveosCPU]

Wow. I was thinking of using React. Now I know not to. It's CRAP.

[@blueprint7000]

last

[@zoranProCode]

Does it catch async errors to?!

[@Nicholas-qy5bu]

Async error wont crash the UI, they will just terminate the async process. You need to use try catch to catch async error.