ReactJS Tutorial - 32 - Error Boundary

[@toannew]

4:00 code for boundary error 6:45 why the error boundary important? 9:18: catthe the error of an eventhandler 10:45 summary

[@thebuildguy7]

A really clear and concise explanation of the subject!

[@adnantariq3346]

Beautiful, just beautiful. My tip my hat to you. You’re young, and your brilliant. I’ve learnt a lot from you, and I hope you go places. Regards

[@Vahidaam]

Simple explanation always better to understand the basic concept of some advanced features like this and you did it great. Thank you so much :)

[@x..darkfate..x]

You Explain this topic in a very clear and easy manner

[@SereneBibleScriptures]

this is beyond decent understanding. thanks!

[@abdous-i8s]

thanks for explaining that in dev mode, the error will still be shown. this really got me stuck

[@Heithwald]

at about 7:00 + you were tallking about: "what if there were thousands of items on an E-Com website". I guess, it is a good idea to pass an array to a HOC, which will wrap each item with an Error Boundary. just came to my mind

[@saumyasundaram2768]

yeah it can be an optimal solution

[@thefreemonk6938]

Genius

[@curiously-cinnamon]

I am not getting the errors displayed in the UI like in the video at 2:40, 5:22 and 8:53. For me it only shows a white screen, and the only way to see errors is by going to the console. Did anyone else come across this problem? Do you know how to get the error UI to display?

[@pradeepbhattacharya8977]

Your way of talking and voice really matches with brackeys

[@devdrift2181]

In react 17.0.2, error is only showing on console not on the webpage in development mode.

[@thunder8269]

Yea bruh 🙂

[@shishirmohire9789]

Joker is a hero in his own story.

[@Monique-pe3zf]

I never learned so much like in this videos Thank u

[@AAKSHAS]

9:55 Summary

[@diegounanue]

In getDerivedDromError you change the state just returning it in an object, don't you have to use setState to change any state, or this is another way to do it?

[@pawanrk4818]

Just like getDerivedStateFromProps , here too cannot use this.setState inside it as it is a static method. The object that you return sets the state.

[@bhupeshbhatt4334]

@@pawanrk4818 Why can't we use this.setState inside static method?

[@JS-ih2lx]

@@bhupeshbhatt4334 because static methods do not have access to this keyword.

[@danielcorner5820]

Love your videos, thanks for the time-saving edits!

[@ravikamble8142]

how to get === triple equalto sign?

[@thespectators6899]

In the ErrorBoundry component how can we directly change the state property hasError without using the setState method?

[@akhil8936]

great explanation , one thing though how is it possible to update State hasError to true inside getDerivedStateFromError() as we saw in previous video that we should use the setState() method and also this method cannot be used here as it's static, could you please clarify how it works simply by setting the hasError to true. TIA

[@parthbhoir3730]

Same Doubt ??

[@Balamurugan-qp9rj]

@@parthbhoir3730 In above comments mention the exact answer,already we know getDeriveStateFromProps not able to access this.setState,due to static,so only here directly changed

[@sameerdodai1421]

What extension you used to write "===" like that in if condition of Hero.js line:4

[@LeandroLuccerini]

Go to "Settings" search for Font and in "Font Ligatures" set "editor.fontLigatures": true

[@jagdishshetty4782]

Great explanation for a very important feature !!!

[@awabelmahe9700]

Thank you very much, very clear and on point.

[@jayjani740]

One issue: When to use getDerivedStateFromError() and when to use componentDidCatch() ?

[@alexanderborisov1828]

getDirevedStateFromError is used to render a fallback UI whenever error occurs. componentDidCatch is used to log the error information in the console.

[@jayjani740]

@@alexanderborisov1828 Thanks alot man :)

[@Shacharfitness]

I've noticed that if you change the if(this.hasError ){} to if(this.state.hasError){} you would be able to see the specific Joker Error along with the other real heroes without interfering Batman and Superman's Hero tags or the App page itself even when the ErrorBoundary tag is not separated to each Hero tag. Any thoughts about this case?

[@olgamazurenko8142]

Great explanation . Thank you!

[@luanecarolineaquinocavalca1064]

thank you for the explanation 🙏🙏

[@dharmapurimahidhar9243]

When I passed throw new Error('Not a Hero'). The error message is displayed in the console but not in the UI Screen. Can anyone help me in this to solve this issue?

[@curiously-cinnamon]

I am facing the same issue. Were you able to figure out why the error doesn't show up in the UI?

[@vinothkumarv9722]

Wow...for me mits clear...really amazing..thanks sir love you the tutorails.....

[@shreyashkaushal8155]

can you provide an example , how can i use error boundaries while using router for routing as it is creating issue for me

[@dheerajambippi2283]

Why hero component is function component? Why not class component. is there any limitation in error boundary.

[@gameaddict3068]

What is the vscode shortkey to change to become instantly?

[@abhinavg916]

Prettier VSCode Extension

[@VishalSharma-rn7mt]

Awesome explanation

[@muhammad4609]

Thank you very much, man!

[@marlegagaming1274]

