https://github.com/stoplightio/react-error-boundary
https://github.com/stoplightio/react-error-boundary
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/stoplightio/react-error-boundary
- Owner: stoplightio
- License: apache-2.0
- Created: 2019-09-25T13:26:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-27T12:07:54.000Z (over 2 years ago)
- Last Synced: 2025-04-05T22:43:22.032Z (about 1 year ago)
- Language: TypeScript
- Size: 1.5 MB
- Stars: 1
- Watchers: 17
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @stoplight/react-error-boundary
The React error boundary tailored to Stoplight needs, inspired by [react-error-boundary](https://github.com/bvaughn/react-error-boundary).
- Explore the components: [Storybook](https://stoplightio.github.io/react-error-boundary)
- View the changelog: [Releases](https://github.com/stoplightio/react-error-boundary/releases)
### Features
- all the great features provided by [react-error-boundary](https://github.com/bvaughn/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.
```bash
# latest stable
yarn add @stoplight/react-error-boundary
```
### Usage
You can either make use of:
- withErrorBoundary HOC
```tsx
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 This is fine.;
};
const MyWrappedComponent = withErrorBoundary(SchemaViewer, {
recoverableProps: ['schema'],
});
const Page = () => (
Schema Viewer
);
```
- ErrorBoundary component
```tsx
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 This is fine.;
};
const Page = () => (
Schema Viewer
);
```
### 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](https://github.com/marionebl/commitlint/tree/master/%40commitlint/config-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.