Websocket connection between hz client and server fine on Firefox, fails on Chrome

[mbeaudru]

Hi,

I am currently developping an SPA on chrome and everything was working fine. But the issue is that now my hz client cannot connect to hz server and it seems to come out of nowhere counting that I changed nothing since the last time.

So I tried to launch the app on Firefox, and it worked just fine, even if some errors are occuring.

Here are the console logs that appear on Chrome (not working):

[HMR] Waiting for update signal from WDS...
Failed to parse SourceMap: http://localhost:9000/public/toSubscriber.js.map
build.js:78439 [HMR] connected
build.js:55125 POST http://localhost:8181/horizon/?EIO=3&transport=polling&t=LJZ8_GN&sid=dv84H55Vry1n21dvAAAZ 400 (Bad Request)Request.create @ build.js:55125Request @ build.js:55038XHR.request @ build.js:54966XHR.doWrite @ build.js:54979(anonymous function) @ build.js:20006(anonymous function) @ build.js:8144proxy @ build.js:48850(anonymous function) @ build.js:8159(anonymous function) @ build.js:8139exports.encodePacket @ build.js:7938encodeOne @ build.js:8138eachWithIndex @ build.js:8157map @ build.js:8164exports.encodePayload @ build.js:8143Polling.write @ build.js:20005Transport.send @ build.js:12997Socket.flush @ build.js:54445Socket.onDrain @ build.js:54431(anonymous function) @ build.js:54150Emitter.emit @ build.js:12634callbackfn @ build.js:20001Emitter.emit @ build.js:12634Request.onSuccess @ build.js:55149Request.onData @ build.js:55161Request.onLoad @ build.js:55241xhr.onreadystatechange @ build.js:55113
build.js:55125 GET http://localhost:8181/horizon/?EIO=3&transport=polling&t=LJZ8_GQ&sid=dv84H55Vry1n21dvAAAZ 400 (Bad Request)Request.create @ build.js:55125Request @ build.js:55038XHR.request @ build.js:54966XHR.doPoll @ build.js:54996Polling.poll @ build.js:19917Polling.onData @ build.js:19956(anonymous function) @ build.js:54999Emitter.emit @ build.js:12634Request.onData @ build.js:55160Request.onLoad @ build.js:55241xhr.onreadystatechange @ build.js:55113
build.js:48436 Uncaught Error: Websocket ws://localhost:8181 experienced an error(anonymous function) @ build.js:48436Emitter.emit @ build.js:12634Socket.onError @ build.js:54565(anonymous function) @ build.js:54156Emitter.emit @ build.js:12634Transport.onError @ build.js:12954(anonymous function) @ build.js:54983Emitter.emit @ build.js:12634Request.onError @ build.js:55171(anonymous function) @ build.js:55118
build.js:55531 WebSocket connection to 'ws://localhost:8181/horizon/?EIO=3&transport=websocket&sid=dv84H55Vry1n21dvAAAZ' failed: WebSocket is closed before the connection is established.
build.js:55125 POST http://localhost:8181/horizon/?EIO=3&transport=polling&t=LJZ8_IR&sid=dv84H55Vry1n21dvAAAZ 400 (Bad Request)

and there are the one on Firefox (working):

Connection with ws://localhost:8181/horizon/?EIO=3&transport=websocket&sid=_VUcVzbFjqpTLtHoAAAN has stopped while the page was loading. build.js:55394:32
Connection with ws://localhost:8181/horizon/?EIO=3&transport=websocket&sid=1nQTgL41NR5ct7chAAAO has stopped while the page was loading. build.js:55394:32
Error: Socket closed unexpectedly with code: transport close
 build.js:48452:31
Connection with http://localhost:9000/__webpack_hmr has stopped while the page was loading. build.js:78425:16
[HMR] Waiting for update signal from WDS... build.js:78744:3
"Download the React DevTools for a better development experience: https://fb.me/react-devtools" build.js:68386:10
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create build.js:63373:416
[HMR] connected

As you can see, I have not installed React (nor Redux) devTools on Firefox. I tried to deactivate them in chrome to check if it was related to them, but there aren't any differences.

If it solves by itself just like it breaks by itself (apparently), I'll tell here right away.

Note:

• "@horizon/client": "^1.0.3",
• "@horizon/server": "^1.0.1"

Info: When I run hz serve --dev, I have many logs in the terminal that I don't understand but it seemed without consequences (at first, I guess). It may be a clue to understand whats going on, so here there are:

hz serve --dev

App available at http://127.0.0.1:8181
RethinkDB
   ├── Admin interface: http://localhost:58007
   └── Drivers can connect to port 58006
Starting Horizon...
error: rethinkdb stderr: warn: WriteFile failed: Descripteur non valide
error: rethinkdb stderr: Previous message may not have been written to the log file (cannot open or find log file).
error: rethinkdb stderr: error: worker process failed to resynchronize with main process
error: rethinkdb stderr: warn: failed to kill worker process: Acc?s refus?.
Unhandled rejection ReqlRuntimeError: Connection is closed in:
r.db("rethinkdb").table("table_config").filter({"db": "bookmarkJS"}).pluck("name", "indexes").changes({"squash": true, "includeInitial": true, "includeStates": true, "includeTypes": true})
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    at ReqlRuntimeError.ReqlError [as constructor] (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\errors.js:23:13)
    at new ReqlRuntimeError (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\errors.js:90:51)
    at mkErr (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\util.js:177:10)
    at Feed.IterableResult._addResponse (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\cursor.js:75:27)
    at TcpConnection.<anonymous> (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:360:22)
    at TcpConnection.cancel (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\util.js:26:16)
    at TcpConnection.cancel (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:783:43)
    at wrappedCb (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:270:17)
    at tryCatcher (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\util.js:26:23)
    at Promise.successAdapter (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\nodeify.js:23:30)
    at Promise._settlePromiseAt (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\promise.js:579:21)
    at Promise._settlePromises (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\promise.js:697:14)
    at Async._drainQueue (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:123:16)
    at Async._drainQueues (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:133:10)
    at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:15:14)
    at tryOnImmediate (timers.js:543:15)
