React Native ErrorBoundary

A simple and customizable ErrorBoundary for React Native applications (React Native Error Boundary) that helps catch and handle unexpected errors in your app. You can provide a custom error message, an onError callback, and a custom render for the error UI.

Features

• Catch JavaScript errors anywhere in the React Native app and handle them.
• Option to display a custom error UI or message.
• Option to pass an onError callback for custom error handling (e.g., logging errors).
• Toggle to display the error stack trace.

Installation

You can install this component via npm or yarn:

npm install @el173/react-native-error-boundary

or

yarn add @el173/react-native-error-boundary

Usage

Wrap your app (or part of it) with the ErrorBoundary component. Here's an example usage:

Basic Usage

import React from 'react';
import { Text } from 'react-native';
import ErrorBoundary from '@el173/react-native-error-boundary';

const App = () => {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
};

const MyComponent = () => {
  throw new Error("This is a test error!"); // Example error
  return <Text>Hello World!</Text>;
};

export default App;

Custom Error Message

You can provide a custom error message to display when an error occurs:

<ErrorBoundary message="Something went wrong! Please try restarting the app.">
  <MyComponent />
</ErrorBoundary>

Custom onError Callback

You can pass a custom onError callback to log errors or handle them in any other way:

<ErrorBoundary 
  onError={(error, isFatal) => {
    console.log("Error caught:", error);
    console.log("Is fatal:", isFatal);
  }}
>
  <MyComponent />
</ErrorBoundary>

Custom Error UI

You can define your own error UI by passing the renderError prop:

<ErrorBoundary
  renderError={(error, errorInfo) => (
    <View>
      <Text style={{ color: 'red' }}>An error occurred: {error.toString()}</Text>
      <Text>{errorInfo}</Text>
    </View>
  )}
>
  <MyComponent />
</ErrorBoundary>

Props

Prop Name	Type	Description
children	ReactNode	The child component(s) to be wrapped by the error boundary.
renderError	(error: Error, errorInfo?: string) => ReactNode	A function to render a custom error UI. errorInfo includes the stack trace of the error.
message	string	A custom error message to display if no renderError is provided.
enableOriginalHandler	boolean	If true, the original global error handler will be invoked in addition to the custom handler (defaults to false).
onError	(error: Error, isFatal?: boolean) => void	A callback that gets invoked whenever an error is caught. You can use this for logging or custom error handling logic.
showStackTrace	boolean	Controls whether the stack trace should be displayed. Defaults to false. When true, a button is provided to toggle stack trace visibility.

License

MIT