🐛 Bug Report: INVALID_STATE_ERROR crash after background + network disconnect + foreground cycle

[RogueLagertha]

👟 Reproduction steps

1. Open the app with an active Realtime subscription
2. Disconnect the network
3. Send the app to the background
4. Reconnect the network and wait for the connection to fully re-establish
5. Bring the app back to the foreground

👍 Expected behavior

When an app using Realtime is sent to the background while the network is disconnected, and then brought back to the foreground after reconnecting, the app hard crashes with Uncaught Error: INVALID_STATE_ERROR originating from a WebSocket send() call inside the heartbeat interval.
The Realtime connection should resume normally.

👎 Actual Behavior

Hard crash: Uncaught Error: INVALID_STATE_ERROR thrown from socket.send() inside the heartbeat interval.

Most likely root cause:
There are two bugs in createHeartbeat() (src/client.ts:259):

createHeartbeat: () => {
    if (this.realtime.heartbeat) {
        clearTimeout(this.realtime.heartbeat); // ❌ Bug 1
    }

    this.realtime.heartbeat = window?.setInterval(() => {
        this.realtime.socket?.send(JSON.stringify({ // ❌ Bug 2
            type: 'ping'
        }));
    }, 20_000);
},

Bug 1 — clearTimeout cannot cancel a setInterval

this.realtime.heartbeat is assigned via setInterval, but clearTimeout is used to cancel it. These use separate timer registries — clearTimeout silently does nothing when given an interval ID. As a result, every call to createHeartbeat() (which happens on every open event) stacks a new interval on top of all previous ones without ever clearing them.

Bug 2 — no readyState guard before send()

The accumulated intervals all call socket.send() unconditionally. When the socket is in CLOSING (2) or CLOSED (3) state — which happens transiently during any reconnect — send() throws INVALID_STATE_ERROR.

Fix

createHeartbeat: () => {
    if (this.realtime.heartbeat !== undefined) {
        clearInterval(this.realtime.heartbeat); // ✅ matches setInterval
        this.realtime.heartbeat = undefined;
    }

    this.realtime.heartbeat = window?.setInterval(() => {
        if (this.realtime.socket?.readyState === WebSocket.OPEN) { // ✅ guard
            this.realtime.socket.send(JSON.stringify({ type: 'ping' }));
        }
    }, 20_000);
},

🎲 Appwrite version

Version 0.7.x

💻 Operating system

MacOS

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct