React: Error Boundaries

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.

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

1. State getDerivedStateFromError(error) {

	Return (hasError:true);
	//Update state so next render will show the fallback UI
	}
	

2. componentDidCatch(error,errorinfo)

   	{
   	//you can also log the error to an error reporting service
   	logErrorToMyService(error,errorInfo);
   	}
   	

Apply now for Advanced React Js Course