React: Error handling (Avoid blank screens using error boundaries)(HOC)

Photo by Markus Spiske on Unsplash

What are error boundaries?

Prerequisite knowledge

Lifecycle methods used:

static getDerivedStateFromError(error) { /* LOGIC GOES HERE */}
componentDidCatch(error, errorInfo) { /* LOGGING ERROR */ }

Getting Started

Step 1: Make the component that catches the error:

import React from “react”;class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
error: { message: “”, stack: “” },
errorInfo: { componentStack: “” },
};
}
// Catches the error and changes the state
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
/* This lifecycle method is optional if you do not want to log error information */
// Logs the error into the state
componentDidCatch = (error, errorInfo) => {
// Sets the error and info in state
this.setState({ error, errorInfo });
};
render() {
if (this.state.hasError && !this.props.showErrorComponent) {
// You can render any custom fallback UI
return <div className=”error”>ANY MODAL OR POP_UP COMPONENT HERE</div>;
}
/* Condition if we do not want to show modal or any component that you chose everytime, instead we have some text or other component. */
else if (this.state.hasError && this.props.showErrorComponent){
return <h1>Some error!</h1>;
}

// Else return the children as is
return this.props.children;
}
}
export default ErrorBoundary;

Step 2: Making an HOC (Higher-order Component):

/* 2nd param is if we want to show the 1st fallback component, else just the text <h1>Some error!</h1> */export function withErrorBoundary(WrappedComponent, showErrorComponent = false) {
return props => (
<ErrorBoundary showErrorComponent={showErrorComponent}>
{/* This👇🏼 is the component wrapped in boundary */}
<WrappedComponent {...props} />
</ErrorBoundary>
);
}

Step 3: Using the Boundary component:

Case: When we are showing 1st fallback UI

Case 1: When we want to show fallback component.

(Here Just a text in red color shows when count gets = 5)

import { withErrorBoundary } from “<PATH>/ErrorBoundary”;class Child1 extends Component {
/* Component code */
}
export default withErrorBoundary(Child1);
Case: When we are showing 2nd fallback UI

Case 2: : When we want to show just error message OR

1st type of error: here(plain text)


import import { withErrorBoundary } from “<PATH>/ErrorBoundary”;
class Child2 extends Component {
/* Component code */
}
export default withErrorBoundary(Child2, true);

Case 3: When component is connected to redux/store:

import { connect } from "react-redux";
import import { withErrorBoundary } from “<PATH>/ErrorBoundary”;
class IAmInsideBoundary extends Component {
/* Component code */
}
export default connect(mapStateToProps, mapDispatchToProps)withErrorBoundary(MeInsideBoundary, true));

Wondering, why is still this error page coming?

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