react-error-isolation

react-error-isolation (WIP)

About

Don't let one error destroy the whole project

Similar Projects / Alternatives / Idea

• example by John Doe
• example-2 by Jane Doe

How to Install

First, install the library in your project by npm:

$ npm install react-error-isolation

Or Yarn:

$ yarn add react-error-isolation

Getting Started

With Context configuration

• Import context provider and HOC in React application file:

import {
  ErrorIsolationProvider,
  withErrorIsolation,
} from 'react-error-isolation';

• Set ErrorIsolationProvider (if you want to use the same error screen for all components wrapped in withErrorIsolation HOC):

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { ErrorIsolationProvider } from 'react-error-isolation';

import App from './App';

const ErrorScreen = () => {
  return (
    <div>
      <h1>Oops!</h1>
      <h2>Something went wrong.</h2>
    </div>
  );
};

ReactDOM.render(
  <ErrorIsolationProvider errorScreen={<ErrorScreen />}>
    <App />
  </ErrorIsolationProvider>,
  document.getElementById('root')
);

• Then use withErrorIsolation:

// App.js

import React from 'react';
import { withSuspense } from 'react-suspenser';

const App = () => {
  return (
    <div>
      <p>Hello World!</p>
    </div>
  );
};

export default withErrorIsolation()(App);

License

This project is licensed under the MIT License © 2020-present Jakub Biesiada