Skip to content

In Firefox, connection .... was interrupted while the page was loading #2016

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
selay opened this issue Feb 21, 2015 · 42 comments
Closed

In Firefox, connection .... was interrupted while the page was loading #2016

selay opened this issue Feb 21, 2015 · 42 comments

Comments

@selay
Copy link

selay commented Feb 21, 2015

Hi,
it shows connection to ws:..... was interrupted while the page was loading in Firefox but works.
I saw many possible fix suggestions on different sites but none of them work now.
It works fine in other browsers without any error/warning in the console.
I am using socket.io 1.3.4 and firefox latest version 35.0.1.

@oxhak
Copy link

oxhak commented Feb 28, 2015

Same here, random disconnect on firefox, not on chrome. I can't understand what is the problem.

@selay
Copy link
Author

selay commented Aug 4, 2015

It still happens on the latest version 1.3.6

@arusahni
Copy link

There's an open ticket for this on Bugzilla. The "workaround" doesn't work for me.

@ghost
Copy link

ghost commented Aug 22, 2015

This will fix it
window.onload(function()
{
//code goes here
});

@dsha44
Copy link

dsha44 commented Mar 17, 2016

Issue is still alive apparently getting the exact same error, I've tried both versions 1.2.0 I believe and the one that comes with the latest NPM package. Any workarounds?

@UndergroundLabs
Copy link

I too am getting the same error in Firefox. Can't seem to find a fix anywhere.

@chchrist
Copy link

I'm getting this error in FF 45 and my websocket connection times out.

@maxpaynestory
Copy link

I am getting this error on FF 46 + Mac, FF 45 + Windows 10.

@chchrist
Copy link

For us the problem was the version of the net scaler we used

@maxpaynestory
Copy link

Are you referring to the python script net scaler? I am not using it and still getting this error on socket.io

@gotev
Copy link

gotev commented Jul 15, 2016

Had the same issue on OS X 10.11.5 and Firefox 47. With the following configuration it works without errors for me on Firefox 47 and Chrome 51.0.2704.103.

package.json

{
  "name": "socket-io-test",
  "version": "1.0.0",
  "description": "socket io test",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "Aleksandar Gotev",
  "license": "ISC",
  "homepage": "",
  "dependencies": {
    "express": "^4.14.0",
    "socket.io": "^1.4.8"
  }
}

config.json

{
    "process_title": "wstest",
    "web_server_port": 3000,
    "max_seconds_to_wait_on_kill": 3
}

app.js

var expressFramework = require('express');
var express = expressFramework();
var fs = require('fs');

//read configuration
var configuration = JSON.parse(fs.readFileSync('config.json', "utf8"));

//setup express
express.set('json spaces', 2);
express.disable('x-powered-by'); //disable express framework credits
express.use("/", expressFramework.static(__dirname + "/static")); //serve static files

//start web server
var webServer = express.listen(configuration.web_server_port, function () {
    console.log("Web server listening on port " +  configuration.web_server_port); 
});

//setup socket.io
var io = require('socket.io')(webServer);
io.on('connection', function (socket) {
    socket.emit('hello', {
        msg: "hello"
    });
});

//setup process
var killHook = function killHook() {
    console.log("Detected kill signal");

    webServer.close(function() {
        console.log("Graceful shutdown");
        process.exit(0);
    });

    setTimeout(function () {
        console.log("Waited for " + configuration.max_seconds_to_wait_on_kill + " seconds. Force kill.");
        process.exit(0);
    }, configuration.max_seconds_to_wait_on_kill * 1000);
};

process.title = configuration.process_title;
process.on('SIGTERM', killHook);
process.on('SIGINT', killHook);

static/index.html

<html>
<head>
    <title>WS Test</title>
</head>
<body>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    window.onload = function() {
        var socket = io.connect('http://localhost:3000');

        socket.on('hello', function (data) {
            document.write("<p> Hello message: " + JSON.stringify(data) + "</p>");
        });

        window.addEventListener("beforeunload", function() {
            console.log("Close web socket");
            socket.close();
        });
    };
    </script>
