ERR_NETWORK_CHANGED の原因と解決策

概要

ERR_NETWORK_CHANGEDは、ページの読み込み中にネットワーク接続が変更された場合に発生するエラーです。WiFiとモバイルデータの切り替え、VPNの接続/切断などが原因となります。

エラーメッセージ

A network change was detected.
ERR_NETWORK_CHANGED

または

ネットワークの変更が検出されました。
ページを再読み込みしてください。
ERR_NETWORK_CHANGED

原因

WiFi/モバイルデータの切り替え: 自動切替時
VPNの接続/切断: VPN状態の変化
ネットワークインターフェースの変更: 有線/無線の切り替え
IPアドレスの変更: DHCPリース更新
ネットワークの不安定: 一時的な接続断

解決策

1. ページを再読み込み

最も簡単な解決策:
- F5 または Ctrl+R (Cmd+R on Mac)
- ブラウザの更新ボタンをクリック

キャッシュを無視して再読み込み:
- Ctrl+Shift+R (Cmd+Shift+R on Mac)

2. ネットワーク接続を安定化

WiFi:
- 電波の強いアクセスポイントに接続
- 2.4GHz と 5GHz を手動で選択
- 自動切り替えを無効化（設定による）

モバイル:
- WiFi Assistを無効化（iOS）
- モバイルデータの自動切り替えを無効化

3. VPN設定の確認

VPN使用時:
- キルスイッチの設定を確認
- 自動再接続機能の確認
- スプリットトンネリングの設定

一時的な解決策:
- VPNを一時的に切断してテスト
- 別のVPNサーバーに接続

4. 開発者向け: ネットワーク変更の検出

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// Online/Offline イベント
window.addEventListener('online', () => {
  console.log('オンラインになりました');
  // 保留中のリクエストを再送信
  retryPendingRequests();
});

window.addEventListener('offline', () => {
  console.log('オフラインになりました');
  // リクエストをキューに追加
  showOfflineMessage();
});

// 現在の状態
console.log('Online:', navigator.onLine);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// Network Information API（対応ブラウザのみ）
if ('connection' in navigator) {
  const connection = navigator.connection;

  console.log('接続タイプ:', connection.effectiveType); // 4g, 3g, 2g, slow-2g
  console.log('ダウンリンク:', connection.downlink, 'Mbps');
  console.log('RTT:', connection.rtt, 'ms');

  connection.addEventListener('change', () => {
    console.log('ネットワーク状態が変更されました');
    console.log('新しい接続タイプ:', connection.effectiveType);
  });
}

5. 堅牢なリクエスト処理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// リトライ機能付きfetch
async function resilientFetch(url, options = {}, maxRetries = 3) {
  let lastError;

  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);
      return response;
    } catch (error) {
      lastError = error;

      // ネットワーク変更の場合は少し待ってリトライ
      if (error.message.includes('network') || !navigator.onLine) {
        await new Promise(resolve => setTimeout(resolve, 1000 * (attempt + 1)));

        // オンラインになるまで待機
        if (!navigator.onLine) {
          await new Promise(resolve => {
            window.addEventListener('online', resolve, { once: true });
          });
        }
      } else {
        throw error;
      }
    }
  }

  throw lastError;
}

6. Service Worker でオフライン対応

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// service-worker.js
self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request)
      .catch(() => {
        // ネットワークエラー時はキャッシュから返す
        return caches.match(event.request)
          .then(response => {
            if (response) {
              return response;
            }
            // キャッシュにない場合はオフラインページ
            return caches.match('/offline.html');
          });
      })
  );
});

Chrome の設定確認

ネットワーク関連の設定:
1. chrome://flags で検索
2. "Network Service" 関連の設定を確認

ネットワーク状態の確認:
1. chrome://net-internals/#events
2. ネットワークイベントのログを確認

モバイルアプリ開発者向け

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// iOS - Network Reachability
import Network

let monitor = NWPathMonitor()
monitor.pathUpdateHandler = { path in
    if path.status == .satisfied {
        if path.usesInterfaceType(.wifi) {
            print("WiFi接続")
        } else if path.usesInterfaceType(.cellular) {
            print("モバイルデータ接続")
        }
    } else {
        print("接続なし")
    }
}
let queue = DispatchQueue(label: "NetworkMonitor")
monitor.start(queue: queue)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Android - ConnectivityManager
val connectivityManager = getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager

val networkCallback = object : ConnectivityManager.NetworkCallback() {
    override fun onAvailable(network: Network) {
        // ネットワーク利用可能
    }

    override fun onLost(network: Network) {
        // ネットワーク切断
    }

    override fun onCapabilitiesChanged(
        network: Network,
        capabilities: NetworkCapabilities
    ) {
        val isWifi = capabilities.hasTransport(NetworkCapabilities.TRANSPORT_WIFI)
        val isCellular = capabilities.hasTransport(NetworkCapabilities.TRANSPORT_CELLULAR)
    }
}

connectivityManager.registerDefaultNetworkCallback(networkCallback)

概要

エラーメッセージ

原因

解決策

1. ページを再読み込み

2. ネットワーク接続を安定化

3. VPN設定の確認

4. 開発者向け: ネットワーク変更の検出

5. 堅牢なリクエスト処理

6. Service Worker でオフライン対応

Chrome の設定確認

モバイルアプリ開発者向け

Browser の他のエラー