fix: catch and handle websocket error (#11991)

[samelie]

Description

By attaching a listener to the error event on the socket instance rather than the server, we're catching and not letting it crash the node process.

This happens when the computer goes to sleep and wakes up.

More here #11991

Tested on a React app, running on /login

Below is the error unhandled, see the node crash.

VITE v4.1.1 ready in 648 ms

➜ Local: https://localhost:3001/login
 ➜ Network: use --host to expose
 ➜ press h to show help
node:events:491
throw er; // Unhandled 'error' event
^

RangeError: Invalid WebSocket frame: invalid status code 1006
at Receiver.controlMessage (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:55108:18)
at Receiver.getData (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:54984:42)
at Receiver.startLoop (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:54700:22)
at Receiver._write (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:54626:10)
 at writeOrBuffer (node:internal/streams/writable:392:12)
 at _write (node:internal/streams/writable:333:10)
 at Writable.write (node:internal/streams/writable:337:10)
at TLSSocket.socketOnData (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:57408:37)
 at TLSSocket.emit (node:events:513:28)
 at addChunk (node:internal/streams/readable:324:12)
 at readableAddChunk (node:internal/streams/readable:297:9)
 at Readable.push (node:internal/streams/readable:234:10)
 at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23)
Emitted 'error' event on WebSocket instance at:
at Receiver.receiverOnError (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:57294:13)
 at Receiver.emit (node:events:513:28)
 at emitErrorNT (node:internal/streams/destroy:151:8)
 at emitErrorCloseNT (node:internal/streams/destroy:116:3)
 at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
code: 'WS_ERR_INVALID_CLOSE_CODE',
[Symbol(status-code)]: 1002
}

Node.js v19.0.0

And here is the error handled. HMR continues to function 🎉

VITE v4.1.1 ready in 878 ms

➜ Local: https://localhost:3001/login
 ➜ Network: use --host to expose
 ➜ press h to show help
WebSocket error:
RangeError: Invalid WebSocket frame: invalid status code 1006
at Receiver.controlMessage (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:55108:18)
at Receiver.getData (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:54984:42)
at Receiver.startLoop (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:54700:22)
at Receiver._write (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:54626:10)
at writeOrBuffer (node:internal/streams/writable:392:12)
at _write (node:internal/streams/writable:333:10)
at Writable.write (node:internal/streams/writable:337:10)
at TLSSocket.socketOnData (file:///Users/XXX/node_modules/vite/dist/node/chunks/dep-3007b26d.js:57408:37)
at TLSSocket.emit (node:events:513:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23)

Thank you for the amazing work creators and maintainers, we ❤️ Vite

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[sapphi-red]

Thanks!
LGTM