feat: Show connection status in the UI if the websocket connection fails

[annyanich]

I have noticed that there are no status indicators in the GUI to indicate when the websocket connection to the collab server has an error. This is confusing sometimes.

Steps to reproduce:

1. Open excalidraw.com
2. Start collaboration
3. Open the link in another tab/browser
4. Disconnect your wifi

Expectation: I would expect to see some indication somewhere in the UI that the websocket connection has been dropped and that the client is attempting to reconnect.

Current behavior: The green 'collaboration' indicator still stays lit, and the number of connected peers remains the same, while errors get printed in the console each time socket.io tries to reconnect:

Firefox can’t establish a connection to the server at wss://oss-collab-us2.excalidraw.com/socket.io/?EIO=3&transport=websocket. [56.74fb6229.chunk.js:2:75312](https://excalidraw.com/static/js/56.74fb6229.chunk.js)
The connection to wss://oss-collab-us2.excalidraw.com/socket.io/?EIO=3&transport=websocket was interrupted while the page was loading.

Consequence: It looks like you are still connected to the server, even when you aren't.

Possible fix:
Here is how we could track the connection status.
In Collab.tsx, the socket.io client is registered. See https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/collab/Collab.tsx#L419
We could add listeners there for connect_error, connect and disconnect, according to the documentation here: https://socket.io/docs/v3/client-socket-instance/#events
Those listeners could perhaps call this.excalidrawAPI.updateScene({ wsConnectionState: 'connected' | 'disconnected' | 'error' }) to inform the App about the connection state, storing it in a new field inside of AppState.

I haven't made a GUI mockup, but the CollabButton in LayerUI could maybe be re-styled to look different when the connection is dropped and the attempt to reconnect is in progress. Either that and/or a discrete text message (e.g. "You are offline. Attempting to re-connect...") could be shown in the corner next to the collab button. I would be open for ideas here.

Would this be something that you would consider adding to the core? I will probably develop it in any event for my fork, and I would be happy to create a pull request if you're interested :)

[dwelle]

Would this be something that you would consider adding to the core? I will probably develop it in any event for my fork, and I would be happy to create a pull request if you're interested :)

For sure, happy to accept a PR! :).

For now, we can add the wsConnectionState (though let's call it wsConnectionStatus) to the appState as you suggest. Later, once we factor all the collab-related UI out of the editor, we can remove it (it may take a while).

Note that the docs you linked to point to v3, while we're still on v2 (we should upgrade). The events should still work though.

As for the styling, I'd probably just change the color to red, maybe add a ! icon instead of the user count, and add a message into the collab popup if you click on the button?