Managing React-Native crashes with Error Boundaries

Managing React-Native crashes with Error Boundaries

4 min read

React 16 released a new concept called Error Boundary. This concept introduces a new way to catch JavaScript errors šŸ› in a React project.

In this post I'm going to explain why it's important and how you can use error boundaries in a React-Native application to improve error resiliency, so let's get into it! šŸ‘Øā€šŸ’»

#Why you should use them ?

According to the official React docs šŸ“˜:

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree šŸ˜±.

Unmounting the whole React component tree, means that if you don't catch errors at all the user will see an empty white screen šŸ’„. Most of the time without having any feedback. This is not a great UX āŒ, fortunately you can fix this by using Error Boundaries āœ….

React-Native unmounted component tree error

#How to use Error Boundaries

To benefit from Error Boundaries, we'll have to create a stateful component that will use the following lifecycle methods ā™»ļø:

So let's create the component that will catch errors in our application:

class ErrorBoundary extends React.Component {
  state = { hasError: false }

  static getDerivedStateFromError (error) {
    return { hasError: true }
  }

  componentDidCatch (error, info) {
    logErrorToService(error, info.componentStack)
  }

  render () {
    return this.state.hasError
      ? <FallbackComponent />
      : this.props.children
  }
}

Pretty simple right? With a few lines of code, you can catch errors on your React-Native app šŸŽ‰

To use it, all you need to do now is to wrap it around any component that could throw an error.

const App = () => (
  <ErrorBoundary>
    <Children />
  </ErrorBoundary>
)

This component will catch all the errors that are thrown by any of his children. A common thing is to use it at the top level of your application šŸ” to catch anything without having to use it on every screen or route šŸ‘

That's how our FallbackComponent looks whenever an error is thrown by our application šŸ˜

react-native-error-boundary

āš ļø Error Boundaries only catch JavaScript errors, all the native crashes that your application might have are not handled.

#Introducing react-native-error-boundary

Few months ago, I created a simple, flexible and reusable React-Native error boundary component. Take a look into it šŸ‘€ if you're thinking about adding error boundaries to your app!


Did you enjoyed the article ?
Subscribe to the newsletter šŸ‘Øā€šŸ’»

Be the first to know when I write something new! If you don't like emails, you can follow me on twitter.