@schematichq/schematic-react 1.2.6 → 1.2.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2025 Schematic, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -134,6 +134,8 @@ const MyComponent = () => {
 };
 ```
 
+*Note: `useSchematicIsPending` is checking if entitlement data has been loaded, typically via `identify`. It should, therefore, be used to wrap flag and entitlement checks, but never the initial call to `identify`.*
+
 ## Troubleshooting
 
 For debugging and development, Schematic supports two special modes:

package/dist/schematic-react.cjs.js

@@ -799,7 +799,7 @@ function contextString(context) {
   }, {});
   return JSON.stringify(sortedContext);
 }
-var version = "1.2.6";
+var version = "1.2.8";
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   additionalHeaders = {};
@@ -821,6 +821,23 @@ var Schematic = class {
   checks = {};
   featureUsageEventMap = {};
   webSocketUrl = "wss://api.schematichq.com";
+  webSocketConnectionTimeout = 1e4;
+  webSocketReconnect = true;
+  webSocketMaxReconnectAttempts = 7;
+  webSocketInitialRetryDelay = 1e3;
+  webSocketMaxRetryDelay = 3e4;
+  wsReconnectAttempts = 0;
+  wsReconnectTimer = null;
+  wsIntentionalDisconnect = false;
+  maxEventQueueSize = 100;
+  // Prevent memory issues with very long network outages
+  maxEventRetries = 5;
+  // Maximum retry attempts for failed events
+  eventRetryInitialDelay = 1e3;
+  // Initial retry delay in ms
+  eventRetryMaxDelay = 3e4;
+  // Maximum retry delay in ms
+  retryTimer = null;
   constructor(apiKey, options) {
     this.apiKey = apiKey;
     this.eventQueue = [];
@@ -864,11 +881,48 @@ var Schematic = class {
     if (options?.webSocketUrl !== void 0) {
       this.webSocketUrl = options.webSocketUrl;
     }
+    if (options?.webSocketConnectionTimeout !== void 0) {
+      this.webSocketConnectionTimeout = options.webSocketConnectionTimeout;
+    }
+    if (options?.webSocketReconnect !== void 0) {
+      this.webSocketReconnect = options.webSocketReconnect;
+    }
+    if (options?.webSocketMaxReconnectAttempts !== void 0) {
+      this.webSocketMaxReconnectAttempts = options.webSocketMaxReconnectAttempts;
+    }
+    if (options?.webSocketInitialRetryDelay !== void 0) {
+      this.webSocketInitialRetryDelay = options.webSocketInitialRetryDelay;
+    }
+    if (options?.webSocketMaxRetryDelay !== void 0) {
+      this.webSocketMaxRetryDelay = options.webSocketMaxRetryDelay;
+    }
+    if (options?.maxEventQueueSize !== void 0) {
+      this.maxEventQueueSize = options.maxEventQueueSize;
+    }
+    if (options?.maxEventRetries !== void 0) {
+      this.maxEventRetries = options.maxEventRetries;
+    }
+    if (options?.eventRetryInitialDelay !== void 0) {
+      this.eventRetryInitialDelay = options.eventRetryInitialDelay;
+    }
+    if (options?.eventRetryMaxDelay !== void 0) {
+      this.eventRetryMaxDelay = options.eventRetryMaxDelay;
+    }
     if (typeof window !== "undefined" && window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
         this.flushContextDependentEventQueue();
       });
+      if (this.useWebSocket) {
+        window.addEventListener("offline", () => {
+          this.debug("Browser went offline, closing WebSocket connection");
+          this.handleNetworkOffline();
+        });
+        window.addEventListener("online", () => {
+          this.debug("Browser came online, attempting to reconnect WebSocket");
+          this.handleNetworkOnline();
+        });
+      }
     }
     if (this.offlineEnabled) {
       this.debug(
@@ -1133,6 +1187,13 @@ var Schematic = class {
     try {
       this.setIsPending(true);
       if (!this.conn) {
+        if (this.wsReconnectTimer !== null) {
+          this.debug(
+            `Cancelling scheduled reconnection, connecting immediately`
+          );
+          clearTimeout(this.wsReconnectTimer);
+          this.wsReconnectTimer = null;
+        }
         this.conn = this.wsConnect();
       }
       const socket = await this.conn;
@@ -1262,11 +1323,53 @@ var Schematic = class {
       }
     }
   };
-  flushEventQueue = () => {
-    while (this.eventQueue.length > 0) {
-      const event = this.eventQueue.shift();
-      if (event) {
-        this.sendEvent(event);
+  startRetryTimer = () => {
+    if (this.retryTimer !== null) {
+      return;
+    }
+    this.retryTimer = setInterval(() => {
+      this.flushEventQueue().catch((error) => {
+        this.debug("Error in retry timer flush:", error);
+      });
+      if (this.eventQueue.length === 0) {
+        this.stopRetryTimer();
+      }
+    }, 5e3);
+    this.debug("Started retry timer");
+  };
+  stopRetryTimer = () => {
+    if (this.retryTimer !== null) {
+      clearInterval(this.retryTimer);
+      this.retryTimer = null;
+      this.debug("Stopped retry timer");
+    }
+  };
+  flushEventQueue = async () => {
+    if (this.eventQueue.length === 0) {
+      return;
+    }
+    const now = Date.now();
+    const readyEvents = [];
+    const notReadyEvents = [];
+    for (const event of this.eventQueue) {
+      if (event.next_retry_at === void 0 || event.next_retry_at <= now) {
+        readyEvents.push(event);
+      } else {
+        notReadyEvents.push(event);
+      }
+    }
+    if (readyEvents.length === 0) {
+      this.debug(`No events ready for retry yet (${notReadyEvents.length} still in backoff)`);
+      return;
+    }
+    this.debug(`Flushing event queue: ${readyEvents.length} ready, ${notReadyEvents.length} waiting`);
+    this.eventQueue = notReadyEvents;
+    for (const event of readyEvents) {
+      try {
+        await this.sendEvent(event);
+        this.debug(`Queued event sent successfully:`, event.type);
+      } catch (error) {
+        this.debug(`Failed to send queued event:`, error);
       }
     }
   };
@@ -1314,12 +1417,37 @@ var Schematic = class {
         },
         body: payload
       });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
       this.debug(`event sent:`, {
         status: response.status,
         statusText: response.statusText
       });
     } catch (error) {
-      console.error("Error sending Schematic event: ", error);
+      const retryCount = (event.retry_count ?? 0) + 1;
+      if (retryCount <= this.maxEventRetries) {
+        this.debug(`Event failed to send (attempt ${retryCount}/${this.maxEventRetries}), queueing for retry:`, error);
+        const baseDelay = this.eventRetryInitialDelay * Math.pow(2, retryCount - 1);
+        const jitterDelay = Math.min(baseDelay, this.eventRetryMaxDelay);
+        const nextRetryAt = Date.now() + jitterDelay;
+        const retryEvent = {
+          ...event,
+          retry_count: retryCount,
+          next_retry_at: nextRetryAt
+        };
+        if (this.eventQueue.length < this.maxEventQueueSize) {
+          this.eventQueue.push(retryEvent);
+          this.debug(`Event queued for retry in ${jitterDelay}ms (${this.eventQueue.length}/${this.maxEventQueueSize})`);
+        } else {
+          this.debug(`Event queue full (${this.maxEventQueueSize}), dropping oldest event`);
+          this.eventQueue.shift();
+          this.eventQueue.push(retryEvent);
+        }
+        this.startRetryTimer();
+      } else {
+        this.debug(`Event failed permanently after ${this.maxEventRetries} attempts, dropping:`, error);
+      }
     }
     return Promise.resolve();
   };
@@ -1339,6 +1467,12 @@ var Schematic = class {
       this.debug("cleanup: skipped (offline mode)");
       return Promise.resolve();
     }
+    this.wsIntentionalDisconnect = true;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+    this.stopRetryTimer();
     if (this.conn) {
       try {
         const socket = await this.conn;
@@ -1350,6 +1484,100 @@ var Schematic = class {
       }
     }
   };
+  /**
+   * Calculate the delay for the next reconnection attempt using exponential backoff with jitter.
+   * This helps prevent dogpiling when the server recovers from an outage.
+   */
+  calculateReconnectDelay = () => {
+    const exponentialDelay = this.webSocketInitialRetryDelay * Math.pow(2, this.wsReconnectAttempts);
+    const cappedDelay = Math.min(exponentialDelay, this.webSocketMaxRetryDelay);
+    const jitter = Math.random() * cappedDelay * 0.5;
+    const totalDelay = cappedDelay + jitter;
+    this.debug(
+      `Reconnect delay calculated: ${totalDelay.toFixed(0)}ms (attempt ${this.wsReconnectAttempts + 1}/${this.webSocketMaxReconnectAttempts})`
+    );
+    return totalDelay;
+  };
+  /**
+   * Handle browser going offline
+   */
+  handleNetworkOffline = async () => {
+    if (this.conn !== null) {
+      try {
+        const socket = await this.conn;
+        socket.close();
+      } catch (error) {
+        this.debug("Error closing connection on offline:", error);
+      }
+      this.conn = null;
+    }
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+  };
+  /**
+   * Handle browser coming back online
+   */
+  handleNetworkOnline = () => {
+    this.debug("Network online, attempting reconnection and flushing queued events");
+    this.wsReconnectAttempts = 0;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+    this.flushEventQueue().catch((error) => {
+      this.debug("Error flushing event queue on network online:", error);
+    });
+    this.attemptReconnect();
+  };
+  /**
+   * Attempt to reconnect the WebSocket connection with exponential backoff.
+   * Called automatically when the connection closes unexpectedly.
+   */
+  attemptReconnect = () => {
+    if (this.wsReconnectAttempts >= this.webSocketMaxReconnectAttempts) {
+      this.debug(
+        `Maximum reconnection attempts (${this.webSocketMaxReconnectAttempts}) reached, giving up`
+      );
+      return;
+    }
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+    }
+    const delay = this.calculateReconnectDelay();
+    this.debug(
+      `Scheduling reconnection attempt ${this.wsReconnectAttempts + 1}/${this.webSocketMaxReconnectAttempts} in ${delay.toFixed(0)}ms`
+    );
+    this.wsReconnectTimer = setTimeout(async () => {
+      this.wsReconnectTimer = null;
+      this.wsReconnectAttempts++;
+      this.debug(
+        `Attempting to reconnect (attempt ${this.wsReconnectAttempts}/${this.webSocketMaxReconnectAttempts})`
+      );
+      try {
+        this.conn = this.wsConnect();
+        const socket = await this.conn;
+        this.debug(`Reconnection context check:`, {
+          hasCompany: this.context.company !== void 0,
+          hasUser: this.context.user !== void 0,
+          context: this.context
+        });
+        if (this.context.company !== void 0 || this.context.user !== void 0) {
+          this.debug(`Reconnected, force re-sending context`);
+          await this.wsSendContextAfterReconnection(socket, this.context);
+        } else {
+          this.debug(`No context to re-send after reconnection - websocket ready for new context`);
+        }
+        this.flushEventQueue().catch((error) => {
+          this.debug("Error flushing event queue after websocket reconnection:", error);
+        });
+        this.debug(`Reconnection successful`);
+      } catch (error) {
+        this.debug(`Reconnection attempt failed:`, error);
+      }
+    }, delay);
+  };
   // Open a websocket connection
   wsConnect = () => {
     if (this.isOffline()) {
@@ -1362,18 +1590,101 @@ var Schematic = class {
       const wsUrl = `${this.webSocketUrl}/flags/bootstrap?apiKey=${this.apiKey}`;
       this.debug(`connecting to WebSocket:`, wsUrl);
       const webSocket = new WebSocket(wsUrl);
+      let timeoutId = null;
+      let isResolved = false;
+      timeoutId = setTimeout(() => {
+        if (!isResolved) {
+          this.debug(
+            `WebSocket connection timeout after ${this.webSocketConnectionTimeout}ms`
+          );
+          webSocket.close();
+          reject(new Error("WebSocket connection timeout"));
+        }
+      }, this.webSocketConnectionTimeout);
       webSocket.onopen = () => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
+        this.wsReconnectAttempts = 0;
+        this.wsIntentionalDisconnect = false;
         this.debug(`WebSocket connection opened`);
         resolve(webSocket);
       };
       webSocket.onerror = (error) => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
         this.debug(`WebSocket connection error:`, error);
         reject(error);
       };
       webSocket.onclose = () => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
         this.debug(`WebSocket connection closed`);
         this.conn = null;
+        if (!this.wsIntentionalDisconnect && this.webSocketReconnect) {
+          this.attemptReconnect();
+        }
+      };
+    });
+  };
+  // Send a message on the websocket after reconnection, forcing the send even if context appears unchanged
+  // because the server has lost all state and needs the initial context
+  wsSendContextAfterReconnection = (socket, context) => {
+    if (this.isOffline()) {
+      this.debug("wsSendContextAfterReconnection: skipped (offline mode)");
+      this.setIsPending(false);
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+      this.debug(`WebSocket force sending context after reconnection:`, context);
+      this.context = context;
+      const sendMessage = () => {
+        let resolved = false;
+        const messageHandler = (event) => {
+          const message = JSON.parse(event.data);
+          this.debug(`WebSocket message received after reconnection:`, message);
+          if (!(contextString(context) in this.checks)) {
+            this.checks[contextString(context)] = {};
+          }
+          (message.flags ?? []).forEach((flag) => {
+            const flagCheck = CheckFlagReturnFromJSON(flag);
+            const contextStr = contextString(context);
+            if (this.checks[contextStr] === void 0) {
+              this.checks[contextStr] = {};
+            }
+            this.checks[contextStr][flagCheck.flag] = flagCheck;
+          });
+          this.useWebSocket = true;
+          socket.removeEventListener("message", messageHandler);
+          if (!resolved) {
+            resolved = true;
+            resolve(this.setIsPending(false));
+          }
+        };
+        socket.addEventListener("message", messageHandler);
+        const clientVersion = this.additionalHeaders["X-Schematic-Client-Version"] ?? `schematic-js@${version}`;
+        const messagePayload = {
+          apiKey: this.apiKey,
+          clientVersion,
+          data: context
+        };
+        this.debug(`WebSocket sending forced message after reconnection:`, messagePayload);
+        socket.send(JSON.stringify(messagePayload));
       };
+      if (socket.readyState === WebSocket.OPEN) {
+        this.debug(`WebSocket already open, sending forced message after reconnection`);
+        sendMessage();
+      } else {
+        socket.addEventListener("open", () => {
+          this.debug(`WebSocket opened, sending forced message after reconnection`);
+          sendMessage();
+        });
+      }
     });
   };
   // Send a message on the websocket indicating interest in a particular evaluation context
@@ -1564,7 +1875,7 @@ var notifyFlagValueListener = (listener, value) => {
 var import_react = __toESM(require("react"));
 
 // src/version.ts
-var version2 = "1.2.6";
+var version2 = "1.2.8";
 
 // src/context/schematic.tsx
 var import_jsx_runtime = require("react/jsx-runtime");

package/dist/schematic-react.esm.js

@@ -754,7 +754,7 @@ function contextString(context) {
   }, {});
   return JSON.stringify(sortedContext);
 }
-var version = "1.2.6";
+var version = "1.2.8";
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   additionalHeaders = {};
@@ -776,6 +776,23 @@ var Schematic = class {
   checks = {};
   featureUsageEventMap = {};
   webSocketUrl = "wss://api.schematichq.com";
+  webSocketConnectionTimeout = 1e4;
+  webSocketReconnect = true;
+  webSocketMaxReconnectAttempts = 7;
+  webSocketInitialRetryDelay = 1e3;
+  webSocketMaxRetryDelay = 3e4;
+  wsReconnectAttempts = 0;
+  wsReconnectTimer = null;
+  wsIntentionalDisconnect = false;
+  maxEventQueueSize = 100;
+  // Prevent memory issues with very long network outages
+  maxEventRetries = 5;
+  // Maximum retry attempts for failed events
+  eventRetryInitialDelay = 1e3;
+  // Initial retry delay in ms
+  eventRetryMaxDelay = 3e4;
+  // Maximum retry delay in ms
+  retryTimer = null;
   constructor(apiKey, options) {
     this.apiKey = apiKey;
     this.eventQueue = [];
@@ -819,11 +836,48 @@ var Schematic = class {
     if (options?.webSocketUrl !== void 0) {
       this.webSocketUrl = options.webSocketUrl;
     }
+    if (options?.webSocketConnectionTimeout !== void 0) {
+      this.webSocketConnectionTimeout = options.webSocketConnectionTimeout;
+    }
+    if (options?.webSocketReconnect !== void 0) {
+      this.webSocketReconnect = options.webSocketReconnect;
+    }
+    if (options?.webSocketMaxReconnectAttempts !== void 0) {
+      this.webSocketMaxReconnectAttempts = options.webSocketMaxReconnectAttempts;
+    }
+    if (options?.webSocketInitialRetryDelay !== void 0) {
+      this.webSocketInitialRetryDelay = options.webSocketInitialRetryDelay;
+    }
+    if (options?.webSocketMaxRetryDelay !== void 0) {
+      this.webSocketMaxRetryDelay = options.webSocketMaxRetryDelay;
+    }
+    if (options?.maxEventQueueSize !== void 0) {
+      this.maxEventQueueSize = options.maxEventQueueSize;
+    }
+    if (options?.maxEventRetries !== void 0) {
+      this.maxEventRetries = options.maxEventRetries;
+    }
+    if (options?.eventRetryInitialDelay !== void 0) {
+      this.eventRetryInitialDelay = options.eventRetryInitialDelay;
+    }
+    if (options?.eventRetryMaxDelay !== void 0) {
+      this.eventRetryMaxDelay = options.eventRetryMaxDelay;
+    }
     if (typeof window !== "undefined" && window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
         this.flushContextDependentEventQueue();
       });
+      if (this.useWebSocket) {
+        window.addEventListener("offline", () => {
+          this.debug("Browser went offline, closing WebSocket connection");
+          this.handleNetworkOffline();
+        });
+        window.addEventListener("online", () => {
+          this.debug("Browser came online, attempting to reconnect WebSocket");
+          this.handleNetworkOnline();
+        });
+      }
     }
     if (this.offlineEnabled) {
       this.debug(
@@ -1088,6 +1142,13 @@ var Schematic = class {
     try {
       this.setIsPending(true);
       if (!this.conn) {
+        if (this.wsReconnectTimer !== null) {
+          this.debug(
+            `Cancelling scheduled reconnection, connecting immediately`
+          );
+          clearTimeout(this.wsReconnectTimer);
+          this.wsReconnectTimer = null;
+        }
         this.conn = this.wsConnect();
       }
       const socket = await this.conn;
@@ -1217,11 +1278,53 @@ var Schematic = class {
       }
     }
   };
-  flushEventQueue = () => {
-    while (this.eventQueue.length > 0) {
-      const event = this.eventQueue.shift();
-      if (event) {
-        this.sendEvent(event);
+  startRetryTimer = () => {
+    if (this.retryTimer !== null) {
+      return;
+    }
+    this.retryTimer = setInterval(() => {
+      this.flushEventQueue().catch((error) => {
+        this.debug("Error in retry timer flush:", error);
+      });
+      if (this.eventQueue.length === 0) {
+        this.stopRetryTimer();
+      }
+    }, 5e3);
+    this.debug("Started retry timer");
+  };
+  stopRetryTimer = () => {
+    if (this.retryTimer !== null) {
+      clearInterval(this.retryTimer);
+      this.retryTimer = null;
+      this.debug("Stopped retry timer");
+    }
+  };
+  flushEventQueue = async () => {
+    if (this.eventQueue.length === 0) {
+      return;
+    }
+    const now = Date.now();
+    const readyEvents = [];
+    const notReadyEvents = [];
+    for (const event of this.eventQueue) {
+      if (event.next_retry_at === void 0 || event.next_retry_at <= now) {
+        readyEvents.push(event);
+      } else {
+        notReadyEvents.push(event);
+      }
+    }
+    if (readyEvents.length === 0) {
+      this.debug(`No events ready for retry yet (${notReadyEvents.length} still in backoff)`);
+      return;
+    }
+    this.debug(`Flushing event queue: ${readyEvents.length} ready, ${notReadyEvents.length} waiting`);
+    this.eventQueue = notReadyEvents;
+    for (const event of readyEvents) {
+      try {
+        await this.sendEvent(event);
+        this.debug(`Queued event sent successfully:`, event.type);
+      } catch (error) {
+        this.debug(`Failed to send queued event:`, error);
       }
     }
   };
@@ -1269,12 +1372,37 @@ var Schematic = class {
         },
         body: payload
       });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
       this.debug(`event sent:`, {
         status: response.status,
         statusText: response.statusText
       });
     } catch (error) {
-      console.error("Error sending Schematic event: ", error);
+      const retryCount = (event.retry_count ?? 0) + 1;
+      if (retryCount <= this.maxEventRetries) {
+        this.debug(`Event failed to send (attempt ${retryCount}/${this.maxEventRetries}), queueing for retry:`, error);
+        const baseDelay = this.eventRetryInitialDelay * Math.pow(2, retryCount - 1);
+        const jitterDelay = Math.min(baseDelay, this.eventRetryMaxDelay);
+        const nextRetryAt = Date.now() + jitterDelay;
+        const retryEvent = {
+          ...event,
+          retry_count: retryCount,
+          next_retry_at: nextRetryAt
+        };
+        if (this.eventQueue.length < this.maxEventQueueSize) {
+          this.eventQueue.push(retryEvent);
+          this.debug(`Event queued for retry in ${jitterDelay}ms (${this.eventQueue.length}/${this.maxEventQueueSize})`);
+        } else {
+          this.debug(`Event queue full (${this.maxEventQueueSize}), dropping oldest event`);
+          this.eventQueue.shift();
+          this.eventQueue.push(retryEvent);
+        }
+        this.startRetryTimer();
+      } else {
+        this.debug(`Event failed permanently after ${this.maxEventRetries} attempts, dropping:`, error);
+      }
     }
     return Promise.resolve();
   };
@@ -1294,6 +1422,12 @@ var Schematic = class {
       this.debug("cleanup: skipped (offline mode)");
       return Promise.resolve();
     }
+    this.wsIntentionalDisconnect = true;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+    this.stopRetryTimer();
     if (this.conn) {
       try {
         const socket = await this.conn;
@@ -1305,6 +1439,100 @@ var Schematic = class {
       }
     }
   };
+  /**
+   * Calculate the delay for the next reconnection attempt using exponential backoff with jitter.
+   * This helps prevent dogpiling when the server recovers from an outage.
+   */
+  calculateReconnectDelay = () => {
+    const exponentialDelay = this.webSocketInitialRetryDelay * Math.pow(2, this.wsReconnectAttempts);
+    const cappedDelay = Math.min(exponentialDelay, this.webSocketMaxRetryDelay);
+    const jitter = Math.random() * cappedDelay * 0.5;
+    const totalDelay = cappedDelay + jitter;
+    this.debug(
+      `Reconnect delay calculated: ${totalDelay.toFixed(0)}ms (attempt ${this.wsReconnectAttempts + 1}/${this.webSocketMaxReconnectAttempts})`
+    );
+    return totalDelay;
+  };
+  /**
+   * Handle browser going offline
+   */
+  handleNetworkOffline = async () => {
+    if (this.conn !== null) {
+      try {
+        const socket = await this.conn;
+        socket.close();
+      } catch (error) {
+        this.debug("Error closing connection on offline:", error);
+      }
+      this.conn = null;
+    }
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+  };
+  /**
+   * Handle browser coming back online
+   */
+  handleNetworkOnline = () => {
+    this.debug("Network online, attempting reconnection and flushing queued events");
+    this.wsReconnectAttempts = 0;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+    this.flushEventQueue().catch((error) => {
+      this.debug("Error flushing event queue on network online:", error);
+    });
+    this.attemptReconnect();
+  };
+  /**
+   * Attempt to reconnect the WebSocket connection with exponential backoff.
+   * Called automatically when the connection closes unexpectedly.
+   */
+  attemptReconnect = () => {
+    if (this.wsReconnectAttempts >= this.webSocketMaxReconnectAttempts) {
+      this.debug(
+        `Maximum reconnection attempts (${this.webSocketMaxReconnectAttempts}) reached, giving up`
+      );
+      return;
+    }
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+    }
+    const delay = this.calculateReconnectDelay();
+    this.debug(
+      `Scheduling reconnection attempt ${this.wsReconnectAttempts + 1}/${this.webSocketMaxReconnectAttempts} in ${delay.toFixed(0)}ms`
+    );
+    this.wsReconnectTimer = setTimeout(async () => {
+      this.wsReconnectTimer = null;
+      this.wsReconnectAttempts++;
+      this.debug(
+        `Attempting to reconnect (attempt ${this.wsReconnectAttempts}/${this.webSocketMaxReconnectAttempts})`
+      );
+      try {
+        this.conn = this.wsConnect();
+        const socket = await this.conn;
+        this.debug(`Reconnection context check:`, {
+          hasCompany: this.context.company !== void 0,
+          hasUser: this.context.user !== void 0,
+          context: this.context
+        });
+        if (this.context.company !== void 0 || this.context.user !== void 0) {
+          this.debug(`Reconnected, force re-sending context`);
+          await this.wsSendContextAfterReconnection(socket, this.context);
+        } else {
+          this.debug(`No context to re-send after reconnection - websocket ready for new context`);
+        }
+        this.flushEventQueue().catch((error) => {
+          this.debug("Error flushing event queue after websocket reconnection:", error);
+        });
+        this.debug(`Reconnection successful`);
+      } catch (error) {
+        this.debug(`Reconnection attempt failed:`, error);
+      }
+    }, delay);
+  };
   // Open a websocket connection
   wsConnect = () => {
     if (this.isOffline()) {
@@ -1317,18 +1545,101 @@ var Schematic = class {
       const wsUrl = `${this.webSocketUrl}/flags/bootstrap?apiKey=${this.apiKey}`;
       this.debug(`connecting to WebSocket:`, wsUrl);
       const webSocket = new WebSocket(wsUrl);
+      let timeoutId = null;
+      let isResolved = false;
+      timeoutId = setTimeout(() => {
+        if (!isResolved) {
+          this.debug(
+            `WebSocket connection timeout after ${this.webSocketConnectionTimeout}ms`
+          );
+          webSocket.close();
+          reject(new Error("WebSocket connection timeout"));
+        }
+      }, this.webSocketConnectionTimeout);
       webSocket.onopen = () => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
+        this.wsReconnectAttempts = 0;
+        this.wsIntentionalDisconnect = false;
         this.debug(`WebSocket connection opened`);
         resolve(webSocket);
       };
       webSocket.onerror = (error) => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
         this.debug(`WebSocket connection error:`, error);
         reject(error);
       };
       webSocket.onclose = () => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
         this.debug(`WebSocket connection closed`);
         this.conn = null;
+        if (!this.wsIntentionalDisconnect && this.webSocketReconnect) {
+          this.attemptReconnect();
+        }
+      };
+    });
+  };
+  // Send a message on the websocket after reconnection, forcing the send even if context appears unchanged
+  // because the server has lost all state and needs the initial context
+  wsSendContextAfterReconnection = (socket, context) => {
+    if (this.isOffline()) {
+      this.debug("wsSendContextAfterReconnection: skipped (offline mode)");
+      this.setIsPending(false);
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+      this.debug(`WebSocket force sending context after reconnection:`, context);
+      this.context = context;
+      const sendMessage = () => {
+        let resolved = false;
+        const messageHandler = (event) => {
+          const message = JSON.parse(event.data);
+          this.debug(`WebSocket message received after reconnection:`, message);
+          if (!(contextString(context) in this.checks)) {
+            this.checks[contextString(context)] = {};
+          }
+          (message.flags ?? []).forEach((flag) => {
+            const flagCheck = CheckFlagReturnFromJSON(flag);
+            const contextStr = contextString(context);
+            if (this.checks[contextStr] === void 0) {
+              this.checks[contextStr] = {};
+            }
+            this.checks[contextStr][flagCheck.flag] = flagCheck;
+          });
+          this.useWebSocket = true;
+          socket.removeEventListener("message", messageHandler);
+          if (!resolved) {
+            resolved = true;
+            resolve(this.setIsPending(false));
+          }
+        };
+        socket.addEventListener("message", messageHandler);
+        const clientVersion = this.additionalHeaders["X-Schematic-Client-Version"] ?? `schematic-js@${version}`;
+        const messagePayload = {
+          apiKey: this.apiKey,
+          clientVersion,
+          data: context
+        };
+        this.debug(`WebSocket sending forced message after reconnection:`, messagePayload);
+        socket.send(JSON.stringify(messagePayload));
       };
+      if (socket.readyState === WebSocket.OPEN) {
+        this.debug(`WebSocket already open, sending forced message after reconnection`);
+        sendMessage();
+      } else {
+        socket.addEventListener("open", () => {
+          this.debug(`WebSocket opened, sending forced message after reconnection`);
+          sendMessage();
+        });
+      }
     });
   };
   // Send a message on the websocket indicating interest in a particular evaluation context
@@ -1519,7 +1830,7 @@ var notifyFlagValueListener = (listener, value) => {
 import React, { createContext, useEffect, useMemo, useRef } from "react";
 
 // src/version.ts
-var version2 = "1.2.6";
+var version2 = "1.2.8";
 
 // src/context/schematic.tsx
 import { jsx } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-react",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "main": "dist/schematic-react.cjs.js",
   "module": "dist/schematic-react.esm.js",
   "types": "dist/schematic-react.d.ts",
@@ -24,40 +24,38 @@
     "clean": "rm -rf dist",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --fix",
-    "test": "jest --config jest.config.js",
-    "test:reactnative": "jest --config jest.config.reactnative.js",
+    "test": "vitest run",
+    "test:reactnative": "vitest run --config vitest.config.reactnative.ts",
+    "test:watch": "vitest",
     "tsc": "npx tsc",
     "prepare": "husky"
   },
   "dependencies": {
-    "@schematichq/schematic-js": "^1.2.6"
+    "@schematichq/schematic-js": "^1.2.8"
   },
   "devDependencies": {
-    "@eslint/js": "^9.24.0",
-    "@microsoft/api-extractor": "^7.52.2",
+    "@eslint/js": "^9.39.1",
+    "@microsoft/api-extractor": "^7.55.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/jest": "^30.0.0",
-    "@types/react": "^19.1.1",
-    "esbuild": "^0.25.2",
-    "esbuild-jest": "^0.5.0",
-    "eslint": "^9.24.0",
+    "@types/react": "^19.2.6",
+    "@vitest/browser": "^4.0.8",
+    "esbuild": "^0.27.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16.5.0",
+    "happy-dom": "^20.0.10",
     "husky": "^9.1.7",
-    "jest": "^30.0.0",
-    "jest-environment-jsdom": "^30.0.0",
-    "jest-esbuild": "^0.4.0",
-    "jest-fetch-mock": "^3.0.3",
+    "jsdom": "^27.2.0",
     "prettier": "^3.6.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "ts-jest": "^29.3.0",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.29.1"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.47.0",
+    "vitest": "^4.0.8"
   },
   "peerDependencies": {
     "react": ">=18"