@stoplight/react-error-boundary

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

• Explore the components: Storybook
• View the changelog: Releases

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';constSchemaViewer: React.FunctionComponent<{schema: unknown}>=({ schema })=>{if(typeofschema!=='object'||schema===null){thrownewError('Schema must be an object');}if(Object.keys(schema).length===0){thrownewError('Schema cannot be empty');}return<span>This is fine.</span>;};constMyWrappedComponent=withErrorBoundary(SchemaViewer,{recoverableProps: ['schema'],});constPage=()=>(<div><h1>Schema Viewer</h1><MyWrappedComponentschema={{}}/></div>);

• ErrorBoundary component

import{ErrorBoundary}from'@stoplight/react-error-boundary';constSchemaViewer: React.FunctionComponent<{schema: unknown}>=({ schema })=>{if(typeofschema!=='object'||schema===null){thrownewError('Schema must be an object');}if(Object.keys(schema).length===0){thrownewError('Schema cannot be empty');}return<span>This is fine.</span>;};constPage=()=>(<div><h1>Schema Viewer</h1><ErrorBoundary><SchemaViewerschema={{}}/></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.