こんにちは！2ちゃんねる互換掲示板システム「 つゔぁいちゃんねる（2ch.biz） 」の開発録、第49回です。

Webアプリケーションのデバッグにおいて、最も開発者を苦しめるのは「エラーメッセージが出るバグ」ではありません。
最も恐ろしいのは、 「エラーも出ず、通信も発生せず、何も起きないままUIが静かにフリーズするバグ」 です。

前回（第48回）までに、モバイル向けのドロワー式トグルメニューを実装し、UIの使い勝手は申し分ない状態になりました。
しかし、QAテスト中に突如として不可解な現象が報告されました。

「『既存の部屋に参加』タブでルームIDとパスワードを入れてボタンを押すと、 そのまま画面が固まって部屋に入れない！ 」
「Networkタブを見てもAPIリクエストすら飛んでいない。何が起きているのか全く分からない！」

ボタンを押してもサーバーへリクエストすら送信されない――。
本稿では、ブラウザの内部ストレージ（IndexedDB）のバージョンアップと接続ロックが引き起こしていた「目に見えないデッドロック」の真相と、非同期処理の完全非ブロッキング化による解決劇をお届けします！

1. 異変の観測：ネットワーク通信すら始まらない沈黙

通常、通信に失敗したのであれば fetch のエラーハンドラが動き、404や500のエラーが返るはずです。

しかし、今回のバグでは ブラウザのDevTools Networkタブが完全に無反応 でした。

コードを1行ずつブレークポイントで追跡したところ、入室関数の冒頭にある await this.historyStore.getRoomMeta(roomId) の行で、 Promiseの解決が永久に止まっている（ハングアップしている） ことが判明しました。

2. 原因究明：IndexedDB `open` に潜む「デッドロックの罠」

第47回で、私たちは部屋名を端末に保存するため、IndexedDBのスキーマバージョンを 1 から 2 に引き上げました（rooms オブジェクトストアの新設）。

実は、ここにブラウザの仕様による 巨大な落とし穴 がありました。

IndexedDBは、スキーマバージョンを変更（マイグレーション）する際、 「同一オリジン内で開かれているすべての古いバージョンのDB接続が完全にクローズされるまで、新しいDBオープンを保留（ブロック）する」 という極めて厳格な排他制御を行います。

ユーザーが掲示板の別タブを開いていたり、バックグラウンドに以前のチャットタブが残っていた場合、onblocked イベントが発生し、req.onsuccess コールバックが 1ミリ秒も発火しなくなっていたのです。

その結果、historyStore.readyPromise は永遠に未解決のままとなり、それに依存していた入室処理全体が道連れになってフリーズしていたのでした。

3. 解決策：非同期ストレージ待機でネットワークを絶対に止めるな

この教訓から私たちが導き出した鉄則は、 「チャットの入室という最優先のリアルタイム通信を、ローカルストレージの準備待ちに巻き込んではならない」 というアーキテクチャの分離でした。

4. 実装の全貌

(1) `getRoomMeta` の完全同期・非ブロッキング化

部屋名のメタデータは、重たいIndexedDBのオープンを待たずとも、ブラウザの同期ストレージ（localStorage）のインメモリキャッシュから 0ミリ秒で即座に取得・返却 できるように改修しました。

/**
 * 部屋メタデータの即時同期取得
 */
getRoomMetaSync(roomId) {
    try {
        const raw = localStorage.getItem(`p2p_room_meta_${roomId}`);
        if (raw) {
            return JSON.parse(raw);
        }
    } catch (e) {
        // 例外時も処理を止めない
    }
    return null;
}

(2) IndexedDB初期化のタイムアウト保護とブロック解除

initDB() において、1秒（1,000ms）経過してもDBが開かない場合は強制的にPromiseを解決し、インメモリモードで進行させます。また、onblocked および onversionchange を適切に処理して別タブとの競合を即座に解消します。

initDB() {
    return new Promise((resolve) => {
        let isResolved = false;

        // ★1秒タイムアウトガード：DBが詰まってもアプリ全体を道連れにしない！
        const timer = setTimeout(() => {
            if (!isResolved) {
                isResolved = true;
                console.warn('[STORAGE] IndexedDB open タイムアウト。インメモリモードで進行します。');
                resolve();
            }
        }, 1000);

        try {
            const req = indexedDB.open(this.dbName, 2);

            // 別タブが古い接続を開いている場合のブロック検知
            req.onblocked = () => {
                console.warn('[STORAGE] IndexedDB が別タブによってブロックされています。');
                if (!isResolved) {
                    isResolved = true;
                    clearTimeout(timer);
                    resolve();
                }
            };

            req.onupgradeneeded = (e) => {
                // スキーマ構築...
            };

            req.onsuccess = (e) => {
                this.db = e.target.result;

                // 別タブが新しいバージョンを開いた時は古い接続を自動で閉じる
                this.db.onversionchange = () => {
                    this.db.close();
                };

                if (!isResolved) {
                    isResolved = true;
                    clearTimeout(timer);
                    resolve();
                }
            };

            req.onerror = () => {
                if (!isResolved) {
                    isResolved = true;
                    clearTimeout(timer);
                    resolve();
                }
            };
        } catch (err) {
            if (!isResolved) {
                isResolved = true;
                clearTimeout(timer);
                resolve();
            }
        }
    });
}

(3) 入室ハンドラの例外完全防御

ボタン押下時のイベントリスナー全体を try-catch で包み込み、いかなる想定外のエラーが発生してもローディングスピナーを解除して親切なメッセージを表示するようにしました。

5. 自動テストによるハングアップ防止の検証

テストスクリプトを実行し、あえてIndexedDBをロック・未解決状態にした環境で入室ボタンを押すシミュレーションを行いました。

テスト環境	修正前	修正後（本改修）
正常系	入室成功（約200ms）	入室成功（約20ms： 10倍高速化）
別タブが古いDBを開いている時	永久フリーズ（画面沈黙）	0ms でシグナリングへ直行し即座に入室成功！
IndexedDBが無効なシークレットモード	エラーで停止	インメモリにフォールバックして問題なく稼働

6. まとめと次回予告

「ストレージの非同期待機に、リアルタイムな通信を巻き込んではならない」――。
IndexedDBのマイグレーションと排他ロックが引き起こしたサイレントハングを、タイムアウトガードと同期キャッシュの二重構造によって完全に解消しました。

これで通信の信頼性は盤石になりました。
しかし、チャットが広く使われるようになるにつれ、今度は 「プライバシーに関する衝撃的なセキュリティインシデント」 が発覚します。

「スレッドに貼られた招待URLを踏んでチャットに入ると、 ブラウザのアドレスバーにパスワード（合言葉）が丸見えのまま残っている！ 」
「そのURLを別のスレにコピペした瞬間、秘密の合言葉まで全員に漏洩してしまう！」

次回は、 【第050回】招待URLから合言葉が漏洩する大ピンチ！アドレスバーの&key=完全撤去とメモリ内管理 をお届けします。お楽しみに！

本番サービス : https://2ch.biz/