@schematichq/schematic-react 1.2.5 → 1.2.7

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

@@ -72,20 +72,20 @@ var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__
 var require_browser_polyfill = __commonJS({
   "node_modules/cross-fetch/dist/browser-polyfill.js"(exports) {
     (function(self2) {
-      var irrelevant = function(exports2) {
+      var irrelevant = (function(exports2) {
         var g = typeof globalThis !== "undefined" && globalThis || typeof self2 !== "undefined" && self2 || // eslint-disable-next-line no-undef
         typeof global !== "undefined" && global || {};
         var support = {
           searchParams: "URLSearchParams" in g,
           iterable: "Symbol" in g && "iterator" in Symbol,
-          blob: "FileReader" in g && "Blob" in g && function() {
+          blob: "FileReader" in g && "Blob" in g && (function() {
             try {
               new Blob();
               return true;
             } catch (e) {
               return false;
             }
-          }(),
+          })(),
           formData: "FormData" in g,
           arrayBuffer: "ArrayBuffer" in g
         };
@@ -387,12 +387,12 @@ var require_browser_polyfill = __commonJS({
           }
           this.method = normalizeMethod(options.method || this.method || "GET");
           this.mode = options.mode || this.mode || null;
-          this.signal = options.signal || this.signal || function() {
+          this.signal = options.signal || this.signal || (function() {
             if ("AbortController" in g) {
               var ctrl = new AbortController();
               return ctrl.signal;
             }
-          }();
+          })();
           this.referrer = null;
           if ((this.method === "GET" || this.method === "HEAD") && body) {
             throw new TypeError("Body not allowed for GET or HEAD requests");
@@ -599,7 +599,7 @@ var require_browser_polyfill = __commonJS({
         exports2.Response = Response;
         exports2.fetch = fetch2;
         return exports2;
-      }({});
+      })({});
     })(typeof self !== "undefined" ? self : exports);
   }
 });
@@ -623,10 +623,7 @@ function rng() {
 }
 var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 var native_default = { randomUUID };
-function v4(options, buf, offset) {
-  if (native_default.randomUUID && !buf && !options) {
-    return native_default.randomUUID();
-  }
+function _v4(options, buf, offset) {
   options = options || {};
   const rnds = options.random ?? options.rng?.() ?? rng();
   if (rnds.length < 16) {
@@ -646,6 +643,12 @@ function v4(options, buf, offset) {
   }
   return unsafeStringify(rnds);
 }
+function v4(options, buf, offset) {
+  if (native_default.randomUUID && !buf && !options) {
+    return native_default.randomUUID();
+  }
+  return _v4(options, buf, offset);
+}
 var v4_default = v4;
 var import_polyfill = __toESM2(require_browser_polyfill());
 function CheckFlagResponseDataFromJSON(json) {
@@ -796,7 +799,7 @@ function contextString(context) {
   }, {});
   return JSON.stringify(sortedContext);
 }
-var version = "1.2.3";
+var version = "1.2.7";
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   additionalHeaders = {};
@@ -807,6 +810,7 @@ var Schematic = class {
   debugEnabled = false;
   offlineEnabled = false;
   eventQueue;
+  contextDependentEventQueue;
   eventUrl = "https://c.schematichq.com";
   flagCheckListeners = {};
   flagValueListeners = {};
@@ -817,9 +821,18 @@ 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;
   constructor(apiKey, options) {
     this.apiKey = apiKey;
     this.eventQueue = [];
+    this.contextDependentEventQueue = [];
     this.useWebSocket = options?.useWebSocket ?? false;
     this.debugEnabled = options?.debug ?? false;
     this.offlineEnabled = options?.offline ?? false;
@@ -859,10 +872,36 @@ 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 (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(
@@ -1120,12 +1159,20 @@ var Schematic = class {
   setContext = async (context) => {
     if (this.isOffline() || !this.useWebSocket) {
       this.context = context;
+      this.flushContextDependentEventQueue();
       this.setIsPending(false);
       return Promise.resolve();
     }
     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;
@@ -1142,6 +1189,25 @@ var Schematic = class {
    */
   track = (body) => {
     const { company, user, event, traits, quantity = 1 } = body;
+    if (!this.hasContext(company, user)) {
+      this.debug(`track: queuing event "${event}" until context is available`);
+      const queuedEvent = {
+        api_key: this.apiKey,
+        body: {
+          company,
+          event,
+          traits: traits ?? {},
+          user,
+          quantity
+        },
+        sent_at: (/* @__PURE__ */ new Date()).toISOString(),
+        tracker_event_id: v4_default(),
+        tracker_user_id: this.getAnonymousId(),
+        type: "track"
+      };
+      this.contextDependentEventQueue.push(queuedEvent);
+      return Promise.resolve();
+    }
     const trackData = {
       company: company ?? this.context.company,
       event,
@@ -1204,6 +1270,38 @@ var Schematic = class {
   /**
    * Event processing
    */
+  hasContext = (company, user) => {
+    const hasProvidedContext = company !== void 0 && company !== null && Object.keys(company).length > 0 || user !== void 0 && user !== null && Object.keys(user).length > 0;
+    const hasInstanceContext = this.context.company !== void 0 && this.context.company !== null && Object.keys(this.context.company).length > 0 || this.context.user !== void 0 && this.context.user !== null && Object.keys(this.context.user).length > 0;
+    return hasProvidedContext || hasInstanceContext;
+  };
+  flushContextDependentEventQueue = () => {
+    this.debug(
+      `flushing ${this.contextDependentEventQueue.length} context-dependent events`
+    );
+    while (this.contextDependentEventQueue.length > 0) {
+      const event = this.contextDependentEventQueue.shift();
+      if (event) {
+        if (event.type === "track" && typeof event.body === "object" && event.body !== null) {
+          const trackBody = event.body;
+          const updatedBody = {
+            ...trackBody,
+            company: trackBody.company ?? this.context.company,
+            user: trackBody.user ?? this.context.user
+          };
+          const updatedEvent = {
+            ...event,
+            body: updatedBody,
+            sent_at: (/* @__PURE__ */ new Date()).toISOString()
+            // Update timestamp to actual send time
+          };
+          this.sendEvent(updatedEvent);
+        } else {
+          this.sendEvent(event);
+        }
+      }
+    }
+  };
   flushEventQueue = () => {
     while (this.eventQueue.length > 0) {
       const event = this.eventQueue.shift();
@@ -1233,7 +1331,7 @@ var Schematic = class {
       tracker_user_id: this.getAnonymousId(),
       type: eventType
     };
-    if (document?.hidden) {
+    if (typeof document !== "undefined" && document?.hidden) {
       return this.storeEvent(event);
     } else {
       return this.sendEvent(event);
@@ -1281,6 +1379,11 @@ 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;
+    }
     if (this.conn) {
       try {
         const socket = await this.conn;
@@ -1292,6 +1395,91 @@ 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 = () => {
+    if (this.context.company === void 0 && this.context.user === void 0) {
+      this.debug("No context set, skipping reconnection");
+      return;
+    }
+    this.wsReconnectAttempts = 0;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+    this.debug("Network online, reconnecting immediately");
+    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;
+        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(`Reconnection successful`);
+      } catch (error) {
+        this.debug(`Reconnection attempt failed:`, error);
+      }
+    }, delay);
+  };
   // Open a websocket connection
   wsConnect = () => {
     if (this.isOffline()) {
@@ -1304,17 +1492,45 @@ 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();
+        }
       };
     });
   };
@@ -1362,6 +1578,7 @@ var Schematic = class {
             this.notifyFlagCheckListeners(flag.flag, flagCheck);
             this.notifyFlagValueListeners(flag.flag, flagCheck.value);
           });
+          this.flushContextDependentEventQueue();
           this.setIsPending(false);
           if (!resolved) {
             resolved = true;
@@ -1505,7 +1722,7 @@ var notifyFlagValueListener = (listener, value) => {
 var import_react = __toESM(require("react"));
 
 // src/version.ts
-var version2 = "1.2.5";
+var version2 = "1.2.7";
 
 // src/context/schematic.tsx
 var import_jsx_runtime = require("react/jsx-runtime");

package/dist/schematic-react.d.ts

@@ -11,6 +11,7 @@ import { Schematic } from '@schematichq/schematic-js';
 import { SchematicContext } from '@schematichq/schematic-js';
 import * as SchematicJS from '@schematichq/schematic-js';
 import { SchematicOptions } from '@schematichq/schematic-js';
+import { StoragePersister } from '@schematichq/schematic-js';
 import { Traits } from '@schematichq/schematic-js';
 import { UsagePeriod } from '@schematichq/schematic-js';
 
@@ -62,6 +63,8 @@ declare type SchematicProviderPropsWithPublishableKey = BaseSchematicProviderPro
     publishableKey: string;
 };
 
+export { StoragePersister }
+
 export { Traits }
 
 export { UsagePeriod }

package/dist/schematic-react.esm.js

@@ -27,20 +27,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var require_browser_polyfill = __commonJS({
   "node_modules/cross-fetch/dist/browser-polyfill.js"(exports) {
     (function(self2) {
-      var irrelevant = function(exports2) {
+      var irrelevant = (function(exports2) {
         var g = typeof globalThis !== "undefined" && globalThis || typeof self2 !== "undefined" && self2 || // eslint-disable-next-line no-undef
         typeof global !== "undefined" && global || {};
         var support = {
           searchParams: "URLSearchParams" in g,
           iterable: "Symbol" in g && "iterator" in Symbol,
-          blob: "FileReader" in g && "Blob" in g && function() {
+          blob: "FileReader" in g && "Blob" in g && (function() {
             try {
               new Blob();
               return true;
             } catch (e) {
               return false;
             }
-          }(),
+          })(),
           formData: "FormData" in g,
           arrayBuffer: "ArrayBuffer" in g
         };
@@ -342,12 +342,12 @@ var require_browser_polyfill = __commonJS({
           }
           this.method = normalizeMethod(options.method || this.method || "GET");
           this.mode = options.mode || this.mode || null;
-          this.signal = options.signal || this.signal || function() {
+          this.signal = options.signal || this.signal || (function() {
             if ("AbortController" in g) {
               var ctrl = new AbortController();
               return ctrl.signal;
             }
-          }();
+          })();
           this.referrer = null;
           if ((this.method === "GET" || this.method === "HEAD") && body) {
             throw new TypeError("Body not allowed for GET or HEAD requests");
@@ -554,7 +554,7 @@ var require_browser_polyfill = __commonJS({
         exports2.Response = Response;
         exports2.fetch = fetch2;
         return exports2;
-      }({});
+      })({});
     })(typeof self !== "undefined" ? self : exports);
   }
 });
@@ -578,10 +578,7 @@ function rng() {
 }
 var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 var native_default = { randomUUID };
-function v4(options, buf, offset) {
-  if (native_default.randomUUID && !buf && !options) {
-    return native_default.randomUUID();
-  }
+function _v4(options, buf, offset) {
   options = options || {};
   const rnds = options.random ?? options.rng?.() ?? rng();
   if (rnds.length < 16) {
@@ -601,6 +598,12 @@ function v4(options, buf, offset) {
   }
   return unsafeStringify(rnds);
 }
+function v4(options, buf, offset) {
+  if (native_default.randomUUID && !buf && !options) {
+    return native_default.randomUUID();
+  }
+  return _v4(options, buf, offset);
+}
 var v4_default = v4;
 var import_polyfill = __toESM(require_browser_polyfill());
 function CheckFlagResponseDataFromJSON(json) {
@@ -751,7 +754,7 @@ function contextString(context) {
   }, {});
   return JSON.stringify(sortedContext);
 }
-var version = "1.2.3";
+var version = "1.2.7";
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   additionalHeaders = {};
@@ -762,6 +765,7 @@ var Schematic = class {
   debugEnabled = false;
   offlineEnabled = false;
   eventQueue;
+  contextDependentEventQueue;
   eventUrl = "https://c.schematichq.com";
   flagCheckListeners = {};
   flagValueListeners = {};
@@ -772,9 +776,18 @@ 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;
   constructor(apiKey, options) {
     this.apiKey = apiKey;
     this.eventQueue = [];
+    this.contextDependentEventQueue = [];
     this.useWebSocket = options?.useWebSocket ?? false;
     this.debugEnabled = options?.debug ?? false;
     this.offlineEnabled = options?.offline ?? false;
@@ -814,10 +827,36 @@ 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 (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(
@@ -1075,12 +1114,20 @@ var Schematic = class {
   setContext = async (context) => {
     if (this.isOffline() || !this.useWebSocket) {
       this.context = context;
+      this.flushContextDependentEventQueue();
       this.setIsPending(false);
       return Promise.resolve();
     }
     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;
@@ -1097,6 +1144,25 @@ var Schematic = class {
    */
   track = (body) => {
     const { company, user, event, traits, quantity = 1 } = body;
+    if (!this.hasContext(company, user)) {
+      this.debug(`track: queuing event "${event}" until context is available`);
+      const queuedEvent = {
+        api_key: this.apiKey,
+        body: {
+          company,
+          event,
+          traits: traits ?? {},
+          user,
+          quantity
+        },
+        sent_at: (/* @__PURE__ */ new Date()).toISOString(),
+        tracker_event_id: v4_default(),
+        tracker_user_id: this.getAnonymousId(),
+        type: "track"
+      };
+      this.contextDependentEventQueue.push(queuedEvent);
+      return Promise.resolve();
+    }
     const trackData = {
       company: company ?? this.context.company,
       event,
@@ -1159,6 +1225,38 @@ var Schematic = class {
   /**
    * Event processing
    */
+  hasContext = (company, user) => {
+    const hasProvidedContext = company !== void 0 && company !== null && Object.keys(company).length > 0 || user !== void 0 && user !== null && Object.keys(user).length > 0;
+    const hasInstanceContext = this.context.company !== void 0 && this.context.company !== null && Object.keys(this.context.company).length > 0 || this.context.user !== void 0 && this.context.user !== null && Object.keys(this.context.user).length > 0;
+    return hasProvidedContext || hasInstanceContext;
+  };
+  flushContextDependentEventQueue = () => {
+    this.debug(
+      `flushing ${this.contextDependentEventQueue.length} context-dependent events`
+    );
+    while (this.contextDependentEventQueue.length > 0) {
+      const event = this.contextDependentEventQueue.shift();
+      if (event) {
+        if (event.type === "track" && typeof event.body === "object" && event.body !== null) {
+          const trackBody = event.body;
+          const updatedBody = {
+            ...trackBody,
+            company: trackBody.company ?? this.context.company,
+            user: trackBody.user ?? this.context.user
+          };
+          const updatedEvent = {
+            ...event,
+            body: updatedBody,
+            sent_at: (/* @__PURE__ */ new Date()).toISOString()
+            // Update timestamp to actual send time
+          };
+          this.sendEvent(updatedEvent);
+        } else {
+          this.sendEvent(event);
+        }
+      }
+    }
+  };
   flushEventQueue = () => {
     while (this.eventQueue.length > 0) {
       const event = this.eventQueue.shift();
@@ -1188,7 +1286,7 @@ var Schematic = class {
       tracker_user_id: this.getAnonymousId(),
       type: eventType
     };
-    if (document?.hidden) {
+    if (typeof document !== "undefined" && document?.hidden) {
       return this.storeEvent(event);
     } else {
       return this.sendEvent(event);
@@ -1236,6 +1334,11 @@ 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;
+    }
     if (this.conn) {
       try {
         const socket = await this.conn;
@@ -1247,6 +1350,91 @@ 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 = () => {
+    if (this.context.company === void 0 && this.context.user === void 0) {
+      this.debug("No context set, skipping reconnection");
+      return;
+    }
+    this.wsReconnectAttempts = 0;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+    this.debug("Network online, reconnecting immediately");
+    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;
+        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(`Reconnection successful`);
+      } catch (error) {
+        this.debug(`Reconnection attempt failed:`, error);
+      }
+    }, delay);
+  };
   // Open a websocket connection
   wsConnect = () => {
     if (this.isOffline()) {
@@ -1259,17 +1447,45 @@ 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();
+        }
       };
     });
   };
@@ -1317,6 +1533,7 @@ var Schematic = class {
             this.notifyFlagCheckListeners(flag.flag, flagCheck);
             this.notifyFlagValueListeners(flag.flag, flagCheck.value);
           });
+          this.flushContextDependentEventQueue();
           this.setIsPending(false);
           if (!resolved) {
             resolved = true;
@@ -1460,7 +1677,7 @@ var notifyFlagValueListener = (listener, value) => {
 import React, { createContext, useEffect, useMemo, useRef } from "react";
 
 // src/version.ts
-var version2 = "1.2.5";
+var version2 = "1.2.7";
 
 // src/context/schematic.tsx
 import { jsx } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-react",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "main": "dist/schematic-react.cjs.js",
   "module": "dist/schematic-react.esm.js",
   "types": "dist/schematic-react.d.ts",
@@ -24,35 +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": "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.3"
+    "@schematichq/schematic-js": "^1.2.7"
   },
   "devDependencies": {
-    "@eslint/js": "^9.24.0",
-    "@microsoft/api-extractor": "^7.52.2",
-    "@types/jest": "^29.5.14",
-    "@types/react": "^19.1.1",
-    "esbuild": "^0.25.2",
-    "esbuild-jest": "^0.5.0",
-    "eslint": "^9.24.0",
-    "eslint-plugin-import": "^2.31.0",
+    "@eslint/js": "^9.39.1",
+    "@microsoft/api-extractor": "^7.55.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.3",
+    "@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.1.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": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-esbuild": "^0.3.0",
-    "jest-fetch-mock": "^3.0.3",
-    "prettier": "^3.4.2",
-    "react": "^19.1.0",
-    "ts-jest": "^29.3.0",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.29.1"
+    "jsdom": "^27.2.0",
+    "prettier": "^3.6.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vitest": "^4.0.8"
   },
   "peerDependencies": {
     "react": ">=18"