Unable to load script エラーを修正（React Native / Android）

1. 問題

React Native を Metro Bundler と組み合わせて使用し、Proxyman や Charles Proxy も併用していると、次のエラーが表示されることがあります：

Unable to load script. Make sure you're either running Metro (run 'npx react-native start') or that your bundle index.android.bundle is packaged correctly for release.

このエラーは、Metro Bundler が 10.0.2.2:8081 に接続しようとした際に、Proxyman と Charles Proxy がそのリクエストを正しく処理できないために発生します。

2. ✅ 解決方法（推奨）

最新の Proxyman をダウンロードしてください。Metro の修正は Proxyman 5.9.0 以降に含まれているため、古いベータ版はもう必要ありません。
Android セットアップガイドを使ってエミュレータのプロキシを設定してください。それでも Metro が読み込めない場合は、ローカルの Metro アドレスをプロキシのバイパスリストに追加し、バンドルの通信がエミュレータと Mac の間だけで行われるようにしてください。
プロキシを変更したら、Metro を再起動してアプリを再読み込みしてください。

Android 向けの React Native Metro Bundler に対応した Proxyman 5.9.0

3. 非推奨の解決方法

Map Remote ツールで 10.0.2.2:8081 から 127.0.0.1:8081 へ手動でマッピングすることでも、この問題は解決できます。
手順は以下のとおりです：

Proxyman を開き、Tools → Map Remote の順に選択します。
以下の設定で新しいマッピングを作成します：

Rule: http://10.0.2.2:8081
「Include all subpath」にチェックを入れる
Method で「ANY」を選択
Protocol: http
Host: 127.0.0.1
Port: 8081
「Done」をクリック

Certificate メニュー → Install for Android → Emulator の順に選択し、「Override Emulator」をクリックします。プロキシの設定と証明書のインストールが 1 クリックで自動的に行われます。
Metro Bundler を再読み込みします。
完了：Metro Bundler のエラーは表示されなくなります ✅

4. Charles Proxy の場合の解決方法

基本的には Proxyman と同じですが、10.0.2.2:8081 から 127.0.0.1:8081 への Map Remote ツールを手動で設定する必要があります。Map Remote は Tools メニュー → Map Remote... から開けます。

5. Android エミュレータの HTTPS リクエスト/レスポンスを復号する方法（React Native・Metro Bundler）

Proxyman を開き、Certificate メニュー → Install for Android → Emulator の順に選択して、Override Emulator をクリックします。プロキシの設定と証明書のインストールが 1 クリックで自動的に行われます。

Android Studio を開き、Import を選択して、プロジェクト内の android フォルダを選択します。Android Studio がすべての依存関係の読み込みを終えるまで待ちます。
app/src/main/res フォルダ内に xml という名前の新しいフォルダを作成し、その中に network_security_config.xml という新しいファイルを作成します。
network_security_config.xml に以下のコードを追加します：

<network-security-config>
  <debug-overrides>
    <trust-anchors>
      <!-- Trust user added CAs while debuggable only -->
      <certificates src="user" />
      <certificates src="system" />
    </trust-anchors>
  </debug-overrides>

  <base-config cleartextTrafficPermitted="true">
    <trust-anchors>
      <certificates src="system" />
      <certificates src="user" />
    </trust-anchors>
  </base-config>
</network-security-config>

AndroidManifest.xml を開き、application タグに以下のコードを追加します：

android:networkSecurityConfig="@xml/network_security_config"

完了です。Metro Bundler を再読み込みして、SSL 通信のキャプチャを開始してください。

6. iOS シミュレータの HTTPS リクエスト/レスポンスを復号する方法（React Native・Metro Bundler）

Android よりずっと簡単です。iOS では、シミュレータから HTTPS 通信をキャプチャするための追加の設定は必要ありません。

Proxyman を開き、Certificate メニュー → Install for iOS → Simulator の順に選択して、Override Simulator をクリックします。プロキシの設定と証明書のインストールが 1 クリックで自動的に行われます。

完了です。Metro Bundler を再読み込みして、SSL 通信のキャプチャを開始してください。

次のステップ

実機の iOS デバイスでインターセプトしたい場合は、こちらのドキュメントをご覧ください: Proxyman で iOS 実機の HTTPS 通信をキャプチャする方法

10.0.2.2 を Mac のホストアドレスとして使うのは、標準の Android エミュレータの場合だけです。実機の Android デバイスでは、同じネットワーク上の Mac の IP アドレスを使う必要があります。network_security_config.xml はデバッグビルドに限定し、リリースビルドではユーザーが追加したすべての証明書を信頼しないようにしてください。

Noah Tran

2024年9月16日