@diegotsi/flint-react 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-export { flint } from '@flint/core';
 
 type Severity = "P1" | "P2" | "P3" | "P4";
 interface EnvironmentInfo {
@@ -31,7 +30,7 @@ interface ThemeOverride {
     text?: string;
     border?: string;
 }
-interface FlintUser {
+interface FlintUser$1 {
     id: string;
     name: string;
     email?: string;
@@ -47,7 +46,7 @@ interface FlintWidgetProps {
     /** Full URL of the flint-server, e.g. "https://bugs.example.com" */
     serverUrl: string;
     /** Authenticated user info (optional) */
-    user?: FlintUser;
+    user?: FlintUser$1;
     /** Arbitrary metadata to attach to every report */
     meta?: Record<string, unknown>;
     /** Extra fields for developer use (e.g. external session replay URL) */
@@ -77,6 +76,10 @@ interface FlintWidgetProps {
     enableConsole?: boolean;
     /** Enable network error collection. Default: true */
     enableNetwork?: boolean;
+    /** Enable frustration detection (rage clicks, dead clicks, error loops). Default: false */
+    enableFrustration?: boolean;
+    /** Auto-submit bug report on frustration detection. Default: false */
+    autoReportFrustration?: boolean;
     /** Called before report submission. Return false to cancel. */
     onBeforeSubmit?: (payload: ReportPayload) => boolean | Promise<boolean>;
     /** Called after successful submission */
@@ -534,7 +537,7 @@ declare global {
 interface Props {
     projectKey: string;
     serverUrl: string;
-    user?: FlintUser;
+    user?: FlintUser$1;
     meta?: Record<string, unknown>;
     theme: Theme;
     zIndex: number;
@@ -555,4 +558,14 @@ declare function FlintModal({ projectKey, serverUrl, user, meta, theme, zIndex,
 
 declare function FlintWidget(props: FlintWidgetProps): react_jsx_runtime.JSX.Element;
 
-export { FlintModal, type FlintUser, FlintWidget, type FlintWidgetProps, type Locale, type ReportPayload, type ReportResult, type Severity, type Theme, type ThemeOverride };
+interface FlintUser {
+    id: string;
+    name: string;
+    email?: string;
+}
+declare const flint: {
+    setUser(user: FlintUser | null): void;
+    setSessionReplay(url: string | (() => string) | null): void;
+};
+
+export { FlintModal, type FlintUser$1 as FlintUser, FlintWidget, type FlintWidgetProps, type Locale, type ReportPayload, type ReportResult, type Severity, type Theme, type ThemeOverride, flint };

package/dist/index.js

@@ -2,8 +2,437 @@
 import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { useTranslation } from "react-i18next";
 
-// src/api.ts
-import { submitReplay, submitReport } from "@flint/core";
+// ../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/ScreenAnnotator.tsx
 import { domToCanvas } from "modern-screenshot";
@@ -147,9 +576,6 @@ function ScreenAnnotator({ zIndex, onCapture, onCancel }) {
   );
 }
 
-// src/theme.ts
-import { resolveTheme } from "@flint/core";
-
 // src/FlintModal.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SEVERITIES = ["P1", "P2", "P3", "P4"];
@@ -1142,15 +1568,6 @@ function CheckIcon({ size = 20 }) {
 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 "@flint/core";
-
-// src/collectors/environment.ts
-import { collectEnvironment } from "@flint/core";
-
-// src/collectors/network.ts
-import { createNetworkCollector } from "@flint/core";
-
 // src/i18n/index.ts
 import { createInstance } from "i18next";
 import { initReactI18next } from "react-i18next";
@@ -1201,9 +1618,7 @@ widgetI18n.use(initReactI18next).init({
 var i18n_default = widgetI18n;
 
 // src/store.ts
-import { getSnapshot, subscribe } from "@flint/core";
 import { useSyncExternalStore } from "react";
-import { flint as flint2 } from "@flint/core";
 function useFlintStore() {
   return useSyncExternalStore(subscribe, getSnapshot);
 }
@@ -1233,6 +1648,8 @@ function WidgetContent({
   enableScreenshot = true,
   enableConsole = true,
   enableNetwork = true,
+  enableFrustration = false,
+  autoReportFrustration = false,
   onBeforeSubmit,
   onSuccess,
   onError,
@@ -1327,6 +1744,11 @@ function WidgetContent({
     networkCollector.current = createNetworkCollector(flintHost ? [flintHost] : []);
     networkCollector.current.start();
   }
+  const frustrationCollector = useRef3(null);
+  if (enableFrustration && !frustrationCollector.current) {
+    frustrationCollector.current = createFrustrationCollector();
+    frustrationCollector.current.start();
+  }
   useEffect3(() => {
     let cancelled = false;
     if (enableReplay) {
@@ -1348,9 +1770,32 @@ function WidgetContent({
       cancelled = true;
       consoleCollector.current?.stop();
       networkCollector.current?.stop();
+      frustrationCollector.current?.stop();
       stopReplay.current?.();
     };
   }, [enableReplay]);
+  useEffect3(() => {
+    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__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsxs3(
@@ -1504,6 +1949,6 @@ function SparkIcon2() {
 export {
   FlintModal,
   FlintWidget,
-  flint2 as flint
+  flint
 };
 //# sourceMappingURL=index.js.map