
Quick Contact
React Tutorial
- React JS Introduction
- How to install react?
- React Features
- React vs React Native
- React JS VUE Application
- State V/S Props
- React Props
- REACT STATE
- React JSX?
- Conditional Rendering
- React Constructor
- Props Validation
- React Component API
- React Forms
- React Event
- Flux v/s MVC
- React Flux Concept
- React Fragment
- React Lists and Keys
- Error Boundaries
- React Portals
- React Animation
- React Redux
- React CSS
- React Refs
- React Router
Questions & Answers
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-:
- StaticgetDerivedStateFromError (error)
- 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.
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-:
Import React from ‘react’ Function Great({greatname}) { If(greatname == ‘Joker’) { Throw new Error(‘Not Great’) { Return ( < div> {greatName} < /div> ) } Export default Great
So in error boundary file describe error conditions-:
Import React, {Component} from ‘react’ Class ErrorBoundary extends Component { Constructor(props) { Super(props) This.state = { hasError: false } } Static getDerivedStateFromError(error) { Return { hasError: true } } Render() { If (this.state.hasError) { Return < h1>Something went wrong< /h1> } Return this.props.children } } Export default Error Boundary

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

Now using second method componentDidCatch 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.
ComponentDidCatch (error, info) { Console.log (error) Console.log (info) }
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.
There are two lifecycle methods available-:
- State getDerivedStateFromError(error) {
-
componentDidCatch(error,errorinfo)
{ //you can also log the error to an error reporting service logErrorToMyService(error,errorInfo); }
Return (hasError:true); //Update state so next render will show the fallback UI }