1. 導入：なぜエラーハンドリングが重要なのか
リアルタイム通信を行うWebSocketは、非常に便利な技術ですが、ネットワークの不安定さやサーバー側のトラブルによって接続が切断されることは避けられません。もしエラー処理を怠ると、ユーザーは「画面が動かなくなった」という理由がわからず困惑してしまいます。WebSocket.prototype.onerrorを正しく実装することで、接続失敗を即座に検知し、ユーザーに適切な通知や再接続処理を行うことが可能になります。
2. 基礎知識：onerrorとは何か
WebSocketの通信には「接続中」「メッセージ受信」「エラー」「切断」というライフサイクルが存在します。onerrorは、その名の通り「接続が失敗したとき」や「通信中にエラーが発生したとき」に呼び出されるイベントハンドラーです。
JavaScriptでは、WebSocketオブジェクトのインスタンスに対して、このonerrorプロパティに関数を代入することで、エラー発生時の挙動を定義します。
3. 実装：エラーハンドリングの基本手順
実装は非常にシンプルです。WebSocketインスタンスを作成した後、onerrorプロパティに、エラー発生時に実行したい処理（コールバック関数）を登録するだけです。
具体的には、以下の3ステップで行います。
1. WebSocketオブジェクトを作成する。
2. onerrorプロパティに関数を割り当てる。
3. エラー発生時にログの出力や、ユーザーへのアラート、あるいは自動再接続のロジックを呼び出す。
4. サンプルプログラム
以下のコードをコピーして、ブラウザのコンソールなどで実行してみてください。接続先が存在しない場合などにエラーが検知される様子がわかります。
// WebSocketの接続先（存在しないURLを指定してエラーを発生させる例）
const socket = new WebSocket('ws://invalid-url.example.com');
// エラーハンドリングの設定
socket.onerror = function(event) {
// eventオブジェクトにはエラーに関する詳細情報が含まれます
console.error("WebSocketでエラーが発生しました:", event);
// ユーザーへの通知や、UIの更新処理をここに記述します
alert("通信エラーが発生しました。時間を置いて再度お試しください。");
};
// 接続成功時の処理も併せて記述するとより丁寧です
socket.onopen = function() {
console.log("接続に成功しました！");
};
5. 応用・注意点：現場で陥りやすい罠
現場の開発で最も重要なのは、onerrorが発生した後の挙動です。
・自動再接続の罠：エラーが発生した直後に無限ループで再接続を試みると、サーバーに過度な負荷をかけてしまう「スパム的再接続」が発生します。再接続を行う場合は、必ず「指数バックオフ（徐々に間隔を広げて再試行する）」アルゴリズムを導入しましょう。
・エラー情報の制限：セキュリティ上の理由から、onerrorのイベントオブジェクトには詳細なエラー内容（なぜ失敗したか）が含まれないことが一般的です。ブラウザのコンソールを確認しつつ、サーバー側でログを記録する仕組みを併用するのがベストプラクティスです。
・接続状態の確認：onerrorが呼ばれた後は、WebSocketのreadyStateを確認し、確実に接続を閉じる（close）処理を行うようにしましょう。