@diegotsi/flint-react 1.0.2 → 1.2.0

package/dist/index.js

@@ -2,437 +2,8 @@
 import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { useTranslation } from "react-i18next";
 
-// ../core/dist/index.js
-import { gzipSync } from "fflate";
-async function fetchWithRetry(url, init, retries = 3, baseDelay = 1e3) {
-  for (let attempt = 0; attempt <= retries; attempt++) {
-    try {
-      const res = await fetch(url, init);
-      if (res.ok || attempt === retries) return res;
-      if (res.status >= 400 && res.status < 500 && res.status !== 429) return res;
-    } catch (err) {
-      if (attempt === retries) throw err;
-    }
-    await new Promise((r) => setTimeout(r, baseDelay * 2 ** attempt));
-  }
-  throw new Error("Max retries exceeded");
-}
-async function submitReport(serverUrl, projectKey, payload, screenshot) {
-  const url = `${serverUrl.replace(/\/$/, "")}/api/v1/bug-reports`;
-  let body;
-  const headers = {
-    "x-project-key": projectKey
-  };
-  if (screenshot) {
-    const form = new FormData();
-    form.append("reporterId", payload.reporterId);
-    form.append("reporterName", payload.reporterName);
-    if (payload.reporterEmail) form.append("reporterEmail", payload.reporterEmail);
-    form.append("description", payload.description);
-    if (payload.expectedBehavior) form.append("expectedBehavior", payload.expectedBehavior);
-    if (payload.stepsToReproduce) form.append("stepsToReproduce", JSON.stringify(payload.stepsToReproduce));
-    if (payload.externalReplayUrl) form.append("externalReplayUrl", payload.externalReplayUrl);
-    if (payload.additionalContext) form.append("additionalContext", payload.additionalContext);
-    form.append("severity", payload.severity);
-    if (payload.url) form.append("url", payload.url);
-    if (payload.meta) form.append("meta", JSON.stringify(payload.meta));
-    form.append("screenshot", screenshot);
-    body = form;
-  } else {
-    body = JSON.stringify(payload);
-    headers["Content-Type"] = "application/json";
-  }
-  const res = await fetchWithRetry(url, { method: "POST", headers, body });
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({ error: "Unknown error" }));
-    throw new Error(err.error ?? `HTTP ${res.status}`);
-  }
-  return res.json();
-}
-async function submitReplay(serverUrl, projectKey, reportId, events) {
-  const json = JSON.stringify(events);
-  const encoded = new TextEncoder().encode(json);
-  const compressed = gzipSync(encoded);
-  const url = `${serverUrl.replace(/\/$/, "")}/api/v1/bug-reports/${reportId}/replay`;
-  await fetch(url, {
-    method: "POST",
-    headers: {
-      "x-project-key": projectKey,
-      "Content-Type": "application/octet-stream"
-    },
-    body: compressed.buffer
-  });
-}
-var MAX_ENTRIES = 50;
-function createConsoleCollector() {
-  const entries = [];
-  let active = false;
-  const originals = {
-    log: console.log.bind(console),
-    warn: console.warn.bind(console),
-    error: console.error.bind(console)
-  };
-  let origOnerror = null;
-  let origUnhandled = null;
-  function push(level, args) {
-    let str;
-    try {
-      str = args.map((a) => typeof a === "string" ? a : JSON.stringify(a)).join(" ");
-    } catch {
-      str = String(args[0]);
-    }
-    if (str.length > 500) str = str.slice(0, 500) + "\u2026";
-    entries.push({ level, args: str, timestamp: Date.now() });
-    if (entries.length > MAX_ENTRIES) entries.shift();
-  }
-  return {
-    start() {
-      if (active) return;
-      active = true;
-      console.log = (...args) => {
-        push("log", args);
-        originals.log(...args);
-      };
-      console.warn = (...args) => {
-        push("warn", args);
-        originals.warn(...args);
-      };
-      console.error = (...args) => {
-        push("error", args);
-        originals.error(...args);
-      };
-      origOnerror = window.onerror;
-      window.onerror = (msg, src, line, col, err) => {
-        push("error", [err?.message ?? String(msg), `${src}:${line}:${col}`]);
-        if (typeof origOnerror === "function") return origOnerror(msg, src, line, col, err);
-        return false;
-      };
-      origUnhandled = window.onunhandledrejection;
-      window.onunhandledrejection = (event) => {
-        const reason = event.reason instanceof Error ? event.reason.message : JSON.stringify(event.reason);
-        push("error", ["UnhandledRejection:", reason]);
-        if (typeof origUnhandled === "function") origUnhandled.call(window, event);
-      };
-    },
-    stop() {
-      if (!active) return;
-      active = false;
-      console.log = originals.log;
-      console.warn = originals.warn;
-      console.error = originals.error;
-      window.onerror = origOnerror;
-      window.onunhandledrejection = origUnhandled;
-    },
-    getEntries() {
-      return [...entries];
-    }
-  };
-}
-function collectEnvironment() {
-  const ua = navigator.userAgent;
-  let browser = "Unknown";
-  const chromeM = ua.match(/Chrome\/(\d+)/);
-  const firefoxM = ua.match(/Firefox\/(\d+)/);
-  const edgeM = ua.match(/Edg\/(\d+)/);
-  const safariM = ua.match(/Version\/(\d+)/);
-  const operaM = ua.match(/OPR\/(\d+)/);
-  if (operaM) {
-    browser = `Opera ${operaM[1]}`;
-  } else if (edgeM) {
-    browser = `Edge ${edgeM[1]}`;
-  } else if (chromeM && !/Edg|OPR/.test(ua)) {
-    browser = `Chrome ${chromeM[1]}`;
-  } else if (firefoxM) {
-    browser = `Firefox ${firefoxM[1]}`;
-  } else if (safariM && /Safari\//.test(ua)) {
-    browser = `Safari ${safariM[1]}`;
-  }
-  let os = "Unknown";
-  const macM = ua.match(/Mac OS X (\d+[._]\d+)/);
-  const winM = ua.match(/Windows NT (\d+\.\d+)/);
-  const androidM = ua.match(/Android (\d+)/);
-  const iosM = ua.match(/iPhone OS (\d+[._]\d+)/);
-  if (macM) {
-    os = `macOS ${macM[1].replace("_", ".")}`;
-  } else if (winM) {
-    const winMap = {
-      "10.0": "10/11",
-      "6.3": "8.1",
-      "6.2": "8",
-      "6.1": "7"
-    };
-    os = `Windows ${winMap[winM[1]] ?? winM[1]}`;
-  } else if (androidM) {
-    os = `Android ${androidM[1]}`;
-  } else if (iosM) {
-    os = `iOS ${iosM[1].replace(/_/g, ".")}`;
-  } else if (/Linux/.test(ua)) {
-    os = "Linux";
-  }
-  return {
-    browser,
-    os,
-    viewport: `${window.innerWidth}x${window.innerHeight}`,
-    screen: `${screen.width}x${screen.height}`,
-    language: navigator.language,
-    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    online: navigator.onLine
-  };
-}
-function createFrustrationCollector(opts) {
-  const threshold = opts?.rageClickThreshold ?? 3;
-  const window2 = opts?.rageClickWindow ?? 500;
-  const errorThreshold = opts?.errorLoopThreshold ?? 3;
-  const errorWindow = opts?.errorLoopWindow ?? 3e4;
-  const deadClicksEnabled = opts?.enableDeadClicks ?? true;
-  const events = [];
-  const listeners2 = /* @__PURE__ */ new Set();
-  const clickHistory = [];
-  const errorCounts = /* @__PURE__ */ new Map();
-  let clickHandler = null;
-  let origConsoleError = null;
-  function emit2(event) {
-    events.push(event);
-    if (events.length > 50) events.shift();
-    for (const cb of listeners2) cb(event);
-  }
-  function getCSSSelector(el) {
-    if (el.id) return `#${el.id}`;
-    const tag = el.tagName.toLowerCase();
-    const cls = [...el.classList].slice(0, 3).join(".");
-    if (cls) return `${tag}.${cls}`;
-    return tag;
-  }
-  function isInteractive(el) {
-    const tag = el.tagName.toLowerCase();
-    if (["a", "button", "input", "select", "textarea", "label", "summary"].includes(tag)) return true;
-    if (el.getAttribute("role") === "button" || el.getAttribute("tabindex")) return true;
-    if (el.onclick || el.getAttribute("onclick")) return true;
-    if (el.closest("a, button, [role=button], [onclick]")) return true;
-    try {
-      if (getComputedStyle(el).cursor === "pointer") return true;
-    } catch {
-    }
-    return false;
-  }
-  function handleClick(e) {
-    const target = e.target;
-    if (!target) return;
-    const now = Date.now();
-    clickHistory.push({ target, time: now });
-    while (clickHistory.length > 0 && now - clickHistory[0].time > 1e3) {
-      clickHistory.shift();
-    }
-    const recentOnSame = clickHistory.filter((c) => c.target === target && now - c.time < window2);
-    if (recentOnSame.length >= threshold) {
-      emit2({
-        type: "rage_click",
-        timestamp: now,
-        target: getCSSSelector(target),
-        details: `${recentOnSame.length} clicks in ${now - recentOnSame[0].time}ms`,
-        url: globalThis.location?.href ?? ""
-      });
-      clickHistory.length = 0;
-    }
-    if (deadClicksEnabled && !isInteractive(target)) {
-      emit2({
-        type: "dead_click",
-        timestamp: now,
-        target: getCSSSelector(target),
-        details: `Click on non-interactive <${target.tagName.toLowerCase()}>`,
-        url: globalThis.location?.href ?? ""
-      });
-    }
-  }
-  function patchConsoleError() {
-    origConsoleError = console.error;
-    console.error = (...args) => {
-      origConsoleError?.apply(console, args);
-      const key = String(args[0]).slice(0, 100);
-      const now = Date.now();
-      const existing = errorCounts.get(key);
-      if (existing && now - existing.firstSeen < errorWindow) {
-        existing.count++;
-        if (existing.count >= errorThreshold) {
-          emit2({
-            type: "error_loop",
-            timestamp: now,
-            target: "console",
-            details: `Same error ${existing.count}x in ${Math.round((now - existing.firstSeen) / 1e3)}s: ${key}`,
-            url: globalThis.location?.href ?? ""
-          });
-          errorCounts.delete(key);
-        }
-      } else {
-        errorCounts.set(key, { count: 1, firstSeen: now });
-      }
-    };
-  }
-  return {
-    start() {
-      clickHandler = handleClick;
-      document.addEventListener("click", clickHandler, true);
-      patchConsoleError();
-    },
-    stop() {
-      if (clickHandler) document.removeEventListener("click", clickHandler, true);
-      if (origConsoleError) console.error = origConsoleError;
-      clickHistory.length = 0;
-      errorCounts.clear();
-    },
-    getEvents() {
-      return [...events];
-    },
-    onFrustration(callback) {
-      listeners2.add(callback);
-      return () => listeners2.delete(callback);
-    }
-  };
-}
-var MAX_ENTRIES2 = 50;
-var BLOCKED_HOSTS = /* @__PURE__ */ new Set([
-  "browser-intake-datadoghq.com",
-  "rum.browser-intake-datadoghq.com",
-  "logs.browser-intake-datadoghq.com",
-  "session-replay.browser-intake-datadoghq.com"
-]);
-function isBlockedUrl(url, extra) {
-  try {
-    const host = new URL(url, location.href).hostname;
-    const all = [...BLOCKED_HOSTS, ...extra];
-    return all.some((b) => host === b || host.endsWith("." + b));
-  } catch {
-    return false;
-  }
-}
-function truncateUrl(url) {
-  try {
-    const u = new URL(url, location.href);
-    const base = `${u.origin}${u.pathname}`;
-    return base.length > 200 ? base.slice(0, 200) + "\u2026" : base;
-  } catch {
-    return url.length > 200 ? url.slice(0, 200) + "\u2026" : url;
-  }
-}
-function createNetworkCollector(extraBlockedHosts = []) {
-  const entries = [];
-  const blocked = new Set(extraBlockedHosts);
-  let origFetch = null;
-  let origXHROpen = null;
-  let active = false;
-  function push(entry) {
-    entries.push(entry);
-    if (entries.length > MAX_ENTRIES2) entries.shift();
-  }
-  return {
-    start() {
-      if (active) return;
-      active = true;
-      origFetch = window.fetch;
-      window.fetch = async (input, init) => {
-        const method = (init?.method ?? "GET").toUpperCase();
-        const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
-        const startTime = Date.now();
-        const res = await origFetch.call(window, input, init);
-        if (res.status >= 400 && !isBlockedUrl(url, blocked)) {
-          push({
-            method,
-            url: truncateUrl(url),
-            status: res.status,
-            duration: Date.now() - startTime,
-            timestamp: startTime
-          });
-        }
-        return res;
-      };
-      origXHROpen = XMLHttpRequest.prototype.open;
-      XMLHttpRequest.prototype.open = function(method, url, async, username, password) {
-        const startTime = Date.now();
-        const urlStr = typeof url === "string" ? url : url.href;
-        this.addEventListener("load", () => {
-          if (this.status >= 400 && !isBlockedUrl(urlStr, blocked)) {
-            push({
-              method: method.toUpperCase(),
-              url: truncateUrl(urlStr),
-              status: this.status,
-              duration: Date.now() - startTime,
-              timestamp: startTime
-            });
-          }
-        });
-        return origXHROpen.apply(this, [method, url, async ?? true, username, password]);
-      };
-    },
-    stop() {
-      if (!active) return;
-      active = false;
-      if (origFetch) window.fetch = origFetch;
-      if (origXHROpen) XMLHttpRequest.prototype.open = origXHROpen;
-    },
-    getEntries() {
-      return [...entries];
-    }
-  };
-}
-var state = { user: void 0, sessionReplay: void 0 };
-var listeners = /* @__PURE__ */ new Set();
-function emit() {
-  for (const l of listeners) l();
-}
-function subscribe(listener) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-}
-function getSnapshot() {
-  return state;
-}
-var flint = {
-  setUser(user) {
-    state = { ...state, user: user ?? void 0 };
-    emit();
-  },
-  setSessionReplay(url) {
-    state = { ...state, sessionReplay: url ?? void 0 };
-    emit();
-  }
-};
-var light = {
-  background: "rgba(255,255,255,0.90)",
-  backgroundSecondary: "rgba(249,250,251,0.75)",
-  accent: "#2563eb",
-  accentHover: "#1d4ed8",
-  text: "#111827",
-  textMuted: "#6b7280",
-  border: "rgba(255,255,255,0.9)",
-  shadow: "0 32px 80px rgba(0,0,0,0.18), 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04)",
-  buttonText: "#ffffff",
-  backdropFilter: "blur(32px) saturate(1.8)"
-};
-var dark = {
-  background: "rgba(15,20,35,0.88)",
-  backgroundSecondary: "rgba(5,8,18,0.65)",
-  accent: "#4d8aff",
-  accentHover: "#3b6fdb",
-  text: "#dde3ef",
-  textMuted: "#6b7a93",
-  border: "rgba(255,255,255,0.08)",
-  shadow: "0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)",
-  buttonText: "#ffffff",
-  backdropFilter: "blur(32px) saturate(1.6)"
-};
-function resolveTheme(theme) {
-  if (theme === "dark") return dark;
-  if (theme === "light") return light;
-  const override = theme;
-  return {
-    ...light,
-    background: override.background ?? light.background,
-    accent: override.accent ?? light.accent,
-    accentHover: override.accent ?? light.accentHover,
-    text: override.text ?? light.text,
-    border: override.border ?? light.border
-  };
-}
+// src/api.ts
+import { submitReplay, submitReport } from "@diegotsi/flint-core";
 
 // src/ScreenAnnotator.tsx
 import { domToCanvas } from "modern-screenshot";
