# react-native-component-boundary

> React-Native error boundary component

Latest version **1.1.2** (published 2023-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-component-boundary
pnpm add react-native-component-boundary
yarn add react-native-component-boundary
bun add react-native-component-boundary
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2023-09-14 |
| First published | 2023-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | sitorhy |
| Maintainers | sitorhy |

## Links

- npm: https://www.npmjs.com/package/react-native-component-boundary
- Repository: https://github.com/sitorhy/react-native-component-boundary
- Homepage: https://github.com/sitorhy/react-native-component-boundary#readme
- Issues: https://github.com/sitorhy/react-native-component-boundary/issues
- npm.io page: https://npm.io/package/react-native-component-boundary

## Recent versions

- 1.1.2 (latest) — 2023-09-14
- 1.1.1 — 2023-09-12
- 1.0.2 — 2023-08-03
- 1.0.1 — 2023-08-03
- 1.0.0 — 2023-08-03

## README

# react-native-component-boundary

React native error boundary component.

## Usage

```javascript
import useErrorBoundary from 'react-native-component-boundary';
import ReactNative from 'react-native';

export default useErrorBoundary(ReactNative, {
    fallbackRender: function (fallback) {
         Alert.alert("Uncaught Exception", `${fallback.pointcut ? fallback.pointcut.name : ""}\n${fallback.error}\n${fallback.errorInfo ? fallback.errorInfo.componentStack : ""}`);
    },
    fallbackComponent: function (fallback) {
        return React.createElement(ReactNative.Text, {style: {color: 'red'}}, `${fallback.pointcut.name}: ${fallback.error}`);
    }
});
```
import at the top of the entry point.
```javascript
import 'path/useErrorBoundary';

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

// ....
```

## Watch custom component
```javascript
import ErrorBoundary from "path/useErrorBoundary";

function BadComponent() {
    return <Text>{[1, 2, null].map(i => i.toString()).join(' ,')}</Text>
}

export default ErrorBoundary.withErrorBoundary({
    component: BadComponent,
    name: 'BadComponent'
});
```
```javascript
import BadComponent from "path";

function App() {
    return (
        <View>
            <BadComponent/>
        </View>
    );
}
```
## Fallback properties
+ error: Error;
+ errorInfo?: React.ErrorInfo;
+ pointcut: { name:string, component: React.ComponentType };
+ resetError?: Function

## Inside component handler
catch asynchronous code.
```javascript
export default useErrorBoundary(ReactNative, {
    enable: true,
    components: [
        {
            name: "Text",
            handlers: ["onPress", "onPressIn", "onPressOut"]
        }
    ],
    fallbackRender: function (fallback) {
        // ...
    },
    fallbackComponent: function (fallback) {
        // ...
    }
});
```

## Note: React.Children as a prop
The children node as a prop has already been created by parent component.
The exception from parent component cannot be caught in the child component.
```javascript
function SimpleComponent({ children }) {
    return (
        <View>
            { children }
        </View>
    );
}

const BadPracticeComponent = ErrorBoundary.withErrorBoundary({
    component: SimpleComponent,
    name: 'BadPracticeComponent'
});

// There is no perfect solution to save fucking code
<BadPracticeComponent>
    <Text>{ [null][0].toString() }</Text>
</BadPracticeComponent>
```
Is not recommend to use logic inside render.
```javascript
function getRenderText() {
    try {
        // ....
        return "Normal";
    } catch (e) {
        return "Error";
    }
}

// follow the best practices
<BadPracticeComponent>
    <Text>{ getRenderText() }</Text>
</BadPracticeComponent>
```

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