react-local-boundary

Usage

npm install react-local-boundary --save
# or
yarn add react-local-boundary

import React from 'react';
import LocalBoundary from 'react-local-boundary';

const Fallback = (error) => (
  <div className="Error">
    Error: {error.message}
  </div>
);

class MyComponent extends React.Component {
  render() {
    return (
      <LocalBoundary renderError={Fallback}>
        <ComponentThatThrows />
      </LocalBoundary>,
    );
  }
}

Why?

react-local-boundary exists to help out situations where a developer is trying to handle arbitrary errors in a component sub-tree.

In certain cases, like children-as-a-function patterns , methods like #unstable_handleError won't be able to properly catch errors that exist when trying to mount the components. When trying to recover from such errors, especially when using #setState in a Promise chain, you will most likely get a error telling you that React can't find the Host Node of the Component.

As a result of this unstable state due to errors caused by React trying to mount an unsafe sub-tree, we leverage LocalBoundary. In this case, the component will attempt to render the sub-tree into a pre-defined container, and will capture any errors that occur and render the corresponding error handler/component.