website·Indexed 29 days ago
https://react-native-error-boundary.js.org/A library for implementing error boundaries in React Native. It provides an ErrorBoundary component to catch JavaScript errors in child component trees, allowing developers to log errors via the onError prop, recover from errors, and render custom fallback UIs using the FallbackComponent.
ErrorBoundary component. When a child component throws an error, the ErrorBoundary catches it and renders a fallback screen to notify the user, preventing the entire application from crashing.import ErrorBoundary from 'react-native-error-boundary'
const App = () => (
<ErrorBoundary>
<ChildrenThatCouldThrowEror />
</ErrorBoundary>
)react-native-error-boundary package using npm, yarn, or pnpm to add error boundary capabilities to your React Native project.npm install react-native-error-boundaryFallbackComponent property of the ErrorBoundary component. The FallbackComponent receives two props: error (the Error object) and resetError (a function to clear the error state and attempt a re-render).import ErrorBoundary from 'react-native-error-boundary'
import { View, Text, Button } from 'react-native'
const CustomFallback = (props: { error: Error, resetError: Function }) => (
<View>
<Text>Something happened!</Text>
<Text>{props.error.toString()}</Text>
<Button onPress={props.resetError} title={'Try again'} />
</View>
)
const App = () => (
<ErrorBoundary FallbackComponent={CustomFallback}>
<ChildrenThatCouldThrowEror />
</ErrorBoundary>
)
react-native-error-boundary package using your preferred package manager (npm, yarn, or pnpm) to add error boundary capabilities to your React Native project.npm install react-native-error-boundary
# or
yarn add react-native-error-boundary
# or
pnpm add react-native-error-boundaryonError callback function to the ErrorBoundary component. The onError function receives the Error object and the stackTrace as arguments, allowing you to capture and report crashes occurring within the wrapped component tree.import ErrorBoundary from 'react-native-error-boundary'
const errorHandler = (error: Error, stackTrace: string) => {
/* Log the error to an error reporting service like Sentry or Bugsnag */
console.log('Error caught:', error);
console.log('Stack trace:', stackTrace);
}
const App = () => (
<ErrorBoundary onError={errorHandler}>
<ChildrenThatCouldThrowEror />
</ErrorBoundary>
)react-native-error-boundary and react-error-boundary is the target platform. react-native-error-boundary is specifically designed for React Native and includes a default FallbackComponent built with React Native components, making it incompatible with React for the web. While react-error-boundary is more feature-rich and generally compatible with React Native, react-native-error-boundary provides a more tailored experience for mobile development.onError prop allows you to execute custom logic when an error is caught by the ErrorBoundary. The function receives two arguments: the error (of type Error) and the stackTrace (of type string).onError(error: Error, stackTrace: string): voidresetError function is passed to the FallbackComponent. Calling this function resets the error state of the boundary, allowing the application to attempt re-rendering the crashed component tree.resetError(): voidThe ErrorBoundary component accepts the following props to manage error catching and fallback UI:
Children (Required): The React children components that may throw an error.FallbackComponent (Optional): A custom React component to render when an error is caught. If not provided, the library uses a built-in default fallback component.onError (Optional): A callback function triggered when an error is caught. It provides the error object and the stack trace for logging or reporting purposes.ErrorBoundary component. To see the actual ErrorBoundary fallback UI during development, dismiss the red screen or press the Esc key.