Know how to set your boundaries…..in React!

We all have heard about the dreaded blue screen of death on windows but there’s a new “white screen of death” in town introduced in React 16, where now if you run across an unhandled error all your customer sees… is a white screen!

What throws developers off guard is the fact that on development builds we are shown the error so we just try to work towards fixing but for any off-case which we didn’t handle, react would not keep the last rendered state of the app! So even if one child component is misbehaving your entire app goes white!

I’ll be using https://www.npmjs.com/package/react-error-boundary for setting our boundaries!

Our first order of business is encapsulating our app with a component which we show in case we run into errors… think of it as a catch block but for your components!

<ErrorBoundary FallbackComponent={ErrorBoundaryWithFallback}> 
<App />
</ErrorBoundary>

Now all you got to do is chalk up the ErrorBoundaryWithFallback component -

import React from "react"; 
export function ErrorBoundaryWithFallback() { return ( .... ); }

Now anything that goes south in the app, it will be handled by this new component of yours call “ErroBoundaryWithFallBack” There is one thing to remember though, this will just handle errors in your components, anything going south inside your action creators will still result in a WSOD (White screen of death)

Once this is done, open up your ErrorBoundaryWithFallback function and add a screen to be displayed to the user in case they run into this… Bonus points — have different boundaries for different components of your dashboard! So now, you can display different error pages based on the component that is misbehaving and perhaps offer a comprehensive fallback instead of plain and simple “refresh”.

But there’s still one unanswered question — how do we have a blanket catch for other errors? Stay tuned, I’ll be covering it in upcoming blogs!

--

--

--

My work straddles around webRTC, noise reduction, and everything to do with audio over the web

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What are Functional Components? Your keys to the software kingdom.

Flyover view of multiple functional components.

July 2: Generating k-combinations with recursion in JavaScript

Breweries Breweries Breweries! Say it three times fast!

Posts/Deletes on here

Setting up a linter to change your coding life for the better

Pimp my JS_Pt. 3

Let’s Talk About Promises in JavaScript!!!

Cloud Functions for Node.js using Express.js (Connect) APIs

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
Viral Tagdiwala

Viral Tagdiwala

My work straddles around webRTC, noise reduction, and everything to do with audio over the web

More from Medium

“ Top 7 Things Must Know About JavaScript ”

Unit 3 Essay Revision

Some tips for working with React

5 Reasons to go for a crowdfunding campaign 2021?