</body>
</html>

Just recreate the files in a directory and then execute:

npm install
npm start

And head your browser to http://localhost:3000

@nagarjunbn
Copy link

Hi all,
I was having the same issue..
By using socket io 1.0.* my errors fixed .
Hope this helps.

@nottherealbatman
Copy link

Any updates on this? Because this is issue also affects Firefox 51.0.1

@wirespecter
Copy link

I get the same error but the connection works perfectly, strange...

@fschiefelbein
Copy link

Set network.notify.ipv6 to false.

@bovas85
Copy link

bovas85 commented Dec 4, 2017

still an issue on firefox quantum release

@shaukatwaqarangular
Copy link

@nagarjunbn
It actually does resolve the issue for me as well.
I used the latest socket.io available:
"socket.io": "2.0.4"

and the below issue is gone:
The connection to http://localhost:55542/dist/__webpack_hmr was interrupted while the page was loading.

@andreasvirkus
Copy link

andreasvirkus commented Jan 30, 2018

Still getting this error with 2.0.4, Firefox Quantum (58.0), macOS 10.12.6:

The connection to http://localhost:4000/__webpack_hmr was
interrupted while the page was loading.

@cigzigwon
Copy link

FF Quantum is sending a PING. Is there a socket.io handler implementation for WebSocket ping/pong? Could this be the issue?

@dizid
Copy link

dizid commented Apr 1, 2018

This error suddenly popped up in my Vue project when starting to use vuetify.
Firefox 59.0.2 (64-bit) on Ubuntu.
No errors in Chrome.
A bit later the error changed to:
Firefox can’t establish a connection to the server at http://localhost:8080/__webpack_hmr.

@tetreault
Copy link

have this same issue using gatsby static site generator for react, issue only occurs in FF... I noticed it because my fonts render everywhere but FF.

@ferdinandosp
Copy link

have this same exact issue using Firefox Developer edition version 60.0b16.
my app is using react...

@darrachequesne
Copy link
Member

@ferdinandosp @tetreault which version of socket.io are you using? Does it still happen with version 2.1.0?

@rachelleahr
Copy link

@darrachequesne I'm using socket.io v2.1.0 and still getting that error, also using Reactjs in Firefox

@sukhdeothakur
Copy link

[email protected]

:
Error in Firefox
The connection to ws://localhost:62000/chhotiduniya/demoServer.php was interrupted while the page was loading.
Reply:
Use IP address(127.0.0.1) instead of localhost in client socket code
Like: "ws://127.0.0.1:62000/demoServer.php";
<This will cause error e.g:"ws://localhost:62000/demoServer.php";>

@PopovMaxim
Copy link

Maybe it helps anyone...
Also works with SSE in Firefox 61

$(window).on('beforeunload', function () {
     source.close();
});

@princeivankent
Copy link

I am getting this warning too. Im using Vue-CLI with laravel and tried to run npm serve. The warning shows only in firefox.

@cigzigwon
Copy link

cigzigwon commented Mar 8, 2019

@princeivankent There is definitely a difference. Just to be clear, I don't see any warning but the handler behavior on the client side is different in Firefox. Before we compare our implementations let's do some discovery. In chrome my socket joins the lobby. In Firefox my socket closes, reconnects and then joins the lobby. People are suggesting that operations based on window events are a workaround which may help with edge cases but does not speak for WHAT is actually the problem. I've suggested in the linked issue above 1436, that you need to implement PING -> PONG on your server side. But the problem I'm seeing suggests that the event pipeline in Mozilla still has a flaw in Quantum which is at 65.0.1. But I'll report back with more. I'm going to try connecting after the DOM loads. I don't see that suggestion yet.

@cigzigwon
Copy link

