Implement defensive handling of websocket connection #3657
Description
Background / Epic: #3630
Prerequisite: #3656
Observed behavior
- Currently, if the websocket gets closed, the frontend does not robustly handle it and requires the user to refresh the page
Expected behavior
- The frontend should robustly handle internet connectivity issues, automatically managing the reopening of the connection if it becomes closed or interrupted
- If frontend fails to send a message(s) because the connection has been closed, it should resend them over the sync API
- This will fast-forward the client's browser to guard against messages that weren't received during that time
- Perhaps generally speaking we should always call the sync API right before establishing the websocket connection to achieve the fast-forward behavior
User-facing consequences
- We don't want to require the user to refresh the page for a functional editing experience
Additional information
- We want to Implement ping/keep-alive messages to prevent websocket connection closure #3656 first to clear up any other issues that might cause unintended connection closure in our infrastructure
Steps to reproduce the issue
- Open a channel on the websocket server https://websockets.studio.learningequality.org/ (note: seems like it's no longer connecting)
- Open the developer console
- Toggle network connectivity
- Observe the page doesn't recover and requires a refresh