@schematichq/schematic-react 1.2.7 → 1.2.8

package/dist/schematic-react.cjs.js

@@ -799,7 +799,7 @@ function contextString(context) {
   }, {});
   return JSON.stringify(sortedContext);
 }
-var version = "1.2.7";
+var version = "1.2.8";
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   additionalHeaders = {};
@@ -829,6 +829,15 @@ var Schematic = class {
   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 = [];
@@ -887,6 +896,18 @@ var Schematic = class {
     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();
@@ -1302,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);
       }
     }
   };
@@ -1354,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();
   };
@@ -1384,6 +1472,7 @@ var Schematic = class {
       clearTimeout(this.wsReconnectTimer);
       this.wsReconnectTimer = null;
     }
+    this.stopRetryTimer();
     if (this.conn) {
       try {
         const socket = await this.conn;
@@ -1431,16 +1520,15 @@ var Schematic = class {
    * Handle browser coming back online
    */
   handleNetworkOnline = () => {
-    if (this.context.company === void 0 && this.context.user === void 0) {
-      this.debug("No context set, skipping reconnection");
-      return;
-    }
+    this.debug("Network online, attempting reconnection and flushing queued events");
     this.wsReconnectAttempts = 0;
     if (this.wsReconnectTimer !== null) {
       clearTimeout(this.wsReconnectTimer);
       this.wsReconnectTimer = null;
     }
-    this.debug("Network online, reconnecting immediately");
+    this.flushEventQueue().catch((error) => {
+      this.debug("Error flushing event queue on network online:", error);
+    });
     this.attemptReconnect();
   };
   /**
@@ -1470,10 +1558,20 @@ var Schematic = class {
       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, re-sending context`);
-          await this.wsSendMessage(socket, this.context);
+          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);
@@ -1534,6 +1632,61 @@ var Schematic = class {
       };
     });
   };
+  // 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
   // and wait for the initial set of flag values to be returned
   wsSendMessage = (socket, context) => {
@@ -1722,7 +1875,7 @@ var notifyFlagValueListener = (listener, value) => {
 var import_react = __toESM(require("react"));
 
 // src/version.ts
-var version2 = "1.2.7";
+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.7";
+var version = "1.2.8";
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   additionalHeaders = {};
@@ -784,6 +784,15 @@ var Schematic = class {
   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 = [];
@@ -842,6 +851,18 @@ var Schematic = class {
     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();
@@ -1257,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);
       }
     }
   };
@@ -1309,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();
   };
@@ -1339,6 +1427,7 @@ var Schematic = class {
       clearTimeout(this.wsReconnectTimer);
       this.wsReconnectTimer = null;
     }
+    this.stopRetryTimer();
     if (this.conn) {
       try {
         const socket = await this.conn;
@@ -1386,16 +1475,15 @@ var Schematic = class {
    * Handle browser coming back online
    */
   handleNetworkOnline = () => {
-    if (this.context.company === void 0 && this.context.user === void 0) {
-      this.debug("No context set, skipping reconnection");
-      return;
-    }
+    this.debug("Network online, attempting reconnection and flushing queued events");
     this.wsReconnectAttempts = 0;
     if (this.wsReconnectTimer !== null) {
       clearTimeout(this.wsReconnectTimer);
       this.wsReconnectTimer = null;
     }
-    this.debug("Network online, reconnecting immediately");
+    this.flushEventQueue().catch((error) => {
+      this.debug("Error flushing event queue on network online:", error);
+    });
     this.attemptReconnect();
   };
   /**
@@ -1425,10 +1513,20 @@ var Schematic = class {
       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, re-sending context`);
-          await this.wsSendMessage(socket, this.context);
+          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);
@@ -1489,6 +1587,61 @@ var Schematic = class {
       };
     });
   };
+  // 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
   // and wait for the initial set of flag values to be returned
   wsSendMessage = (socket, context) => {
@@ -1677,7 +1830,7 @@ var notifyFlagValueListener = (listener, value) => {
 import React, { createContext, useEffect, useMemo, useRef } from "react";
 
 // src/version.ts
-var version2 = "1.2.7";
+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.7",
+  "version": "1.2.8",
   "main": "dist/schematic-react.cjs.js",
   "module": "dist/schematic-react.esm.js",
   "types": "dist/schematic-react.d.ts",
@@ -31,7 +31,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@schematichq/schematic-js": "^1.2.7"
+    "@schematichq/schematic-js": "^1.2.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -39,7 +39,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.2.3",
+    "@types/react": "^19.2.6",
     "@vitest/browser": "^4.0.8",
     "esbuild": "^0.27.0",
     "eslint": "^9.39.1",
@@ -54,7 +54,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.4",
+    "typescript-eslint": "^8.47.0",
     "vitest": "^4.0.8"
   },
   "peerDependencies": {