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 ✅.
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 ♻️:
-
getDerivedStateFromError
: This method is going to update the component state to display a fallback UI. -
componentDidCatch
: This method should be used to log the error to an external service.
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 😍
⚠️ 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)