Batman, Superman and something went wrong 🤣🤣

[@richardmartyns7978]

I have a question, You said we can only change a state inside the setState method, but here you are changing the state inside the getDerivedStateFromError method why?

[@saikrishnachaitanya3218]

When you say react shows complete error in development mode, How does React knows a particular website loads from Develop instance or Prod Instance.

[@hernanb6490]

perfect explanation! thank you very much!!

[@bestgenerator7487]

How to use the componentDidCatch for error

[@shahmirjadoon3587]

Awesome explaination.

[@okidokiyowyow356]

im getting an API and I got an Error, I can't get a particular image. What I want to do is to not show that image. Is there any way to do that?

[@simple8810]

But the confusion is where to put error boundary, should all components need to be wrapped by error boundary and one other things do we need to write specific error boundary for each components? anybody knows help me ,,,,

[@ravindranaths513]

What is the setting that make the application production mode?

[@Nezuko-ey2du]

I am getting an error saying you cannot just return {heroName}.....Can anyone help me out?

[@ashutoshagarwal4189]

i am not sure but inside getDerivedStateFromError() we change the state without this.setSate(). So how it goes as you earlier told that for the state to change we have to use setState method..please help me in explaining this. Thanks

[@dineshpabbi7005]

I am confused about the same ! @codevolution Please clarify??

[@mamtagupta5756]

Dinesh Pabbi we can change the state without this.setstate as well, but it won’t re-render the component in the UI. so in this case our requirement is to change the state not to rerender the component. Hope this will help.!!

[@dineshpabbi7005]

mamta gupta thank you so much!

[@SanchitTewari]

What about doing this with functional components?

[@devinstinct1778]

Perfectionist 👌

[@arazmammadov9276]

Useful topic!

[@nouhabc194]

can we use just a try catch

[@denishputhawala5253]

I understand both, Error Boundary and joker is hero.

[@ahlambeyoud1709]

thank you very much, very well explained! you have a new subscriber ;)

[@Aditya.Santra]

Very Helpful Video

[@happinin]

can you make it catch warnings too? im getting a warning i really need to debug

[@AndrewOnTestingCars]

Great video! thank you

[@atisafarkhah5923]

why I did not get an error without an error boundery?

[@Kanexxable]

Could somone tell me how to make that = sign in 2:07 in between jokerName and 'Joker'

[@Spetsialnoe29]

its actually 3 = sign (===)

[@cicciopasticcio8469]

How to use boundaries with react router? Is there any way to avoid all this boilerplate?

[@shreyashkaushal8155]

even i am looking for this answer , if you have any example please suggest

[@ramusesandasari8451]

Nice and waiting for advanced and react native tut

[@princejohnson1011]

why using class component?

[@Տ·̇]

Only Class components have error boundaries...

[@NavneetTaneja-d1y]

this error page design not coming

[@charminarchaupal]

what is fallback ui?

[@kelvinyusuf6658]

How to support old browser version? Im open in firefox 49 and get error const initialization, but my code works fine on chrome

[@flashfs]

You should search for Babel + Webpack.

[@mahkamehfallah8321]

Hello Alc Sandr Reebak

[@abdous-i8s]

Uncaught Invariant Violation: Objects are not valid as a React child If you get this error, you probably try to render the error message but you try to render the error object. You need to render error.message.

[@JS-ih2lx]

How exactly are we gonna render error.message?

[@abdous-i8s]

@@JS-ih2lx error is an object with the property message. Do console.log(error.message) then you will see the error

[@JS-ih2lx]

@@abdous-i8s Thanksl! Got you.

[@mayankk104]

are you using any extension for react snippets, if yes can you name it

[@RahulKumar-wu1dv]

ES7 React/Redux/GraphQL/React-Native snippets

[@simple8810]

@@RahulKumar-wu1dv how that equal he writes I had seen before but forgot now I mean in if else

[@ranjithnayak4822]

Thanks

[@gouravjain7059]

amazing

[@ratkabu]

Joker is a hero though..

[@julio5434]

💗💗💗

[@mukulvarshney669]

this entire course need to be updated with latest react 8 things mostly things are in class-based component

[@mayank_upadhyay_19]

There is no substitute for error boundaries in functional components, it's only class based

[@saharamanson1970]

Awesome

[@josyulapravallika4652]

does anyone have this code

[@ouwa_nkt]

static getDerivedStateFromError() { return { hasError: true } } why didnt use setState to change hasError value ?

[@JS-ih2lx]

because static methods do not have access to this keyword so we simply return the object.

[@NevilleEkka]

Ooo Not cool...Joker was MY Hero!

[@vighnesh153]

You mean Villian.

[@rajeshsangapogu]

While(true){ document.write("awesome tutorial"); } I wanted to print infinite times so

[@soumyadipchakraborty9169]

In errorBoundary you have written this .props.children what is children here?

[@srinivasuravuri4978]

children means property. means inner components.(tsgs)

[@mrnabby4178]

Thank you sir

[@prashanthpasham2151]

Awesome explanation.Thank you!

[@lessonscript]

Great explanation . Thank you!