React ネイティブ アプリでの単純な致命的な例外

それは予定通りに展開した、典型的な金曜日の夜でした。 React Native アプリの最新バージョンは、Play Console 経由で本番環境にプッシュされ、ユーザーの 30% を対象とした制御されたロールアウトが行われました。しかし、Google Analytics ダッシュボードに重大なアラートが表示されたとき、私たちの日常的な感覚は突然打ち砕かれました。クラッシュなしのユーザー率は 99% から 92% に急落しました。この驚くべき落下によりコードレッドの状況が引き起こされました。

私の信じられないほど勤勉なチームのおかげで、真夜中であっても、すぐに電話で招集することができました。 Google Crash Analytics ツールを活用して、スタック トレースを分析し、画面全体でのユーザーの行動を追跡しました。これらの洞察にもかかわらず、クラッシュを再現するための一貫したパターンを特定することはできませんでした。唯一考えられる理論は、コード内の誤った早期の return ステートメントが原因である可能性があるというものでした。

バグの発見
ユーザーの行動に認識できるパターンがなかったため、コードベースのバージョンの差分に注目しました。私たちはコードのすべての行を細心の注意を払ってレビューし、150 を超える Git の差分を徹底的に調べて異常を検索しました。しかし、とらえどころのない早期復帰声明は依然として検出されなかった。それでも、私たちは一連の最適化を実装し、更新を運用環境にプッシュしました。事故は 12 時間後に再発しましたが、その頻度は大幅に減少しました。

突破口は予期せず訪れました。別の機能の作業中に、インターネット接続が一時的にオフラインになり、たまたまアプリを開いたままにしました。驚いたことに、致命的なエラーが目の前に現れました。

間違い

  const {isConnected} = netState();
   if (!isConnected){
    return;
  }
  const calculateMyView = useCallback(() => {
    // ...some code
  },[]);

広範なデバッグを行った結果、コンポーネントの 1 つに深く埋め込まれた初期の return ステートメントに問題があることが判明しました。この微妙なバグにより、特定の状況下でクラッシュが発生しました。つまり、ユーザーが安定したインターネット接続に再接続し、コンポーネントが再レンダリングを試行したときです。

内部では何が起こっていますか?
初期レンダリング
最初のレンダリング中に、React は呼び出された正確な順序で各フック (useCallback など) を登録します。フックは内部リストに保存され、コンポーネント ツリー内の位置によってインデックスが付けられます。
その後のレンダリング
再レンダリングの際、React はフックが同じ順序で同じ位置で呼び出されることを期待します。この順序が変わると (たとえば、フックの実行をスキップする早期の return ステートメントが原因で)、内部リストの位置がずれてしまいます。その後、React は実行されなかったフック (位置 1 など) にアクセスしようとします。その結果、エラーが発生します。
com.facebook.react.common.JavascriptException として識別されるこのクラッシュは、React がレンダリングするフックの数が予想よりも少なかったために発生しました。これは、初期リターンが間違って配置されたためにステートフル ロジックがスキップされる典型的な症状です。この動作は、レンダリング間でフックの実行順序が一貫していることを要求する React のフックのルールに違反していました。その結果、スタック上にこの画面を持つユーザーは、インターネット接続が切断されるとクラッシュに遭遇することになります。

修正

  const {isConnected} = netState();
   if (!isConnected){
    return;
  }
  const calculateMyView = useCallback(() => {
    // ...some code
  },[]);

この問題を解決するために、リターン ステートメントがフックの実行フローを中断しないようにロジックを並べ替えました。この調整を行うことで、React の宣言原則を遵守し、再レンダリング プロセスを安定させ、クラッシュを排除しました。

この経験は、React のフックのルールに従い、レンダリング ロジック内で条件付きリターンを回避することの重要性を強く思い出させてくれました。これらの原則は、React アプリケーションの整合性と安定性を維持するために重要です。

以上がReact ネイティブ アプリでの単純な致命的な例外の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。