DEV Community

Cover image for Managing React-Native crashes with Error Boundaries
Carlos Cuesta
Carlos Cuesta

Posted on • Originally published at

Managing React-Native crashes with Error Boundaries

Originally posted at carloscuesta's blog

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 = () => (
    <Children />

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 😍


⚠️ 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!

Top comments (0)