Photo by Markus Spiske on Unsplash

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

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…

Is Harshul

FullStack Js Developer, Specialization in ReactJs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store