@allstak/react 0.3.0 → 0.3.2

package/dist/index.mjs

@@ -1,23 +1,41 @@
 // src/index.ts
-import * as React from "react";
+import * as React2 from "react";
 
 // src/transport.ts
-var REQUEST_TIMEOUT = 3e3;
+var REQUEST_TIMEOUT = 2e3;
 var MAX_BUFFER = 100;
+var FAILURE_THRESHOLD = 3;
+var BACKOFF_BASE_MS = 500;
+var BACKOFF_MAX_MS = 3e4;
 var HttpTransport = class {
   constructor(baseUrl, apiKey) {
     this.baseUrl = baseUrl;
     this.apiKey = apiKey;
     this.buffer = [];
     this.flushing = false;
+    this.consecutiveFailures = 0;
+    this.circuitOpenUntil = 0;
+  }
+  send(path, payload) {
+    this.enqueueOrDispatch({ path, payload });
+    return Promise.resolve();
+  }
+  enqueueOrDispatch(item) {
+    if (Date.now() < this.circuitOpenUntil) {
+      this.push(item);
+      return;
+    }
+    void this.dispatch(item).catch(() => void 0);
   }
-  async send(path, payload) {
+  async dispatch(item) {
     try {
-      await this.doFetch(path, payload);
-      await this.flushBuffer();
-    } catch {
-      if (this.buffer.length >= MAX_BUFFER) this.buffer.shift();
-      this.buffer.push({ path, payload });
+      await this.doFetch(item.path, item.payload);
+      this.consecutiveFailures = 0;
+      this.circuitOpenUntil = 0;
+      this.scheduleFlush();
+    } catch (err) {
+      this.recordFailure(err);
+      this.push(item);
     }
   }
   async doFetch(path, payload) {
@@ -39,21 +57,49 @@ var HttpTransport = class {
       clearTimeout(timeoutId);
     }
   }
+  push(item) {
+    if (this.buffer.length >= MAX_BUFFER) this.buffer.shift();
+    this.buffer.push(item);
+  }
+  scheduleFlush() {
+    if (this.flushing || this.buffer.length === 0) return;
+    const delay = Math.max(0, this.circuitOpenUntil - Date.now());
+    const timer = setTimeout(() => {
+      void this.flushBuffer().catch(() => void 0);
+    }, delay);
+    if (typeof timer === "object" && typeof timer.unref === "function") timer.unref();
+  }
   async flushBuffer() {
     if (this.flushing || this.buffer.length === 0) return;
     this.flushing = true;
     try {
       const items = this.buffer.splice(0, this.buffer.length);
       for (const item of items) {
+        if (Date.now() < this.circuitOpenUntil) {
+          this.push(item);
+          continue;
+        }
         try {
           await this.doFetch(item.path, item.payload);
-        } catch {
+          this.consecutiveFailures = 0;
+          this.circuitOpenUntil = 0;
+        } catch (err) {
+          this.recordFailure(err);
+          this.push(item);
         }
       }
     } finally {
       this.flushing = false;
+      if (this.buffer.length > 0) this.scheduleFlush();
     }
   }
+  recordFailure(error) {
+    this.consecutiveFailures++;
+    if (this.consecutiveFailures < FAILURE_THRESHOLD) return;
+    const retryAfterMs = retryAfterFromError(error);
+    const backoff = retryAfterMs ?? jitteredBackoff(this.consecutiveFailures);
+    this.circuitOpenUntil = Date.now() + backoff;
+  }
   getBufferSize() {
     return this.buffer.length;
   }
@@ -73,6 +119,14 @@ var HttpTransport = class {
     return true;
   }
 };
+function jitteredBackoff(failures) {
+  const exp = Math.min(BACKOFF_MAX_MS, BACKOFF_BASE_MS * 2 ** Math.min(8, failures - FAILURE_THRESHOLD));
+  return Math.floor(exp / 2 + Math.random() * (exp / 2));
+}
+function retryAfterFromError(error) {
+  const message = error instanceof Error ? error.message : "";
+  return /HTTP\s+(429|503)/.test(message) ? BACKOFF_MAX_MS : null;
+}
 
 // src/stack.ts
 var V8_FRAME_RE = /^\s*at\s+(?:(.+?)\s+\()?((?:.+?):(\d+):(\d+))\)?\s*$/;
@@ -173,36 +227,92 @@ function instrumentFetch(addBreadcrumb, ownBaseUrl) {
   wrapped[FETCH_FLAG] = true;
   g.fetch = wrapped;
 }
-function instrumentConsole(addBreadcrumb) {
+var CONSOLE_DEFAULTS = {
+  log: false,
+  info: false,
+  warn: true,
+  error: true
+};
+var CONSOLE_METHOD_TO_LEVEL = {
+  log: "info",
+  info: "info",
+  warn: "warn",
+  error: "error"
+};
+var MAX_ARG_BYTES = 5e3;
+function instrumentConsole(addBreadcrumb, options = {}) {
   if (typeof console === "undefined") return;
   if (console[CONSOLE_FLAG]) return;
-  const origWarn = console.warn;
-  const origError = console.error;
-  console.warn = function(...args) {
-    try {
-      addBreadcrumb("log", args.map(safeString).join(" "), "warn");
-    } catch {
-    }
-    return origWarn.apply(console, args);
+  const opts = {
+    log: options.log ?? CONSOLE_DEFAULTS.log,
+    info: options.info ?? CONSOLE_DEFAULTS.info,
+    warn: options.warn ?? CONSOLE_DEFAULTS.warn,
+    error: options.error ?? CONSOLE_DEFAULTS.error
   };
-  console.error = function(...args) {
-    try {
-      addBreadcrumb("log", args.map(safeString).join(" "), "error");
-    } catch {
-    }
-    return origError.apply(console, args);
+  const wrap = (method) => {
+    const orig = console[method];
+    if (typeof orig !== "function") return;
+    const level = CONSOLE_METHOD_TO_LEVEL[method];
+    console[method] = function(...args) {
+      if (opts[method]) {
+        try {
+          const serialized = args.map(safeStringifyArg);
+          const message = truncate(serialized.join(" "));
+          addBreadcrumb("log", message, level, {
+            category: "console",
+            method,
+            args: serialized
+          });
+        } catch {
+        }
+      }
+      return orig.apply(console, args);
+    };
   };
+  if (opts.log) wrap("log");
+  if (opts.info) wrap("info");
+  if (opts.warn) wrap("warn");
+  if (opts.error) wrap("error");
   console[CONSOLE_FLAG] = true;
 }
-function safeString(v) {
-  if (v == null) return String(v);
+function __resetConsoleInstrumentationFlagForTest() {
+  if (typeof console !== "undefined") {
+    delete console[CONSOLE_FLAG];
+  }
+}
+function safeStringifyArg(v) {
+  if (v === null || v === void 0) return String(v);
   if (typeof v === "string") return v;
-  if (v instanceof Error) return `${v.name}: ${v.message}`;
-  try {
-    return typeof v === "object" ? JSON.stringify(v) : String(v);
-  } catch {
-    return Object.prototype.toString.call(v);
+  if (typeof v === "number" || typeof v === "boolean" || typeof v === "bigint") return String(v);
+  if (typeof v === "symbol") return v.toString();
+  if (typeof v === "function") return `[Function${v.name ? ` ${v.name}` : ""}]`;
+  if (v instanceof Error) {
+    return `${v.name || "Error"}: ${v.message}${v.stack ? `
+${v.stack}` : ""}`;
+  }
+  if (typeof v === "object") {
+    try {
+      const seen = /* @__PURE__ */ new WeakSet();
+      const out = JSON.stringify(v, (_key, val) => {
+        if (typeof val === "object" && val !== null) {
+          if (seen.has(val)) return "[Circular]";
+          seen.add(val);
+        }
+        if (typeof val === "bigint") return val.toString();
+        if (typeof val === "function") return `[Function${val.name ? ` ${val.name}` : ""}]`;
+        if (typeof val === "symbol") return val.toString();
+        return val;
+      });
+      return out ?? Object.prototype.toString.call(v);
+    } catch {
+      return Object.prototype.toString.call(v);
+    }
   }
+  return String(v);
+}
+function truncate(s) {
+  if (s.length <= MAX_ARG_BYTES) return s;
+  return s.slice(0, MAX_ARG_BYTES) + "\u2026[truncated]";
 }
 
 // src/navigation.ts
@@ -1219,10 +1329,115 @@ function installHttpInstrumentation(module, options, ownIngestHost) {
   };
 }
 
+// src/web-vitals.ts
+var FLAG3 = "__allstak_web_vitals_started__";
+function startWebVitals(report) {
+  const noop = { destroy: () => {
+  } };
+  if (typeof window === "undefined") return noop;
+  if (typeof PerformanceObserver === "undefined") return noop;
+  if (window[FLAG3]) return noop;
+  window[FLAG3] = true;
+  const observers = [];
+  let lastLcp = 0;
+  try {
+    const obs = new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      const last = entries[entries.length - 1];
+      if (last && typeof last.startTime === "number") {
+        lastLcp = last.startTime;
+      }
+    });
+    obs.observe({ type: "largest-contentful-paint", buffered: true });
+    observers.push(obs);
+  } catch {
+  }
+  let cls = 0;
+  try {
+    const obs = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        if (!entry.hadRecentInput && typeof entry.value === "number") {
+          cls += entry.value;
+        }
+      }
+    });
+    obs.observe({ type: "layout-shift", buffered: true });
+    observers.push(obs);
+  } catch {
+  }
+  let maxInteraction = 0;
+  try {
+    const obs = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        if (typeof entry.duration === "number" && entry.duration > maxInteraction) {
+          maxInteraction = entry.duration;
+        }
+      }
+    });
+    obs.observe({ type: "event", buffered: true, durationThreshold: 40 });
+    observers.push(obs);
+  } catch {
+  }
+  let fcp = 0;
+  try {
+    const obs = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        if (entry.name === "first-contentful-paint") {
+          fcp = entry.startTime;
+        }
+      }
+    });
+    obs.observe({ type: "paint", buffered: true });
+    observers.push(obs);
+  } catch {
+  }
+  const reportTtfb = () => {
+    try {
+      const navEntry = performance.getEntriesByType("navigation")[0];
+      if (navEntry && typeof navEntry.responseStart === "number" && typeof navEntry.requestStart === "number") {
+        const ttfb = Math.max(0, navEntry.responseStart - navEntry.requestStart);
+        report({ name: "TTFB", value: ttfb });
+      }
+    } catch {
+    }
+  };
+  const finalize = () => {
+    if (lastLcp > 0) report({ name: "LCP", value: lastLcp });
+    report({ name: "CLS", value: cls });
+    if (maxInteraction > 0) report({ name: "INP", value: maxInteraction });
+    if (fcp > 0) report({ name: "FCP", value: fcp });
+    reportTtfb();
+  };
+  const onVisibility = () => {
+    if (document.visibilityState === "hidden") finalize();
+  };
+  document.addEventListener("visibilitychange", onVisibility);
+  const onPagehide = () => finalize();
+  window.addEventListener("pagehide", onPagehide);
+  return {
+    destroy: () => {
+      for (const o of observers) {
+        try {
+          o.disconnect();
+        } catch {
+        }
+      }
+      document.removeEventListener("visibilitychange", onVisibility);
+      window.removeEventListener("pagehide", onPagehide);
+      window[FLAG3] = false;
+    }
+  };
+}
+function __resetWebVitalsFlagForTest() {
+  if (typeof window !== "undefined") {
+    window[FLAG3] = false;
+  }
+}
+
 // src/client.ts
 var INGEST_HOST = "https://api.allstak.sa";
 var SDK_NAME = "allstak-react";
-var SDK_VERSION = "0.3.0";
+var SDK_VERSION = "0.3.1";
 var ERRORS_PATH = "/ingest/v1/errors";
 var LOGS_PATH = "/ingest/v1/logs";
 var VALID_BREADCRUMB_TYPES = /* @__PURE__ */ new Set(["http", "log", "ui", "navigation", "query", "default"]);
@@ -1256,6 +1471,7 @@ var AllStakClient = class {
     this._instrumentAxios = null;
     this.onErrorHandler = null;
     this.onRejectionHandler = null;
+    this.webVitals = null;
     if (!config.apiKey) throw new Error("AllStak: config.apiKey is required");
     this.config = { ...config };
     if (!this.config.environment) this.config.environment = "production";
@@ -1282,7 +1498,7 @@ var AllStakClient = class {
     }
     if (config.autoBreadcrumbsConsole !== false) {
       try {
-        instrumentConsole(safeAddBreadcrumb);
+        instrumentConsole(safeAddBreadcrumb, config.captureConsole);
       } catch {
       }
     }
@@ -1292,6 +1508,32 @@ var AllStakClient = class {
       } catch {
       }
     }
+    if (config.autoWebVitals !== false) {
+      try {
+        const send = (m) => {
+          this.transport.send(LOGS_PATH, {
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            level: "info",
+            message: `web-vital:${m.name}=${m.value.toFixed(2)}`,
+            sessionId: this.sessionId,
+            environment: this.config.environment,
+            release: this.config.release,
+            platform: this.config.platform,
+            sdkName: this.config.sdkName,
+            sdkVersion: this.config.sdkVersion,
+            metadata: {
+              category: "web-vital",
+              name: m.name,
+              value: m.value,
+              ...m.id ? { id: m.id } : {},
+              ...this.releaseTags()
+            }
+          });
+        };
+        this.webVitals = startWebVitals(send);
+      } catch {
+      }
+    }
     if (config.replay && (config.replay.enabled ?? true)) {
       try {
         this.replay = new ReplayRecorder(this.transport, this.sessionId, safeAddBreadcrumb, config.replay);
@@ -1516,6 +1758,10 @@ var AllStakClient = class {
       this.httpRequests.destroy();
       this.httpRequests = null;
     }
+    if (this.webVitals) {
+      this.webVitals.destroy();
+      this.webVitals = null;
+    }
     this._instrumentAxios = null;
     this.breadcrumbs = [];
   }
@@ -1745,8 +1991,154 @@ var AllStak = {
   }
 };
 
+// src/provider.tsx
+import * as React from "react";
+var AllStakContext = React.createContext(null);
+var __providerOwnedInstance = null;
+var AllStakErrorBoundaryInner = class extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+    this.resetError = () => this.setState({ error: null });
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    try {
+      AllStak.addBreadcrumb("ui", "React error boundary caught error", "error", {
+        componentStack: info.componentStack ?? ""
+      });
+      AllStak.captureException(error, {
+        componentStack: info.componentStack ?? "",
+        source: "AllStakProvider.ErrorBoundary"
+      });
+      if (this.props.debug) {
+        console.log(`[AllStak] Captured render error: ${error.message}`);
+      }
+    } catch {
+    }
+    try {
+      this.props.onError?.(error, info.componentStack ?? void 0);
+    } catch {
+    }
+  }
+  render() {
+    if (this.state.error) {
+      const { fallback } = this.props;
+      if (typeof fallback === "function") {
+        return fallback({ error: this.state.error, resetError: this.resetError });
+      }
+      if (fallback !== void 0) return fallback;
+      return null;
+    }
+    return this.props.children;
+  }
+};
+function AllStakProvider({
+  children,
+  apiKey,
+  environment,
+  release,
+  host,
+  user,
+  tags,
+  debug,
+  enableHttpTracking,
+  httpTracking,
+  captureConsole,
+  sampleRate,
+  beforeSend,
+  replay,
+  tracesSampleRate,
+  service,
+  dist,
+  autoCaptureBrowserErrors,
+  autoBreadcrumbsFetch,
+  autoBreadcrumbsConsole,
+  autoBreadcrumbsNavigation,
+  autoWebVitals,
+  destroyOnUnmount = false,
+  fallback,
+  onError
+}) {
+  const clientRef = React.useRef(null);
+  if (!clientRef.current) {
+    const existing = AllStak._getInstance();
+    if (existing && __providerOwnedInstance === existing) {
+      clientRef.current = existing;
+      if (debug) {
+        console.log(`[AllStak] Reusing session ${AllStak.getSessionId()}`);
+      }
+    } else {
+      const config = {
+        apiKey,
+        environment,
+        release,
+        host,
+        user,
+        tags,
+        enableHttpTracking,
+        httpTracking,
+        captureConsole,
+        sampleRate,
+        beforeSend,
+        replay,
+        tracesSampleRate,
+        service,
+        dist,
+        autoCaptureBrowserErrors,
+        autoBreadcrumbsFetch,
+        autoBreadcrumbsConsole,
+        autoBreadcrumbsNavigation,
+        autoWebVitals
+      };
+      clientRef.current = AllStak.init(config);
+      __providerOwnedInstance = clientRef.current;
+      if (debug) {
+        console.log(`[AllStak] Initialized \u2014 session ${AllStak.getSessionId()}`);
+        if (autoBreadcrumbsNavigation !== false) {
+          console.log("[AllStak] Navigation auto-instrumentation enabled");
+        } else {
+          console.log("[AllStak] Navigation auto-instrumentation not applied; use manual fallback");
+        }
+      }
+    }
+  }
+  React.useEffect(() => {
+    return () => {
+      if (destroyOnUnmount) {
+        AllStak.destroy();
+        __providerOwnedInstance = null;
+        clientRef.current = null;
+        if (debug) {
+          console.log("[AllStak] Destroyed on unmount");
+        }
+      }
+    };
+  }, [destroyOnUnmount, debug]);
+  return /* @__PURE__ */ React.createElement(AllStakContext.Provider, { value: clientRef.current }, /* @__PURE__ */ React.createElement(AllStakErrorBoundaryInner, { fallback, onError, debug }, children));
+}
+function useAllStak() {
+  return React.useMemo(
+    () => ({
+      captureException: (error, ctx) => AllStak.captureException(error, ctx),
+      captureMessage: (msg, level = "info") => AllStak.captureMessage(msg, level),
+      setUser: (user) => AllStak.setUser(user),
+      setTag: (key, value) => AllStak.setTag(key, value),
+      setContext: (name, ctx) => AllStak.setContext(name, ctx),
+      addBreadcrumb: (type, message, level, data) => AllStak.addBreadcrumb(type, message, level, data),
+      flush: (timeoutMs) => AllStak.flush(timeoutMs)
+    }),
+    []
+  );
+}
+function __resetProviderInstanceForTest() {
+  __providerOwnedInstance = null;
+}
+
 // src/index.ts
