React Isomorphic Error Boundary

A reusable isomorphic error boundary for React 16+

import React from 'react';
import withErrorBoundary from 'react-isomorphic-error-boundary';

function SampleComponent(props) {
  const titleName = props.name;
  return <h1>${titleName}</h1>;
}

export default withErrorBoundary(SampleComponent);

Installation

This is a Node.js module available through the npm registry.

Please do download and install Node.js. Node.js 8 or higher is required.

Installation is done using the command npm install:

$ npm install react-isomorphic-error-boundary

Features

• Universal Support - [CSR | SSR]
• Lightweight
• Customizable with fallback error components and loggers
• Valid use cases provided with examples

Properties

• Required
• Description: Pass the component to be wrapped in error boundary. This is the component which has the probability of throwing error.

• Optional
• Description: Although default error component does the job, option to provide a custom error component to the error-boundary HOC is also in place. This allows the developer to customize the error component at their end.
• Props
  • errorMessage [String]: The error details for the wrapped component
  • componentName [String]: The name of the component that has error(s)

• Optional
• Description: The HOC offers to log the error information in the console [client and server side]. There is provision that the developer can provide to get a custom logger in place. This helps in standardizing the logging of this utility and keeps it in sync with the logging patterns of the entire application.
• Params - error object
  • thrown error object
  • extra error information [contains component name]

Available Scripts

We can run following scripts:

npm run csr

Runs the client app in the production mode. This is the basic react app created with create-react-app script. Open http://localhost:5000 to view it in the browser.

npm run ssr

Runs the server app in the production mode. This is the basic gatsby app created with gatsby-cli. Open http://localhost:9000 to view it in the browser.

These examples have error boundaries wrapped in 3 components Each wrapped component has a different variation of error boundary.

Provided error boundaries

Functional Component Error Boundary

Wrap the component in the error boundary HOC.

Example: 1 - Functional Component (Default)

Here SampleComponent will not be rendered correctly (reason mentioned inline). To prevent the complete application from going down, wrap the component in functionalSafeComponent.

import React from 'react';
import { functionalSafeComponent } from 'react-isomorphic-error-boundary';

function SampleComponentParent() {
  return <SampleComponent name='sample' randomProp='' />;
}

function SampleComponent(props) {
  const titleName = props.name;
  // this line will throw error as randomProp is not an object
  const randomPropValue = props.randomProp.value;
  return <h1>${titleName}</h1>;
}

export default functionalSafeComponent(SampleComponent);

Example: 2 - Functional Component with prop-types and defaultProps

In a generic scenario where we need to define defaultProps and PropTypes for a functional component. Please take a look at the example mentioned here:

import React from 'react';
import { functionalSafeComponent } from 'react-isomorphic-error-boundary';
import PropTypes from 'prop-types';

function SampleComponent(props) {
  const titleName = props.name;
  return <h1>${titleName}</h1>;
}

const ErrorBoundSampleComponent = functionalSafeComponent(SampleComponent);

ErrorBoundSampleComponent.defaultProps = {
  // default props goes in here
};

ErrorBoundSampleComponent.PropTypes = {
  // PropTypes goes in here
};

export default ErrorBoundSampleComponent;

Example: 3 - Functional Component with other HOCs

In scenarios where the component needs to be wrapped in other HOCs, then wrapping the component first in the error boundary HOC followed by other HOCs will get the things done.

import React from 'react';
import { functionalSafeComponent } from 'react-isomorphic-error-boundary';
import randomHOC from 'some-random-hoc';
import PropTypes from 'prop-types';

function SampleComponent(props) {
  const titleName = props.name;
  return <h1>${titleName}</h1>;
}

export default randomHOC(functionalSafeComponent(SampleComponent));

Non Functional (Class Based) Error Boundary

Wrap the component in the error boundary HOC.

Example: 1 - Non Functional Component (Default)

Here SampleComponent will not be rendered correctly (reason mentioned inline).To prevent the complete application from going down, wrap the component in functionalSafeComponent.

import React from 'react';
import { nonFunctionalSafeComponent } from 'react-isomorphic-error-boundary';

class SampleComponentParent extends React.Component {
  render() {
    return <SampleComponent name='sample' randomProp='' />;
  }
}

class SampleComponent extends React.Component {
  render() {
  const titleName = this.props.name;
  // this line will throw error as randomProp is not an object
  const randomPropValue = this.props.randomProp.value;
  return <h1>${titleName}</h1>;
  }
}

export default nonFunctionalSafeComponent(SampleComponent);

Example: 2 - Non Functional Component with prop-types and defaultProps

In a generic scenario where we need to define defaultProps and PropTypes for a non-functional component. Please take a look at the example mentioned here:

import React from 'react';
import { nonFunctionalSafeComponent } from 'react-isomorphic-error-boundary';
import PropTypes from 'prop-types';

class SampleComponent extends React.Component {
  render() {
    const titleName = this.props.name;
    return <h1>${titleName}</h1>;
  }
}

SampleComponent.defaultProps = {
  // default props goes in here
};

SampleComponent.PropTypes = {
  // PropTypes goes in here
};

export default nonFunctionalSafeComponent(SampleComponent);

Example: 3 - Non Functional Component with other HOCs

In cases where the component needs to be wrapped in other HOCs, then wrapping the component in error boundary at first will work.

import React from 'react';
import { nonFunctionalSafeComponent } from 'react-isomorphic-error-boundary';
import randomHOC from 'some-random-hoc';

class SampleComponentParent extends React.Component {
  render() {
    return <SampleComponent name='sample' randomProp='' />;
  }
}

class SampleComponent extends React.Component {
  render() {
  const titleName = this.props.name;
  // this line will throw error as randomProp is not an object
  const randomPropValue = this.props.randomProp.value;
  return <h1>${titleName}</h1>;
  }
}

export default randomHOC(nonFunctionalSafeComponent(SampleComponent));

Example: 4 - Non Functional Component with life cycle methods

The error boundary works equally well with any of the lifecycle methods of React.

import React from 'react';
import { nonFunctionalSafeComponent } from 'react-isomorphic-error-boundary';

class SampleComponent extends React.Component {

  componentDidMount() {
    // this line will throw error as randomProp is not an object
    const randomPropValue = this.props.randomProp.value;
  }

  render() {
  const titleName = this.props.name;
  return <h1>${titleName}</h1>;
  }
}

export default nonFunctionalSafeComponent(SampleComponent);

Default Error Boundary

The easiest way to wrap a component in error Boundary is to import the default method from the package:

import React from 'react';
import withErrorBoundary from 'react-isomorphic-error-boundary';

class SampleComponent extends React.Component {

  componentDidMount() {
    // this line will throw error as randomProp is not an object
    const randomPropValue = this.props.randomProp.value;
  }

  render() {
  const titleName = this.props.name;
  return <h1>${titleName}</h1>;
  }
}

export default withErrorBoundary(SampleComponent);

The default export abstracts the functional and non functional component logic. It eases the work for the developer to use the error boundary without paying attention to the type of component. Although it is recommended to use the default export only in development phase.