What are error boundaries?

They are the simple fallback options provided by React(¹⁶) itself, that allows you to show a proper fallback UI or an error message.

No blank screen will be shown on production or any environment except local, where you’ll see the line number of error causing code.

Prerequisite knowledge

Lifecycle methods used:

static getDerivedStateFromError(error) { /* LOGIC GOES HERE */}

This method is static and basically identifies any error thrown and catches the error, hence we write state-change logic here.

componentDidCatch(error, errorInfo) { /* LOGGING ERROR */ }

This is the lifecycle method provided by React that takes two arguments error and the info of the…