appwrite / appwrite/sdk-for-react-native

πŸ› Bug Report: INVALID_STATE_ERROR crash after background + network disconnect + foreground cycle

Open
#101 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
4.3k
Forks
36
Avg merge
2h 50m
Merged PRs (30d)
1

Description

### πŸ‘Ÿ 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](https://github.com/appwrite/sdk-for-react-native/blob/main/src/client.ts#L259)):

```
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?

- [x] I checked and didn't find similar issue

### 🏒 Have you read the Code of Conduct?

- [x] I have read the [Code of Conduct](https://github.com/appwrite/appwrite/blob/HEAD/CODE_OF_CONDUCT.md)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.