この記事を作った動機

　Websocket を使ったフロントエンドで、自動的に接続が途切れたら再接続するコードを書くときに躓いたので、その記録をする。

Websocket の接続に関するエラーハンドリング

　Websocket が接続失敗したときに、やらせたい処理がある場合は、try-catch は使えない。接続に関する問題に対処するには、コールバック関数として、“error"イベントが発火されたときに処理を登録する必要がある。

　Websocket は、非同期で実行されるため try-catch では接続できなかったときのエラーを拾えないようである。

うまくいかない例

// この例だと、reconnect 関数が実行されることはない。この形だと、WebScoket クラスに渡したパラメータ異常しか拾えない。
const setWebsocket = useDatabaseStore.setState;
try{
    const websocket = new WebSocket("ws://localhost:50097")
    setWebsocket({ websocket: websocket })    
}catch(e){
    console.log(e)
    reconnect()
}

うまくいく例

const setWebsocket = useDatabaseStore.setState;
const websocket = new WebSocket("ws://localhost:50097")
websocket.onerror = () => {
    reconnect()
}
setWebsocket({ websocket: websocket })    

const setWebsocket = useDatabaseStore.setState;
const websocket = new WebSocket("ws://localhost:50097")
websocket.addEventListener("error",reconnect)
setWebsocket({ websocket: websocket })

参考にしたサイトとか