# custom-error-boundary

> Custom error boundary component for react.js applications.

Latest version **2.0.1** (published 2019-12-26) · 0 weekly downloads

## Install

```sh
npm install custom-error-boundary
pnpm add custom-error-boundary
yarn add custom-error-boundary
bun add custom-error-boundary
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2019-12-26 |
| First published | 2019-10-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 23.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sayantan Ghosh |
| Maintainers | itssayantan |
| Keywords | react, custom-error-boundary, custom, error, boundary, error-boundary, error, boundary, reactjs, render-props, render, props |

## Links

- npm: https://www.npmjs.com/package/custom-error-boundary
- Repository: https://github.com/itsSayantan/custom-error-boundary
- Homepage: https://github.com/itsSayantan/custom-error-boundary#readme
- Issues: https://github.com/itsSayantan/custom-error-boundary/issues
- npm.io page: https://npm.io/package/custom-error-boundary

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.10.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.10.2

## Alternatives

- [@sentry/react-native](https://npm.io/package/@sentry/react-native.md) — 2.6M weekly downloads
- [@ardatan/aggregate-error](https://npm.io/package/@ardatan/aggregate-error.md) — 708.1K weekly downloads
- [custom-error-generator](https://npm.io/package/custom-error-generator.md) — 2.0K weekly downloads
- [@technik-sde/prosemirror-recreate-transform](https://npm.io/package/@technik-sde/prosemirror-recreate-transform.md) — 1.5K weekly downloads
- [@suchipi/error-utils](https://npm.io/package/@suchipi/error-utils.md) — 78 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2019-12-26
- 2.0.0 — 2019-12-05
- 1.1.1 — 2019-11-19
- 1.1.0 — 2019-11-19
- 1.0.2 — 2019-10-28
- 1.0.1 — 2019-10-20
- 1.0.0 — 2019-10-20

## README

# custom-error-boundary

Custom error boundary component for react.js applications.

# Installation

`$ npm install --save custom-error-boundary`

# Usage

Consider you have a component called `App` component which looks like this:

```js
import React from 'react';
import './App.css';

function App() {
    return <Divider dividend={6} divisor={0} />;
}

function Divider(props) {
    const result = props.dividend / props.divisor;

    if (isNaN(result)) {
        throw new Error('Result should be a number: ' + errorSuffixString);
    } else if (result === Infinity) {
        throw new Error('Result cannot be Infinity: ' + errorSuffixString);
    }

    return <p>The result after divion is: {result}</p>;
}

export default App;
```

If the error is thrown due to faulty props, the page will break. Now we will try to implement the `custom-error-boundary` library. For that, we need to do the following steps:

-   Install the library using the installation command already provided.
-   Import the library like so: `import CEB from 'custom-error-boundary'`
-   Wrap the returned JSX in the `<CEB></CEB>` JSX, like: `<CEB><Divider dividend={6} divisor={0} /></CEB>`
-   Send appropriate props to the `CEB` JSX, currently the following [list of props](#props-supported) are supported.

Now, the above `App` looks like this:

```js
import React from 'react';

import { DividerProps } from './model';

import './App.scss';
import CEB from '@Components/CEB/CEB';

const App = (): JSX.Element => {
    return (
        <CEB fallbackUI={CustomFallbackUI}>
            <Divider dividend={6} divisor={0} />
        </CEB>
    );
};

const Divider = (props: DividerProps): JSX.Element => {
    const result = props?.dividend / props?.divisor;
    const errorSuffixString =
        'Please check your inputs, both the props: dividend and divisor should be sent and make sure the divisor is not 0.';

    if (isNaN(result)) {
        throw new Error('Result should be a number: ' + errorSuffixString);
    } else if (result === Infinity) {
        throw new Error('Result cannot be Infinity: ' + errorSuffixString);
    }

    return <p>The result after divion is: {result}</p>;
};

const CustomFallbackUI = (): JSX.Element => {
    return <p>Custom fallback UI</p>;
};

export default App;
```

Notice that a `CustomFallbackUI` component has been added. This is because we are passing the `fallbackUI` prop which requries a 'functional component' to be passed to it. Yes, this is a [render prop](https://reactjs.org/docs/render-props.html). This component will be the fallback UI for the erroneous component that the `CEB` error boundary component is wrapping.

# Props Supported

-   **fallbackUI**: Takes a functional component and renders it when any error is encountered in the wrapped JSX.
-   **theme**: Takes a string. Not required when `fallbackUI` prop is provided as it has higher precedence if both the props are sent. List of available themes are provided in the [Supported Themes](#supported-themes) section.

# Supported Themes

-   Basic

# Contributing

Fork the project, make changes and send me a pull request.

For adding a theme, follow these steps:
<<<<<<< HEAD

-   Clone this repository.
-   Add your component under `./src/fallback/components`. You can take the example of the `Basic` component in the same folder.
-   Import and export your component in the `./src/fallback/index.js` file.
-   In order to test the compoent, follow these steps:

    -   Run `npm run build` inside this (custom-error-boundary) project,
    -   Create another project (example: Test) and implement a simple component like the `App` component shown above in the [Usage](#usage) section.
    -   Copy the `lib` folder from the `custom-error-boundary` project and replace the `lib` folder inside the `./node_modules/custom-error-boundary` folder.
    -   Send necessary props in your `CEB` to test your results.
    -   Created fallback compoent should be functional.
    -   # The created components do not support props as of now.

-   Clone this repository.
-   Add your component under `./src/fallback/components`. You can take the example of the `Basic` component in the same folder.
-   Import and export your component in the `./src/fallback/index.js` file.
-   In order to test the compoent, follow these steps: - Run `npm run build` inside this (custom-error-boundary) project, - Create another project (example: Test) and implement a simple component like the `App` component shown above in the [Usage](#usage) section. - Copy the `lib` folder from the `custom-error-boundary` project and replace the `lib` folder inside the `./node_modules/custom-error-boundary` folder. - Send necessary props in your `CEB` to test your results. - Created fallback compoent should be functional. - The created components do not support props as of now.
    > > > > > > > v2.0.0

---
_Source: https://npm.io/package/custom-error-boundary · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._