So in this case I've confirmed for myself that the issue I see only occurs on "beforeunload" like @PopovMaxim has pointed out. Things happen faster or are actually being reported in Firebug but not Chrome's inspector. But again something has variance in their event handling pipeline when transitioning pages. I'm going to wager that all server side implementations that are dealing with random disconnects are just not replying with a pong respective to ping. Also @princeivankent you are more likely dealing with race conditions in "front end world". You would need to elaborate more about the problem but I suspect that your websocket connection does persist after the page loads but you are seeing warnings when it unloads.

@cigzigwon
Copy link

I still don't think this problem can mitigated within the socket.io lib. I suspect that this is a race condition due to concurrent processing in FFQ browser and that's why the "beforeunload" workaround is effective. It provides a means to close the socket when the browser is doing whatever it is doing. Why is this still open?

@tomo0613
Copy link

This have to be a Firefox bug.

I used my dev-server for months without this issue (SSE).
Then, after an update, (haven't checked which, around v67, [using developer edition]), started getting this errors: "The connection to http://localhost:3000/sse was interrupted while the page was loading.", constantly roughly 2mins after connecting, even if no actions were taken.

The only workaround I find, is to reconnect (create new connection) when the error occurs.
eventSource.addEventListener('error', onConnectionError);

@wpitallo
Copy link

Just did an update and now I am getting this too FFS :(

@shahindesigner
Copy link

I forgot to write 'export default{}' in nuxt layouts. I did that and reconnect fixed the problem.

@mhurwicz
Copy link

Getting this on Firefox 69.0.1 (64-bit) on Mac OSX Mojave 10.14.6

@samends
Copy link

samends commented Oct 6, 2019

Getting this error using Firefox 69.0.2 (64-bit) on Ubuntu 18.04. I'm using the dojo 6 framework I used dojo/cli-create-app version 6.0.0 to create the project. The error specifically is:
The connection to http://localhost:9999/__webpack_hmr was interrupted while the page was loading.

@100ideas
Copy link

fyi, Over at webpack-hot-middleware/issues/265 @pstadler wrote (2017)

This message appears in Firefox when reloading a page. This is unavoidable (because true) and not related to Quantum.

@zababurinsv
Copy link

Hi i created connect with server side events.
Mozila
SSE: open
But when connect closing
reconnect does not occur

In chrome this working.

Server side events: open
webSocket.mjs:38 Connection break
webSocket.mjs:41 Code: 1006:
(index):42 Event: error EventSource {url: "http://localhost:7777/connect", withCredentials: false, readyState: 0, onmessage: null, onopen: ƒ, …}
(index):44 Reconect (readyState=0)...
:7777/connect:1 Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING
(index):38 Server side events: open

@jpodpro
Copy link

jpodpro commented Jul 30, 2020

i was getting this with Firefox 79. since it isn't very obvious what to do the solution is to upgrade package react-scripts to 3.4.1

@darrachequesne
Copy link
Member

I've added a note here: https://socket.io/docs/v3/logging-and-debugging/#Error-logs-in-the-browser-console

I'm not sure there is something to fix at the Socket.IO level. Please reopen if needed.

@metacast-dev
Copy link

I'm getting this error in firefox (when using mercure-hub to subscribe )
To fix it, you have to close the event source after getting the data from event source ( eventSource).
Here is the javascript code to fix the problem:

window.addEventListener('beforeunload', function () {
if (eventSource != null) {
eventSource.close();
}
});

@q0rban
Copy link

q0rban commented Jun 21, 2021

Does anyone have steps for how to replicate this? We have some customers reporting this issue in Firefox but I've been unable to replicate it. Does this happen when Firefox runs out of memory or something?

@ZachHandley
Copy link

Currently experiencing this issue when developing a React Native app with Expo, using npm start or expo start runs it and starts correctly, but gives a black screen and a lot of errors in the console that (as far as I can tell) are related to this.

https://i.imgur.com/csJOgJM.png

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests