1536843 - Websocket "was interrupted while the page was loading"

Status: RESOLVED INVALID

(Core :: Networking: WebSockets, defect)

Description

[Peter Hozak]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

1. Create a new project with create-react-app by npx create-react-app test

• using Node v10.11.0 and "react-scripts": "2.1.8"
  => "webpack-dev-server": "3.1.14"
  => "sockjs": "0.3.19"

2. Start it by cd test; npm start
3. Go to localhost:3000

For workarounds, please see my support question: https://support.mozilla.org/en-US/questions/1253577

Actual results:

Error message in console:

The connection to ws://localhost:3000/sockjs-node/743/khw0phgj/websocket was interrupted while the page was loading.

(and hot reload is not working when I modify source code)

Expected results:

Websockets on localhost should work the same as in Firefox 65.0.2 (I had to downgrade from 66.0 to be able to work).

Notes:

• changing about:config network.websocket.allowInsecureFromHTTPS did not help
• tested only on MacOS 10.13.6

Comment 1

[Peter Hozak]

• https://www.websocket.org/echo.html was working fine for me, only localhost is affected

Comment 2

[Peter Hozak]

Update of repro steps:

1. npx create-react-app test
   1.5 edit test/package.json to add proxy, e.g.: "proxy": "http://localhost:8080"
2. cd test; npm start
3. open a new tab and navigate to localhost:3000 (sometimes, the automatically open tab is working, but not all the times)
4. edit source code, save and observe browser if the page is auto-refreshed

Without the proxy it worked for me reliably in all tabs...

Comment 3

[Peter Hozak]

Actually, when I tried again it works regardless of proxy setting in package.json => I am not sure what are reliable reproduction steps :(

Comment 4

[Kershaw Chang [:kershaw]]

:michal, could you take a look? Thanks.

Comment 5

[Michael Gauthier [:gauthierm]]

I can replicate this bug in Firefox 66.0.2 on macOS 10.14.3.

create-react-app is using sockjs-client to handle hot-module-replacement websocket connections. Looking at the error stack trace the error comes from this bit of code in node_modules/sockjs-client/lib/transport/browser/websocket.js:

var Driver = global.WebSocket || global.MozWebSocket;
if (Driver) {
	module.exports = function WebSocketBrowserDriver(url) {
		return new Driver(url);
	};
} else {
	module.exports = undefined;
}

If I run the same code in my console, it reproduces the error:

new WebSocket('ws://localhost:3000/sockjs-node/258/jmn4rkvx/websocket');

The error occurs while creating the WebSocket object.

Comment 6

[Michael Gauthier [:gauthierm]]

Reproduced on:
Firefox 66.0 32bit on Windows 10.
Firefox 67.0b2 32bit on Windows 10.

Unable to reproduce on:
Firefox 65.0 32bit on Windows 10

Comment 7

[Michal Novotny [:michal]]

(In reply to Peter Hozak from comment #2)

Update of repro steps:

1. npx create-react-app test
   1.5 edit test/package.json to add proxy, e.g.: "proxy": "http://localhost:8080"
2. cd test; npm start
3. open a new tab and navigate to localhost:3000 (sometimes, the automatically open tab is working, but not all the times)
4. edit source code, save and observe browser if the page is auto-refreshed

Without the proxy it worked for me reliably in all tabs...

I'm not familiar with react, so I need an explanation what the proxy line does. Does it start the proxy server or does it just tell that the requests should go through already running proxy? I see this in npm console:

Proxy error: Could not proxy request /sockjs-node/635/f3bpjqao/websocket from localhost:3001 to http://localhost:8080.

Error message in console:

The connection to ws://localhost:3000/sockjs-node/743/khw0phgj/websocket was interrupted while the page was loading.

Do you mean console in Firefox's devtools or console where npm is running?

Comment 8

[Dalius Dobravolskas]

(In reply to Michal Novotny [:michal] from comment #7)

I'm not familiar with react, so I need an explanation what the proxy line does. Does it start the proxy server or does it just tell that the requests should go through already running proxy? I see this in npm console:

In short, proxy makes react dev server act as proxy to some back-end/API server. This way production like environment is simulated where we have single server that handles front-end and API. In development we have two: react dev server (front-end on port 3000 usually) and API server (back-end can be on any port, e.g. 5000, 8000 and etc.).
https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

Proxy error: Could not proxy request /sockjs-node/635/f3bpjqao/websocket from localhost:3001 to http://localhost:8080.
I assume you don't have any server running on http://localhost:8080. You can create fake server with json-server https://github.com/typicode/json-server if you absolutely need that for testing.

Error message in console:

The connection to ws://localhost:3000/sockjs-node/743/khw0phgj/websocket was interrupted while the page was loading.

Do you mean console in Firefox's devtools or console where npm is running?
Console in Firefox's devtools.

Comment 9

[Michal Novotny [:michal]]

I cannot reproduce the problem. Peter, could you please provide a log? See https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/HTTP_logging and please add nsWebSocket:5 to the list of logged modules.

Comment 10

[Dalius Dobravolskas]

(In reply to Michal Novotny [:michal] from comment #9)

I cannot reproduce the problem. Peter, could you please provide a log? See https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/HTTP_logging and please add nsWebSocket:5 to the list of logged modules.

I guess multiple logs will not harm: https://www.dropbox.com/s/3hwazepqqw0ao3u/log.txt-main.5235.gz?dl=0

Comment 11

[Michal Novotny [:michal]]

Dalius, thanks for the log. It shows that the websocket handshake is successful, few frames are received, but then the connection is aborted due to invalid data in the socket.

In the end, I was able to reproduce it and mozregression pointed to a bug 1417463. That bug changed default accept header and further testing showed that it's server side issue. For some reason, server goes mad when "text/html" is missing in the accept header and after few frames it sends some unexpected HTTP response over the websocket connection.

I.e. this bug happens in Firefox 65 too when text/html is removed from network.http.accept.default pref in about:config.

Comment 12

[Selena Deckelmann :selenamarie :selena]

Hey Mike -- Is this something we should report to React folks for fixing up?

Comment 13

[Mike Taylor [:miketaylr]]

I'll file a bug @ https://github.com/sockjs/sockjs-client, and drop a comment in https://github.com/facebook/create-react-app/issues/6720 (which points to this bug).