WebSocket live subscriptions are not working in Firefox

[ihardyslide]

Hi,

I am experiencing a WebSocket issue in Firefox.

Wherever a subscription is tried to be established (does not matter if in Admin Dashboard or in Comment Stream), Firefox fails to do so. Every other Browser seems to work properly.

Example:
Go to any page where the comment stream is embed and live updates are enabled in Coral, check the console:

Firefox can’t establish a connection to the server at wss://<domain>/api/graphql/live. [client.ts:545:18](<domain>/src/client.ts)
The connection to wss://<domain>/api/graphql/live was interrupted while the page was loading.

I did some analysis and digging and found quite some similar issues, see related issues section.

There is no real solution and somehow everybody is blaming eachother.

This problem produces other ugly side effects while using Coral.
For example:

• User1 writes a comment on a story and submits it
• User2 is writing a reply to that comment, using Firefox (a long one, takes some time to write it)
• User1 is editing his comment and submits the edited comment
• User2 finishes writing his comment and submits it
• User2 will be in a broken state, because he did not get the live update from the parent comment and is now trying to reply to an outdated comment.
  Also he does not get any CallOut/ErrorMessage/Anything.
  He would have to either:
  • refresh the page (and then be on top of the story again, instead of the comment he just wanted to reply to. With >10000 comments on a story this can be very exhausting)
  • Click on "share comment" and open the single comment view

Additionally I noticed that Coral is using a deprecated (since 2018!) package to implement the WebSocket subscriptions, which is subscriptions-transport-ws
It tells that it should be replaced with graphql-ws
Is this migration already considered/planned?

Expected behavior:
WebSocket subscriptions for Live Updates work also in Firefox

Actual behavior:
WebSocket subscriptions for Live Updates do not work in Firefox

Related Issues:

• In Firefox, connection .... was interrupted while the page was loading socketio/socket.io#2016
• Connection aborted due to invalid data in the socket in Firefox sockjs/sockjs-client#474
• https://stackoverflow.com/questions/14140414/websocket-was-interrupted-while-page-is-loading-on-firefox-for-socket-io

Versions:

• Coral: 7.3.0
• NodeJS: coming from Coral Dockerfile
• NPM: coming from Coral Dockerfile
• MongoDB: 4.2 Docker image
• Redis: 3.2 Docker image
• Browser: Firefox 102.1.0esr (64-bit)
• OS: Windows 10 (Client)

[losowsky]

How strange. Thanks for filing, we're looking into it.

[losowsky]

we haven't been able to replicate, is this still an issue since our updates?

[ihardyslide]

Hi,

sorry for the late response, we did not upgrade Coral in a while now.
Anyway, I can confirm this is still an issue with the latest version 8.7.2

Meanwhile my Firefox got updated too, now on Version 115.6.0esr (64-bit)

Also I can see in the package.json, that Coral is still using the archived package dependency subscriptions-transport-ws which had it's last release on Aug 17, 2020

[nick-funk]

Hello @ihardyslide,

I ran a test this morning using Firefox version 110 - 122. All of them had working websocket connections despite us using the archived package for subscriptions-transport-ws.

Have you checked whether your CDN or cache hosting/providing your static assets supports websocket traffic? That was a common issue we had with fast.ly and why we currently use Google's CDN and http caching for hosting our static assets.

At this time, we can't rep this issue, sorry!

[ihardyslide]

Hi,

thanks for trying to replicate the issue.

We are hosting Coral inside of an OpenShift cluster, which for sure supports websocket traffic, because the WS connections are working when I use e.g. Chrome as browser.

I will try to debug it again and see if I can find out some more details.

BR & Thanks