@@ -576,6 +147,9 @@ function ScreenAnnotator({ zIndex, onCapture, onCancel }) {
   );
 }
 
+// src/theme.ts
+import { resolveTheme } from "@diegotsi/flint-core";
+
 // src/FlintModal.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SEVERITIES = ["P1", "P2", "P3", "P4"];
@@ -632,6 +206,7 @@ function FlintModal({
   getEnvironment,
   getConsoleLogs,
   getNetworkErrors,
+  getFormErrors,
   getReplayEvents,
   getExternalReplayUrl,
   initialSelection = "",
@@ -690,7 +265,8 @@ function FlintModal({
       ...meta,
       environment: getEnvironment(),
       consoleLogs: getConsoleLogs(),
-      networkErrors: getNetworkErrors()
+      networkErrors: getNetworkErrors(),
+      formErrors: getFormErrors()
     };
     if (isText) {
       collectedMeta.textIssue = {
@@ -1565,9 +1141,25 @@ function CheckIcon({ size = 20 }) {
 }
 
 // src/FlintWidget.tsx
+import { Flint as Flint2 } from "@diegotsi/flint-core";
 import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { I18nextProvider, useTranslation as useTranslation2 } from "react-i18next";
 
+// src/collectors/console.ts
+import { createConsoleCollector } from "@diegotsi/flint-core";
+
+// src/collectors/environment.ts
+import { collectEnvironment } from "@diegotsi/flint-core";
+
+// src/collectors/formErrors.ts
+import { createFormErrorCollector } from "@diegotsi/flint-core";
+
+// src/collectors/frustration.ts
+import { createFrustrationCollector } from "@diegotsi/flint-core";
+
+// src/collectors/network.ts
+import { createNetworkCollector } from "@diegotsi/flint-core";
+
 // src/i18n/index.ts
 import { createInstance } from "i18next";
 import { initReactI18next } from "react-i18next";
@@ -1618,7 +1210,9 @@ widgetI18n.use(initReactI18next).init({
 var i18n_default = widgetI18n;
 
 // src/store.ts
+import { getSnapshot, subscribe } from "@diegotsi/flint-core";
 import { useSyncExternalStore } from "react";
+import { _setFormErrorCollector, Flint, flint } from "@diegotsi/flint-core";
 function useFlintStore() {
   return useSyncExternalStore(subscribe, getSnapshot);
 }
@@ -1648,6 +1242,7 @@ function WidgetContent({
   enableScreenshot = true,
   enableConsole = true,
   enableNetwork = true,
+  enableFormErrors = true,
   enableFrustration = false,
   autoReportFrustration = false,
   onBeforeSubmit,
@@ -1725,31 +1320,42 @@ function WidgetContent({
     setOpen(true);
     onOpen?.();
   };
+  const globalInit = Flint2.isInitialized();
+  const global = Flint2.getInstance();
   const consoleCollector = useRef3(null);
   const networkCollector = useRef3(null);
   const replayEvents = useRef3([]);
   const stopReplay = useRef3(null);
-  if (enableConsole && !consoleCollector.current) {
-    consoleCollector.current = createConsoleCollector();
-    consoleCollector.current.start();
-  }
-  if (enableNetwork && !networkCollector.current) {
-    const flintHost = (() => {
-      try {
-        return new URL(serverUrl).hostname;
-      } catch {
-        return "";
-      }
-    })();
-    networkCollector.current = createNetworkCollector(flintHost ? [flintHost] : []);
-    networkCollector.current.start();
-  }
+  const formErrorCollector = useRef3(null);
   const frustrationCollector = useRef3(null);
-  if (enableFrustration && !frustrationCollector.current) {
-    frustrationCollector.current = createFrustrationCollector();
-    frustrationCollector.current.start();
+  if (!globalInit) {
+    if (enableConsole && !consoleCollector.current) {
+      consoleCollector.current = createConsoleCollector();
+      consoleCollector.current.start();
+    }
+    if (enableNetwork && !networkCollector.current) {
+      const flintHost = (() => {
+        try {
+          return new URL(serverUrl).hostname;
+        } catch {
+          return "";
+        }
+      })();
+      networkCollector.current = createNetworkCollector(flintHost ? [flintHost] : []);
+      networkCollector.current.start();
+    }
+    if (enableFormErrors && !formErrorCollector.current) {
+      formErrorCollector.current = createFormErrorCollector();
+      formErrorCollector.current.start();
+      _setFormErrorCollector(formErrorCollector.current);
+    }
+    if (enableFrustration && !frustrationCollector.current) {
+      frustrationCollector.current = createFrustrationCollector();
+      frustrationCollector.current.start();
+    }
   }
   useEffect3(() => {
+    if (globalInit) return;
     let cancelled = false;
     if (enableReplay) {
       import("rrweb").then(({ record }) => {
@@ -1770,11 +1376,14 @@ function WidgetContent({
       cancelled = true;
       consoleCollector.current?.stop();
       networkCollector.current?.stop();
+      formErrorCollector.current?.stop();
+      _setFormErrorCollector(null);
       frustrationCollector.current?.stop();
       stopReplay.current?.();
     };
-  }, [enableReplay]);
+  }, [enableReplay, globalInit]);
   useEffect3(() => {
+    if (globalInit) return;
     if (!enableFrustration || !autoReportFrustration || !frustrationCollector.current) return;
     const unsubscribe = frustrationCollector.current.onFrustration(async (event) => {
       const user2 = resolvedUser;
@@ -1789,13 +1398,14 @@ function WidgetContent({
           environment: collectEnvironment(),
           consoleLogs: consoleCollector.current?.getEntries() ?? [],
           networkErrors: networkCollector.current?.getEntries() ?? [],
+          formErrors: formErrorCollector.current?.getEntries() ?? [],
           frustrationEvent: event
         }
       }).catch(() => {
       });
     });
     return unsubscribe;
-  }, [enableFrustration, autoReportFrustration]);
+  }, [enableFrustration, autoReportFrustration, globalInit]);
   const label = buttonLabel ?? t("buttonLabel");
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsxs3(
@@ -1893,9 +1503,10 @@ function WidgetContent({
           pendingSelection.current = "";
         },
         getEnvironment: collectEnvironment,
-        getConsoleLogs: () => consoleCollector.current?.getEntries() ?? [],
-        getNetworkErrors: () => networkCollector.current?.getEntries() ?? [],
-        getReplayEvents: () => [...replayEvents.current],
+        getConsoleLogs: () => globalInit ? global?.console?.getEntries() ?? [] : consoleCollector.current?.getEntries() ?? [],
+        getNetworkErrors: () => globalInit ? global?.network?.getEntries() ?? [] : networkCollector.current?.getEntries() ?? [],
+        getFormErrors: () => globalInit ? global?.formErrors?.getEntries() ?? [] : formErrorCollector.current?.getEntries() ?? [],
+        getReplayEvents: () => globalInit ? Flint2.getReplayEvents() : [...replayEvents.current],
         getExternalReplayUrl,
         initialSelection: pendingSelection.current,
         enableScreenshot,
@@ -1947,6 +1558,7 @@ function SparkIcon2() {
   );
 }
 export {
+  Flint,
   FlintModal,
   FlintWidget,
   flint