ReactJS Tutorial – 32 – Error Boundary
- December 29, 2023
- Posted by: MainInstructor
- Category: E-Commerce Go JavaScript React VSCode
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703878312_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 32 – Error Boundary
Alright guys in this video let’s learn yet another feature in react which is error boundaries if you can recollect from the lifecycle hooks I briefly mentioned about the error handling phase which includes two life cycle methods static yet derived state from error and component did catch we will learn more
About these two methods in this video in all the videos we have seen so far we see that runtime errors during rendering could put our application in a broken State react basically unmount the whole react component tree what would be great is if we could catch the errors anywhere
In the component tree and display a fallback UI this is where error boundaries take the spotlight now what exactly is an error boundary it’s simple really a class component that implements either one or both of the lifecycle methods get the right State from error or component did catch becomes an error
Boundary the static method get derived state from error is used to render a fallback you ID after an error is thrown and the component did catch method is used to log their information let’s understand this better with an example I’m going to go back to vs code and
Within the components folder create a new file here o dot J s within the file I’m going to use the reactor snippet r FCE to create a functional component this component will accept hero name as a prop and will render the same for our understanding of error boundaries though
We need to throw an error so what I will add is if the hero name is Joker through an error that says not a hero now back in app component I will include two heroes the first one hero name is equal to Batman and the second one hero name is equal to
Superman if you take a look at the browser you can see both the hero’s Batman and Superman now I am going to add another hero but this time passed Joker as the hero name if you now take a look at the browser you can see that our entire application
Crashes this obviously is not good what we want is if a particular component throws an error only that component should fall back into a UI and the remaining components should be unaffected let’s see how to achieve that with an error boundary I’m going to go
Back to vs code and create a new file called error boundary dot j s within the file I’m going to create a new class component using the reactive snippet RCE and I will get rid of the name export for this class component to become an error boundary we need to define either
The get derived state from ever or component dip catch lifecycle methods let’s start with the first one static get derived state from error and it receives the error as a parameter within the body we are simply going to return the new state object what we will do is
Set a property called has error to true of course we don’t have state right now so let’s add it use the snippet our Const initialize a state property called has error to false so what we are effectively doing is if at all there is an error when rendering any of the
Components we are setting the state has error property to true this state property can now be used to create a fallback UI so in the render method if this dot state dot has error then we returned and each one tag that says something went wrong if there is no
Error we return this dot probz dot children this dot Propst or children refers to the component we are actually rendering this will make more sense in just a minute but let me tell you that our error boundary is now complete the final step is to wrap the components
With this error boundary so it AB component wrap all the hero components with the error boundary component and make sure to import the component at the table now if I save all the files and take a look at the browser we still see the error this might be confusing
But let me tell you this is the intended behavior the react team have mentioned that error boundaries are primarily useful for production but in development they want to make errors as highly visible as possible so you will always see this error during development but what you can do is on the top right
Click on the close button and we now have our application back and you can see that we have the text something went wrong being displayed if I go back to vs code and quickly comment out there are boundary head back to the browser click on the
Close button you can see that nothing is displayed so this is the difference and our boundaries will catch the error and display a fallback UI which in our case is the text something went wrong now a very important point to discuss about ll boundaries is where to place them right
Now our error boundary encloses all the hero components so if there is an error everything inside the error boundary is hidden and the fallback UI is rendered this however might not be ideal for example consider an e-commerce site where we display a thousand products just because there is an error in one of
The products it would not be a great idea to hide the other 999 products similarly in our example it’s not a good idea to hide the other two heroes when the third hero is throwing an error so in app component what I will do is wrap each hero component with the error boundary
You ideally you would want this as a reusable component but this will do for now if I go back to the browser you can see that we still have the error overlay I close it and you can now see that the first two heroes are displayed and only
The third hero we have the fallback UI Batman Superman and something went wrong the placement of the error boundary is completely up to you you can just wrap the top level component or wrap any nested individual components so that only that component has a fallback UI leaving the rest of your user interface
Working as expected now that I did mention to lifecycle methods so let’s get to the second one component did catch so right after get derived state from error we have component did catch which takes two parameters error and info which is the information related to the error and
This method is pretty much used to log the errors so if you have a logging service you can call it passing in the error and the info parameters for now I will simply log them to the console this will seem redundant though as you will see in just a second you need to
Say the file and head to the browser and when I open the developer tools and take a look at the console you can see that we have our console logs we have the error object and the information related to that error but as it turns out during development react automatically logs
Every error to the console so the same is already logged as you can see here but this is what the error and info object will contain in component did catch now the final point is that you should know that our boundaries catch errors during rendering in lifecycle
Methods and in the constructors of the whole tree below them however they do not catch errors inside event handlers if you have an onclick handler and want to catch an error you just need to use the regular try catch statements and not error boundaries alright that is pretty
Much about error boundaries let me quickly summarize it for you and our boundaries are react components that catch JavaScript error in their child component tree log those errors and display a fallback UI a class component becomes an error boundary by defining either or both of get derived state from
Error and component if catch lifecycle methods in our example in the lifecycle method we set the has error state to true which causes the fallback UI to be rendered the placement of the error boundary also matters as it controls if the entire application should have the fallback UI for just the component
Causing the problem hello boundaries basically provide a way to gracefully handle error in application code alright I hope you now have a decent understanding of other boundaries thank you guys for watching now free to subscribe I’ll see you guys in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Thanks
why using class component?
this error page design not coming
can we use just a try catch
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?
Thank you sir
In the ErrorBoundry component how can we directly change the state property hasError without using the setState method?
thank you for the explanation 🙏🙏
How to use the componentDidCatch for error
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?
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?
does anyone have this code
Thank you very much, very clear and on point.
I am getting an error saying you cannot just return <div>{heroName}</div>…..Can anyone help me out?
I never learned so much like in this videos Thank u
When you say react shows complete error in development mode, How does React knows a particular website loads from Develop instance or Prod Instance.
What about doing this with functional components?
In react 17.0.2, error is only showing on console not on the webpage in development mode.
Great explanation . Thank you!
Why hero component is function component? Why not class component. is there any limitation in error boundary.
Thank you very much, man!
can you provide an example , how can i use error boundaries while using router for routing as it is creating issue for me
Simple explanation always better to understand the basic concept of some advanced features like this and you did it great. Thank you so much 🙂
9:55 Summary