@diegotsi/flint-react 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -32,7 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   FlintModal: () => FlintModal,
   FlintWidget: () => FlintWidget,
-  flint: () => import_core7.flint
+  flint: () => flint
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -40,8 +40,437 @@ module.exports = __toCommonJS(index_exports);
 var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
 
-// src/api.ts
-var import_core = require("@flint/core");
+// ../core/dist/index.js
+var import_fflate = require("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 = (0, import_fflate.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/ScreenAnnotator.tsx
 var import_modern_screenshot = require("modern-screenshot");
@@ -185,9 +614,6 @@ function ScreenAnnotator({ zIndex, onCapture, onCancel }) {
   );
 }
 
-// src/theme.ts
-var import_core2 = require("@flint/core");
-
 // src/FlintModal.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SEVERITIES = ["P1", "P2", "P3", "P4"];
@@ -254,7 +680,7 @@ function FlintModal({
   onError
 }) {
   const { t } = (0, import_react_i18next.useTranslation)();
-  const colors = (0, import_core2.resolveTheme)(theme);
+  const colors = resolveTheme(theme);
   const isDark = theme === "dark";
   const [severity, setSeverity] = (0, import_react2.useState)("P2");
   const [description, setDescription] = (0, import_react2.useState)("");
@@ -331,13 +757,13 @@ function FlintModal({
       }
     }
     try {
-      const res = await (0, import_core.submitReport)(serverUrl, projectKey, payload, !isText ? screenshot ?? void 0 : void 0);
+      const res = await submitReport(serverUrl, projectKey, payload, !isText ? screenshot ?? void 0 : void 0);
       setResult(res);
       setStatus("success");
       onSuccess?.(res);
       const events = getReplayEvents();
       if (events.length > 0) {
-        (0, import_core.submitReplay)(serverUrl, projectKey, res.id, events).catch(() => {
+        submitReplay(serverUrl, projectKey, res.id, events).catch(() => {
         });
       }
     } catch (err) {
@@ -1180,15 +1606,6 @@ function CheckIcon({ size = 20 }) {
 var import_react4 = require("react");
 var import_react_i18next3 = require("react-i18next");
 
-// src/collectors/console.ts
-var import_core3 = require("@flint/core");
-
-// src/collectors/environment.ts
-var import_core4 = require("@flint/core");
-
-// src/collectors/network.ts
-var import_core5 = require("@flint/core");
-
 // src/i18n/index.ts
 var import_i18next = require("i18next");
 var import_react_i18next2 = require("react-i18next");
@@ -1239,11 +1656,9 @@ widgetI18n.use(import_react_i18next2.initReactI18next).init({
 var i18n_default = widgetI18n;
 
 // src/store.ts
-var import_core6 = require("@flint/core");
 var import_react3 = require("react");
-var import_core7 = require("@flint/core");
 function useFlintStore() {
-  return (0, import_react3.useSyncExternalStore)(import_core6.subscribe, import_core6.getSnapshot);
+  return (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot);
 }
 
 // src/FlintWidget.tsx
@@ -1271,6 +1686,8 @@ function WidgetContent({
   enableScreenshot = true,
   enableConsole = true,
   enableNetwork = true,
+  enableFrustration = false,
+  autoReportFrustration = false,
   onBeforeSubmit,
   onSuccess,
   onError,
@@ -1303,7 +1720,7 @@ function WidgetContent({
   const [open, setOpen] = (0, import_react4.useState)(false);
   const [hovered, setHovered] = (0, import_react4.useState)(false);
   const pendingSelection = (0, import_react4.useRef)("");
-  const colors = (0, import_core2.resolveTheme)(theme);
+  const colors = resolveTheme(theme);
   const [selectionTooltip, setSelectionTooltip] = (0, import_react4.useState)(null);
   const tooltipRef = (0, import_react4.useRef)(null);
   const triggerRef = (0, import_react4.useRef)(null);
@@ -1351,7 +1768,7 @@ function WidgetContent({
   const replayEvents = (0, import_react4.useRef)([]);
   const stopReplay = (0, import_react4.useRef)(null);
   if (enableConsole && !consoleCollector.current) {
-    consoleCollector.current = (0, import_core3.createConsoleCollector)();
+    consoleCollector.current = createConsoleCollector();
     consoleCollector.current.start();
   }
   if (enableNetwork && !networkCollector.current) {
@@ -1362,9 +1779,14 @@ function WidgetContent({
         return "";
       }
     })();
-    networkCollector.current = (0, import_core5.createNetworkCollector)(flintHost ? [flintHost] : []);
+    networkCollector.current = createNetworkCollector(flintHost ? [flintHost] : []);
     networkCollector.current.start();
   }
+  const frustrationCollector = (0, import_react4.useRef)(null);
+  if (enableFrustration && !frustrationCollector.current) {
+    frustrationCollector.current = createFrustrationCollector();
+    frustrationCollector.current.start();
+  }
   (0, import_react4.useEffect)(() => {
     let cancelled = false;
     if (enableReplay) {
@@ -1386,9 +1808,32 @@ function WidgetContent({
       cancelled = true;
       consoleCollector.current?.stop();
       networkCollector.current?.stop();
+      frustrationCollector.current?.stop();
       stopReplay.current?.();
     };
   }, [enableReplay]);
+  (0, import_react4.useEffect)(() => {
+    if (!enableFrustration || !autoReportFrustration || !frustrationCollector.current) return;
+    const unsubscribe = frustrationCollector.current.onFrustration(async (event) => {
+      const user2 = resolvedUser;
+      await submitReport(serverUrl, projectKey, {
+        reporterId: user2?.id ?? "anonymous",
+        reporterName: user2?.name ?? "Anonymous",
+        reporterEmail: user2?.email,
+        description: `[Auto-detected] ${event.type.replace(/_/g, " ")}: ${event.details}`,
+        severity: event.type === "error_loop" ? "P1" : event.type === "rage_click" ? "P2" : "P3",
+        url: event.url,
+        meta: {
+          environment: collectEnvironment(),
+          consoleLogs: consoleCollector.current?.getEntries() ?? [],
+          networkErrors: networkCollector.current?.getEntries() ?? [],
+          frustrationEvent: event
+        }
+      }).catch(() => {
+      });
+    });
+    return unsubscribe;
+  }, [enableFrustration, autoReportFrustration]);
   const label = buttonLabel ?? t("buttonLabel");
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -1485,7 +1930,7 @@ function WidgetContent({
           onClose?.();
           pendingSelection.current = "";
         },
-        getEnvironment: import_core4.collectEnvironment,
+        getEnvironment: collectEnvironment,
         getConsoleLogs: () => consoleCollector.current?.getEntries() ?? [],
         getNetworkErrors: () => networkCollector.current?.getEntries() ?? [],
         getReplayEvents: () => [...replayEvents.current],