@os-design/error-boundary

@os-design/error-boundary

The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).

Error Boundary allows you to catch JS errors that occur in the UI. This package is a wrapper that allows you to wrap your components to catch UI errors that may occur inside them.

Installation

Install the package using the following command:

yarn add @os-design/error-boundary

Usage

Let's assume that we have a component that sometimes throw the error.

import React, { useState } from 'react';

const BadComponent: React.FC = () => {
  const [hasError, setHasError] = useState(false);

  if (hasError) {
    throw new Error('Something happened');
  }

  return (
    <>
      <p>I am working!</p>
      <button onClick={() => setHasError(true)}>Throw the error</button>
    </>
  );
};

export default BadComponent;

To catch errors that may occur inside the BadComponent, wrap it with the ErrorBoundary as follows:

import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';

const App: React.FC = () => (
  <ErrorBoundary fallback={<h1>An error occured</h1>}>
    <BadComponent />
  </ErrorBoundary>
);

export default App;

Getting an error

Most likely, you want to print an error message or render the fallback component, depending on the error type (for example, render some component, if there is no network connection).

In this case, you can pass a function to the fallback and get an error like this:

import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';

const App: React.FC = () => (
  <ErrorBoundary fallback={({ error }) => <h1>{error.message}</h1>}>
    <BadComponent />
  </ErrorBoundary>
);

export default App;

Retrying after an error

Let's assume that you have a component that throws the «No error connection» error. You successfully render another component with the error message, but what if the user has already restored the Internet connection?

In this case, you also need to render the retry button. When you click on it, the component will try to render again. You can do it in the following way:

import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';

const App: React.FC = () => (
  <ErrorBoundary
    fallback={({ error, retry }) => (
      <div>
        <h1>{error.message}</h1>
        <button onClick={retry}>Retry</button>
      </div>
    )}
  >
    <BadComponent />
  </ErrorBoundary>
);

export default App;

Using with useQueryLoader / loadQuery

As Relay documentation says:

When using useQueryLoader/loadQuery to fetch a query, in order to retry after an error has occurred, you can call loadQuery again and pass the new query reference to usePreloadedQuery.

You can do it as follows:

import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';

const App: React.FC = ({ initialQueryRef }) => {
  const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);

  return (
    <ErrorBoundary
      fallback={({ error, retry }) => (
        <div>
          <h1>{error.message}</h1>
          <button
            onClick={() => {
              loadQuery(/* ... */);
              retry();
            }}
          >
            Retry
          </button>
        </div>
      )}
    >
      <MainContent queryRef={queryRef} />
    </ErrorBoundary>
  );
};

export default App;

Using with useLazyLoadQuery

As Relay documentation says:

When using useLazyLoadQuery to fetch a query, in order to retry after an error has occurred, you can attempt to re-mount and re-evaluate the query component by passing it a new fetchKey.

You can do it as follows:

import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';

const App: React.FC = ({ initialQueryRef }) => {
  const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);

  return (
    <ErrorBoundary
      fallback={({ error, retry }) => (
        <div>
          <h1>{error.message}</h1>
          <button onClick={retry}>Retry</button>
        </div>
      )}
    >
      {(fetchKey) => <MainContent fetchKey={fetchKey} />}
    </ErrorBoundary>
  );
};

export default App;