react-native-error-boundary
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.12 • Public • Published

    react-native-error-boundary

    Build Status Codecov Npm Version Npm Downloads

    A simple and reusable React-Native error boundary component 🐛

    Install

    yarn add react-native-error-boundary

    Usage

    This component catches JavaScript errors anywhere in their child component tree. Native errors are not handled.

    Using this component is really simple. First you have to import the ErrorBoundary component. Then, you have to wrap it around any component that could throw an error.

    Basic

    import ErrorBoundary from 'react-native-error-boundary'
    
    const App = () => (
      <ErrorBoundary>
        <ChildrenThatCouldThrowEror />
      </ErrorBoundary>
    )

    Logging errors

    You can log the error by providing an onError function to the component.

    import ErrorBoundary from 'react-native-error-boundary'
    
    const errorHandler = (error: Error, stackTrace: string) => {
      /* Log the error to an error reporting service */
    }
    
    const App = () => (
      <ErrorBoundary onError={errorHandler}>
        <ChildrenThatCouldThrowEror />
      </ErrorBoundary>
    )

    Custom fallback component

    You can customize the appearance of the fallback component by providing the FallbackComponent prop.

    import ErrorBoundary from 'react-native-error-boundary'
    
    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></ChildrenThatCouldThrowEror>
      </ErrorBoundary>
    )

    API

    ErrorBoundary

    These are the props that the ErrorBoundary component accepts:

    Property Type Required Default Description
    children React.Children true Components that may throw an error
    FallbackComponent React.Component false FallbackComponent UI rendered when there's an error
    onError Function false Function for logging the error

    FallbackComponent

    These are the props that the FallbackComponent receives:

    Property Type Default Description
    error Error The thrown error
    resetError Function A function to reset the error state

    Examples

    Demo

    react-native-error-boundary

    FAQ

    Install

    npm i react-native-error-boundary

    DownloadsWeekly Downloads

    7,899

    Version

    1.1.12

    License

    MIT

    Unpacked Size

    15.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • carloscuesta