@stoplight/react-error-boundary
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

@stoplight/react-error-boundary

The React error boundary tailored to Stoplight needs, inspired by react-error-boundary.

Features

  • all the great features provided by react-error-boundary,
  • built-in error reporting powered by Sentry,
  • supports recovering,
  • fallback component can try to recover error boundary.

Installation

Supported in modern browsers and node.

# latest stable
yarn add @stoplight/react-error-boundary

Usage

You can either make use of:

  • withErrorBoundary HOC
import { withErrorBoundary } from '@stoplight/react-error-boundary';

const SchemaViewer: React.FunctionComponent<{ schema: unknown }> = ({ schema }) => {
  if (typeof schema !== 'object' || schema === null) {
    throw new Error('Schema must be an object');
  }

  if (Object.keys(schema).length === 0) {
    throw new Error('Schema cannot be empty');
  }

  return <span>This is fine.</span>;
};

const MyWrappedComponent = withErrorBoundary(SchemaViewer, {
  recoverableProps: ['schema'],
});

const Page = () => (
  <div>
    <h1>Schema Viewer</h1>
    <MyWrappedComponent schema={{}} />
  </div>
);
  • ErrorBoundary component
import { ErrorBoundary } from '@stoplight/react-error-boundary';

const SchemaViewer: React.FunctionComponent<{ schema: unknown }> = ({ schema }) => {
  if (typeof schema !== 'object' || schema === null) {
    throw new Error('Schema must be an object');
  }

  if (Object.keys(schema).length === 0) {
    throw new Error('Schema cannot be empty');
  }

  return <span>This is fine.</span>;
};

const Page = () => (
  <div>
    <h1>Schema Viewer</h1>
    <ErrorBoundary>
      <SchemaViewer schema={{}} />
    </ErrorBoundary>
  </div>
);

Contributing

  1. Clone repo.
  2. Create / checkout feature/{name}, chore/{name}, or fix/{name} branch.
  3. Install deps: yarn.
  4. Make your changes.
  5. Run tests: yarn test.prod.
  6. Stage relevant files to git.
  7. Commit: yarn commit. NOTE: Commits that don't follow the conventional format will be rejected. yarn commit creates this format for you, or you can put it together manually and then do a regular git commit.
  8. Push: git push.
  9. Open PR targeting the master branch.

Readme

Keywords

none

Package Sidebar

Install

npm i @stoplight/react-error-boundary

Weekly Downloads

35,154

Version

3.0.0

License

Apache-2.0

Unpacked Size

22.8 kB

Total Files

16

Last publish

Collaborators

  • stoplight-devops