-var AllStakErrorBoundary = class extends React.Component {
+var AllStakErrorBoundary = class extends React2.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -1789,25 +2181,13 @@ var AllStakErrorBoundary = class extends React.Component {
     return this.props.children;
   }
 };
-function useAllStak() {
-  return React.useMemo(
-    () => ({
-      captureException: (error, ctx) => AllStak.captureException(error, ctx),
-      captureMessage: (msg, level = "info") => AllStak.captureMessage(msg, level),
-      setUser: (user) => AllStak.setUser(user),
-      setTag: (key, value) => AllStak.setTag(key, value),
-      addBreadcrumb: (type, message, level, data) => AllStak.addBreadcrumb(type, message, level, data)
-    }),
-    []
-  );
-}
-function withAllStakProfiler(Component2, name) {
-  const displayName = name ?? Component2.displayName ?? Component2.name ?? "AnonymousComponent";
+function withAllStakProfiler(Component3, name) {
+  const displayName = name ?? Component3.displayName ?? Component3.name ?? "AnonymousComponent";
   const Wrapped = (props) => {
-    React.useEffect(() => {
+    React2.useEffect(() => {
       AllStak.addBreadcrumb("navigation", `Mounted <${displayName}>`, "info");
     }, []);
-    return React.createElement(Component2, props);
+    return React2.createElement(Component3, props);
   };
   Wrapped.displayName = `withAllStakProfiler(${displayName})`;
   return Wrapped;
@@ -1816,17 +2196,22 @@ export {
   AllStak,
   AllStakClient,
   AllStakErrorBoundary,
+  AllStakProvider,
   HttpRequestModule,
   INGEST_HOST,
   ReplayRecorder,
   SDK_NAME,
   SDK_VERSION,
   Scope,
+  __resetConsoleInstrumentationFlagForTest,
+  __resetProviderInstanceForTest,
+  __resetWebVitalsFlagForTest,
   instrumentBrowserNavigation,
   instrumentConsole,
   instrumentFetch,
   instrumentNextRouter,
   instrumentReactRouter,
+  startWebVitals,
   useAllStak,
   withAllStakProfiler
 };