web-dev-qa-db-ja.com

React-Native iOSアプリがレポートなしでクラッシュする

React Nativeを使用してiOSアプリを構築していて、電話でテストできるようにしています。

携帯電話をコンピューターに接続して、直接「ビルド」すると、アプリは正しくビルドされ、正しく開いたり動作したりします。問題ありません。

しかし、それをアーカイブしてiTunes ConnectのTestFlightまたはCrashlyticsを備えたファブリックを使用して電話に送信しようとすると、アプリを開くとすぐにクラッシュします。起動画面が簡単に表示されますが、それ以上は表示されません。

さらに、クラッシュレポートはありません-TestFlight、Crashlytics、またはXCodeでは、電話を接続し直すと、何が壊れているかについての情報なしに、ここで暗闇の中で作業しています。オンラインで同様の問題を見つけることができなかったので、私は質問したいと思った。何がうまくいかないのでしょうか？

確認する必要があるコードやその他のデータがあるかどうかをお知らせください。一部は機密情報ですが、おおよそのバージョンを投稿してみます。

iosxcodereact-nativecrashlyticstwitter-fabric
21
Sasha

Chris Geirmanが示唆したように、問題はJavaScriptエラーでした。同様の問題を抱えている人がこのスレッドを見つけることができるかどうかはわかりませんが、そうした場合に備えて、発生していた奇妙なエラーを以下に示します。

私は、BaseModelと、そこから継承した一連のモデルを使用して、シンプルなORMシステムを作成しました。 BaseModelコンストラクターは次のようになります。

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

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

その最後の行が問題でした。私のローカルシミュレーターで、プラグインして携帯電話にアプリをビルドした場合、これは正常に機能します。同様に、メッセージモデルがBaseModelから継承する場合、var msg = new Message(data, relations); msg.classNameを呼び出すとMessageが返されます。

しかし、TestFlightまたはFabric.ioを介してアプリをバンドル/アーカイブ/送信することで、クラス名が変更されるように、JavaScriptを縮小しuglifyingします。したがって、代わりにこれを行うと、_var msg = new Message(data, relations); msg.className-'t'のようなランダムな変数名が返されます。

これは私のアプリの問題でした。私のホームページにはclassNameから機能するswitchステートメントが含まれていたからです。

_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
}
_

しかし、_'Message'_は、予想どおり、_this.props.className_の値ではありませんでした-_'t'_はそうでした。そして、たとえば、colorのcolorプロパティにアクセスしようとしたため、null値にトンネルで通ろうとした場合、エラーが発生します。

なぜそれが報告されなかったのかはわかりません（Chrisの提案に従い、Sentryをインストールしましたが、まだそのエラーを報告していないようです）。

しかし、それが起こっていたのです。縮小/醜化が発生しましたのみ TestFlight/Fabricを介して電話にアプリをインストールしたとき、そのためアプリはこれらの条件でのみクラッシュしました。

これにより、同様のバグに遭遇した人が髪を引き裂く手間を省けることを願っています。

12
Sasha

開発段階ではすべてがうまくいったのに対して、私は生産段階でのクラッシュの自分自身の経験を共有したいと思います。

Reactotronロガーによって引き起こされる同様の問題がありました。本番環境ではバンドルしていないため、console.tron.logの1行でアプリが完全にステルスでクラッシュしました。 （「コンソールなし」設定で私のリンターについて気にしなかったので、それはちょっと私のせいです）

これが、ルートレベルのファイルroot.jsに導入したコードスニペットです。

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

誰かが何が悪いのかを理解するのに時間を費やす前にこれを見つけてくれることを願っています。

2
eden

この問題がまだあるかどうかはわかりませんが、ある場合は、Bugsnagをチェックして、 react native error reporting -JavaScriptレイヤーとネイティブレイヤー（Java /ココア）。

（Sashaが述べたように）ネイティブクラッシュレポートに対応して解決するのがより難しい問題の1つは、縮小化または難読化を使用するときに元のスタックトレースを復元することです-これは、JSソースマップとiOSシンボリケーションの完全なサポートを提供することにより、Bugsnagで処理されますおよびAndroidネイティブレイヤーでのProguardサポート。

これが役立つかどうか私に知らせてください-私はBugsnagの創設者です

1
loopj