Unhandled rejection ReqlRuntimeError: Connection is closed in:
r.db("rethinkdb").table("table_config").filter({"db": "bookmarkJS"}).pluck("name", "indexes").changes({"squash": true, "includeInitial": true, "includeStates": true, "includeTypes": true})
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    at ReqlRuntimeError.ReqlError [as constructor] (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\errors.js:23:13)
    at new ReqlRuntimeError (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\errors.js:90:51)
    at mkErr (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\util.js:177:10)
    at Feed.IterableResult._addResponse (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\cursor.js:75:27)
    at TcpConnection.<anonymous> (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:360:22)
    at TcpConnection.cancel (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\util.js:26:16)
    at TcpConnection.cancel (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:783:43)
    at wrappedCb (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:270:17)
    at tryCatcher (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\util.js:26:23)
    at Promise.successAdapter (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\nodeify.js:23:30)
    at Promise._settlePromiseAt (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\promise.js:579:21)
    at Promise._settlePromises (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\promise.js:697:14)
    at Async._drainQueue (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:123:16)
    at Async._drainQueues (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:133:10)
    at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:15:14)
    at tryOnImmediate (timers.js:543:15)
Unhandled rejection ReqlRuntimeError: Connection is closed in:
r.db("rethinkdb").table("table_config").filter({"db": "bookmarkJS"}).pluck("name", "indexes").changes({"squash": true, "includeInitial": true, "includeStates": true, "includeTypes": true})
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    at ReqlRuntimeError.ReqlError [as constructor] (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\errors.js:23:13)
    at new ReqlRuntimeError (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\errors.js:90:51)
    at mkErr (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\util.js:177:10)
    at Feed.IterableResult._addResponse (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\cursor.js:75:27)
    at TcpConnection.<anonymous> (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:360:22)
    at TcpConnection.cancel (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\util.js:26:16)
    at TcpConnection.cancel (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:783:43)
    at wrappedCb (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:270:17)
    at tryCatcher (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\util.js:26:23)
    at Promise.successAdapter (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\nodeify.js:23:30)
    at Promise._settlePromiseAt (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\promise.js:579:21)
    at Promise._settlePromises (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\promise.js:697:14)
    at Async._drainQueue (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:123:16)
    at Async._drainQueues (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:133:10)
    at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:15:14)
    at tryOnImmediate (timers.js:543:15)
Unhandled rejection ReqlRuntimeError: Connection is closed in:
r.db("rethinkdb").table("table_config").filter({"db": "bookmarkJS"}).pluck("name", "indexes").changes({"squash": true, "includeInitial": true, "includeStates": true, "includeTypes": true})
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    at ReqlRuntimeError.ReqlError [as constructor] (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\errors.js:23:13)
    at new ReqlRuntimeError (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\errors.js:90:51)
    at mkErr (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\util.js:177:10)
    at Feed.IterableResult._addResponse (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\cursor.js:75:27)
    at TcpConnection.<anonymous> (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:360:22)
    at TcpConnection.cancel (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\util.js:26:16)
    at TcpConnection.cancel (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:783:43)
    at wrappedCb (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\rethinkdb\net.js:270:17)
    at tryCatcher (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\util.js:26:23)
    at Promise.successAdapter (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\nodeify.js:23:30)
    at Promise._settlePromiseAt (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\promise.js:579:21)
    at Promise._settlePromises (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\promise.js:697:14)
    at Async._drainQueue (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:123:16)
    at Async._drainQueues (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:133:10)
    at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\Manuel\AppData\Roaming\npm\node_modules\horizon\node_modules\bluebird\js\main\async.js:15:14)
    at tryOnImmediate (timers.js:543:15)
Horizon ready for connections �

[mbeaudru]

Weird, but changing the listening port of my app solved the issue (from 9000 to 3000 in my case) while all these didn't:

• Delete the rethinkdb_data folder
• Clear chrome cache and hard reload
• Unactivate React and Redux devTools
• Restarting computer (desesperate move)
• Use the native command invite instead of Cmder (Windows)

[jwarning]

I've been having a similar problem on OSX since a couple of days ago. Firefox is fine, but for me it won't connect to the websocket if I use localhost:8181 in Chrome anymore. Using 127.0.0.1 or 0.0.0.0 seems to be ok.

[deontologician]

It looks like this may be related to either HMR or engine.io. I assume you've tried it without HMR enabled?

[dawidcxx]

I had the same issue after toying with authentication and https. I think clearing the localstorage was the fix that worked (I don't have the issue now) but I can't tell for sure because I got a bit angry and did a lot of stuff in parallel like removing the rethinkdb folder.

[mbeaudru]

I was working fine for hours with chrome and it suddently stopped working, but thanks to @Taximan advice I tried to clear localstorage and it worked like a charm ! 😄

@deontologician I didn't tried without HMR but with these two info maybe you can connect the dots ?

[deontologician]

We just removed engine.io, so if this persists past 2.0, we can see if it's still happening

[fineline]

One more data point, I also was getting this on Chrome on OSX (not on Firefox), started seemingly randomly, inspecting some of the network calls showed message about expired token, clearing local storage fixed it.