Dealing with global errors in React-Native Expo as simple as possible

Ok, I know you will send me these links:

• https://docs.expo.io/versions/latest/sdk/error-recovery.html
• https://docs.expo.io/versions/latest/guides/errors.html

But be honest with me: did you really understand how it works? Because the documentation is sooo superficial =/.

Here in our project we faced the following challenge:

We are now releasing a new major version that could cause incompatibility with previous saved data in Keychain (iOS). To solve this, just logout the user if the app crashes. After the new login, the data will be updated to the new version.

New versions of iOS kept the Keychain data EVEN you uninstall the app. So, in our case, after the crash, uninstall and install the app will not solve the problem.

After some search in stackoverflow, we discover the ErrorUtils from React-Native.

Using ErrorUtils

The first try was frustrating, because the ErrorUtils exist into react-native exports:

Try to use this will fall into undefined errors.

I forgot this is a interface exposed to TS files ¬¬’

The ErrorUtils is a global property in React-Native projects, you can use it directly.

First, store the default error handler:

const defaultErrorHandler = ErrorUtils.getGlobalHandler()

Create a function that will be called when nonHandled errors occurs:

const myErrorHandler = (e, isFatal) => {
  // e: the error throwed
  // isFatal: if the error is fatal and will kill the app
  // define your code here...
  // after all, if you want to forward to default error handler
  // just call the variable we stored in the previous step
  defaultErrorHandler(e, isFatal)
}

Now, just define your error handler as the default handler:

ErrorUtils.setGlobalHandler(myErrorHandler)

In our case, we used this to store the last error in AsyncStorage and, when the app is restarted, we check if the last error stored indicates we need to logout the user.

That’s it!