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

Open Beginner friendly
#101 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
react-native, typescript
Domain
api, mobile

Research direction

Start in src/client.ts:259 at createHeartbeat() and trace how the Realtime socket and heartbeat are recreated on open events. Reproduce the background, network disconnect, reconnect, and foreground cycle, then verify that heartbeat timers do not accumulate and that sending is safe during socket reconnection. Done means the connection resumes without an INVALID_STATE_ERROR crash.

Written by the indexing model from the issue text.

Description

bug
👟 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?
Dominant language
TypeScript
Stars
4.3k
Forks
36
Avg merge
8h 20m
Merged PRs (30d)
2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from appwrite/sdk-for-react-native

All issues in appwrite/sdk-for-react-native

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.