WebSocket Error: "Invalid WebSocket frame: RSV1 must be clear"

[SimonVriesema]

Is there an existing issue for this?

• I've searched for any related issues and avoided creating a duplicate issue.

Description

I'm encountering a "Invalid WebSocket frame: RSV1 must be clear" error when running my Vue.js application. This issue only appeared after updating the 'ws' library to version 8.14.2. The application runs both locally and on the network.

It's important to note that I'm only using the 'ws' library because it's a dependency required by other packages I'm using. I'm not intentionally using WebSocket technology in my application. The reason I believe this issue is unique is that it only surfaced after the 'ws' library update, even though I'm not implementing WebSocket technology myself.

node:events:495
      throw er; // Unhandled 'error' event
      ^

RangeError: Invalid WebSocket frame: RSV1 must be clear
    at Receiver.getInfo (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/receiver.js:199:14)
    at Receiver.startLoop (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/receiver.js:146:22)
    at Receiver._write (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/receiver.js:84: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 Socket.socketOnData (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/websocket.js:1278:35)
    at Socket.emit (node:events:517:28)
    at addChunk (node:internal/streams/readable:335:12)
    at readableAddChunk (node:internal/streams/readable:308:9)
    at Readable.push (node:internal/streams/readable:245:10)
    at TCP.onStreamRead (node:internal/stream_base_commons:190:23)
Emitted 'error' event on WebSocket instance at:
    at Receiver.receiverOnError (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/websocket.js:1164:13)
    at Receiver.emit (node:events:517: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_UNEXPECTED_RSV_1',
  [Symbol(status-code)]: 1002
}

Node.js v18.18.2

ws version

8.14.2

Node.js Version

v18.18.2

System

System:
OS: macOS 14.0
CPU: (8) arm64 Apple M1 Pro
Memory: 74.67 MB / 16.00 GB
Shell: 5.9 - /bin/zsh

Expected result

I expected my Vue.js application to run without any WebSocket-related errors after updating the 'ws' library.

Actual result

I encountered the "Invalid WebSocket frame: RSV1 must be clear" error, which prevents my application from running correctly.

Attachments

No response

[lpinca]

This is a duplicate of #2058, #2019, #1777, etc.

See #2058 (comment) for a way to reproduce the error and add a listener for 'error' event to prevent it from exiting the process as per #2019 (comment).

[SimonVriesema]

I appreciate your response. However, I'd like to clarify that I'm not intentionally using WebSocket technology in my application. The problem appeared unexpectedly, and I haven't made any changes or updates to my project in the last two weeks. As a result, I'm uncertain about how and where to add the suggested 'error' event listener. I also rely on various dependencies, including Vue.js and Webpack, which might be using WebSocket technology internally.

If there are straightforward steps or guidance you could provide to help me identify and resolve the issue, it would be of great help.

Thank you for your assistance.

[lpinca]

The problem appeared unexpectedly, and I haven't made any changes or updates to my project in the last two weeks.

Yes, it is not caused by an update. When a peer sends an invalid frame an error is raised on the remote peer. If there is no 'error' listener on the peer that received the invalid frame the process exits with that error.

As a result, I'm uncertain about how and where to add the suggested 'error' event listener. I also rely on various dependencies, including Vue.js and Webpack, which might be using WebSocket technology internally.

In your dependencies, check where WebSockets are used and verify that errors are handled.

[lpinca]

I don't know if you are using webpack-dev-server or if the 'error' listener is added somewhere else but I don't see it here https://github.com/webpack/webpack-dev-server/blob/540c43852ea33f9cb18820e1cef05d5ddb86cc3e/lib/servers/WebsocketServer.js#L86-L98.

[SimonVriesema]

WebSocket technology is in use, as indicated by the ls ws command. I'm also utilizing webpack-dev-server:

frontend@0.1.0 /Users/simon_vriesema/IdeaProjects/TaskEaseWebApp
├─┬ @vue/cli-service@5.0.8
│ └─┬ webpack-bundle-analyzer@4.9.1
│ └── ws@7.5.9
└─┬ webpack-dev-server@4.15.1
└── ws@8.14.2

[lpinca]

webpack-bundle-analyzer adds an error listener here https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/f01056a51fa16f3274204b5b98bba1be3a3f496d/src/viewer.js#L100-L105, so I guess it is missing from webpack-dev-server as written above.

[lpinca]

I'm closing this as answered. There is not much to do here. Feel free to open a PR in the webpack-dev-server repository.

[SimonVriesema]

Thank you for the information and guidance provided. While I've been exploring the issue and the suggestions given, I must admit that I'm currently unsure about the exact actions I should take.

The issue seems to be related to WebSocket technology used by my project's dependencies and potentially in webpack-dev-server. At this point, I don't have a clear understanding of what specific changes are required in either webpack-dev-server or webpack-bundle-analyzer to resolve this issue.

I'll continue to delve deeper into the source code of my project's dependencies and investigate the webpack-dev-server source code. However, I want to be upfront about my current uncertainty regarding the necessary code modifications.

If you have any specific recommendations or further insights on how to proceed, I would greatly appreciate your assistance in clarifying the steps I should take to address this issue effectively.

Your support and guidance are invaluable as I work towards a solution. Thank you for your understanding.

[lpinca]

I saw that you opened webpack/webpack-dev-server#5017. Try to propose this patch in the webpack-dev-server repository.

diff --git a/lib/servers/WebsocketServer.js b/lib/servers/WebsocketServer.js
index 2a7636da..fbd7386f 100644
--- a/lib/servers/WebsocketServer.js
+++ b/lib/servers/WebsocketServer.js
@@ -95,6 +95,10 @@ module.exports = class WebsocketServer extends BaseServer {
         client.on("close", () => {
           this.clients.splice(this.clients.indexOf(client), 1);
         });
+
+        client.on("error", (err) => {
+          this.server.logger.error(err.message);
+        });
       }
     );
 

Also, it is not related to ws@8.14.2. The same happens with older versions of ws when a peer sends an invalid frame and there is no listener for the 'error' event on the remote peer.