React-Native ios App crashes without report

Question

I'm building an iOS app using React Native and trying to get it testable on phones.

If I plug my phone into the computer and "build" directly to the phone, the app is built correctly and opens/operates correctly, no problem.

But if I try to archive it and send it to phones using iTunes Connect's TestFlight or Fabric with Crashlytics, the app crashes immediately upon opening. It briefly shows the launch screen, but no more.

Moreover, there are no crash reports -- in TestFlight, in Crashlytics, or in XCode, once I plug the phone back in. So I'm operating in the dark here, without any information on what's breaking. Haven't been able to find a similar issue online, so I figured I'd just ask. Any ideas what could be going wrong?

Please let me know if there's any code or other data you might need to see. Some of it's confidential, but I'll try to post an approximate version.

Answer 1

As Chris Geirman suggested, the problem was a JavaScript error. I'm not sure people with similar problems will find this thread, but in case they do, here is the weird error that was occurring.

I had created a simple ORM system, with a BaseModel and a bunch of models that inherited from it. The BaseModel constructor looked like this:

  constructor(props = {}, relations = {}) {
    Object.keys(props).forEach((k) => {
      // Save props to object
      this[k] = props[k];
    });

    this.relations = relations;
    this.className = this.constructor.name;
  }

That last line was the problem. On my local simulator and if I build the app to my phone by plugging it in, this works fine. As in, if a Message model inherits from BaseModel, calling var msg = new Message(data, relations); msg.className returns Message.

But something about bundling/archiving/sending the app through TestFlight or Fabric.io minifies and uglifies the JavaScript, such that the class names are changed. So instead, if I do this -- var msg = new Message(data, relations); msg.className -- I'll get back a random variable name, something like 't'.

This was a problem in my app, because my home page contained a switch statement that worked off of the className:

iconContent() {
  return {
    Message: {
      icon: <Image style={styles.feedItemIconImage} source={ require('../assets/img/icon_message.png') } />,
      color: c.grass
    }, ...
  }[this.props.className] // from the model item
}

But 'Message' wasn't, as expected, the value of this.props.className -- 't' was. And so, if I were to try to tunnel into, say, the color value, I'd hit an error, because I was trying to access the color property of null.

Why that didn't report, I don't know (I followed Chris's suggestions and installed Sentry, but it still seemed not to report that error).

But that's what was going on. Minification/uglification occurred only when I installed the app on a phone via TestFlight/Fabric, and that's why the app only crashed in those conditions.

Hope this saves anyone running into a similar bug from tearing out their hair.

Answer 2

I'd like to share my own experience of production stage crash, whereas everything worked fine in development stage.

I had the similar problem which caused by the Reactotron logger. Since I'm not bundling it in production stage, a single line of console.tron.log crashed my app with full stealth. (Its kinda my fault, since I didn't give a damn about my linter with 'no-console' setting)

Here's the code snippet I introduce in my root level file, root.js.

  if (__DEV__) {
     ...
     console.tron = Reactotron;
     ...
  }

Hope somebody finds this before wasting time figuring out what's wrong.

Answer 3

Not sure if you still have this problem - but if you do, I'd recommend checking out Bugsnag for react native error reporting - which reports crashes in both the JavaScript layer as well as the native layers (java/cocoa).

One of the harder problems to solve in react native crash reporting (as Sasha mentioned) is restoring the original stack traces when using minification and/or obfuscation - this is handled in Bugsnag by providing full support for JS source maps, as well as iOS symbolication and Android Proguard support at the native layers.

Let me know if this helps - I'm a founder @ Bugsnag