Before react 16 established the JavaScript errors were not gracefully handled by react. To find errors of child components deeply from whole tree component or any of the component error boundaries were developed. Error boundaries are the components of react that catch errors or JavaScript errors in child component tree and log all the errors and display through fallback UI. Error boundaries catch errors while rendering in lifecycle methods. https://www.ducatindia.com/javatraining/

1. WELCOME TO DUCAT INDIA
Language | Industrial Training | Digital Marketing | Web Technology | Testing+ | Database | Networkin
Mobile Application | ERP | Graphic | Big Data | Cloud Computing
Error
Boundaries
7070905090
info@ducatindia.com

2. Error Boundaries
Before react 16 established the JavaScript errors were not gracefully handled by react. To find errors of child
components deeply from whole tree component or any of the component error boundaries were developed. Error
boundaries are the components of react that catch errors or JavaScript errors in child component tree and log all the
errors and display through fallback UI. Error boundaries catch errors while rendering in lifecycle methods.
There are two error handling phase methods as-:
1.StaticgetDerivedStateFromError (error)
2.ComponentDidCatch (error, info)
Usually you see that runtime errors during rendering put application in broken state. React basically unmount the
whole react component tree. The static method getDerivedStateDidCatch is used to render UI or fallback UI after an
error is shown and ComponentDidCatch is used to log error.

3. Create both- new file with error and error boundaries file
In new file.js, in code we use snippet rfce to create functional component. This component takes greatname as prop and
renders the same. For understanding error boundaries need to throw error in file as-:

4. So in error boundary file describe error conditions-:

5. When this arrives click on close button and output will be shown according to if else condition

6. Now using second method component Did Catch taking two parameters which define information to the error and this
method is used to log the errors. So after defining parameters logged it into the console.
Error boundaries donot catch errors inside the event handlers. So if you want to catch the errors inside handlers then you
need to use TRY and CATCH methods and not error boundaries.
For Example-:
JavaScript errors inside components used to corrupt React’s state and emit cryptic errors on renders, when runtime error
occurs react unmount whole react tree and shows errors.
So, Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log
those errors and display fallback UI instead of the component tree that crashed.

7. There are two lifecycle methods available-:
1. State getDerivedStateFromError(error) {
2. componentDidCatch(error,errorinfo)

8. THANK YOU
Error
Boundaries
7070905090
info@ducatindia.com