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.