@diegotsi/flint-core 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -20,8 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Flint: () => Flint,
+  _setFormErrorCollector: () => _setFormErrorCollector,
   collectEnvironment: () => collectEnvironment,
   createConsoleCollector: () => createConsoleCollector,
+  createFormErrorCollector: () => createFormErrorCollector,
   createFrustrationCollector: () => createFrustrationCollector,
   createNetworkCollector: () => createNetworkCollector,
   flint: () => flint,
@@ -35,10 +38,10 @@ module.exports = __toCommonJS(index_exports);
 
 // src/api.ts
 var import_fflate = require("fflate");
-async function fetchWithRetry(url, init, retries = 3, baseDelay = 1e3) {
+async function fetchWithRetry(url, init2, retries = 3, baseDelay = 1e3) {
   for (let attempt = 0; attempt <= retries; attempt++) {
     try {
-      const res = await fetch(url, init);
+      const res = await fetch(url, init2);
       if (res.ok || attempt === retries) return res;
       if (res.status >= 400 && res.status < 500 && res.status !== 429) return res;
     } catch (err) {
@@ -215,89 +218,232 @@ function collectEnvironment() {
   };
 }
 
-// src/collectors/network.ts
-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;
+// src/collectors/formErrors.ts
+var MAX_ENTRIES2 = 30;
+var POST_SUBMIT_CHECK_MS = 300;
+var SILENT_SUBMIT_WINDOW_MS = 400;
+function getFormId(form) {
+  if (form.id) return `#${form.id}`;
+  if (form.getAttribute("name")) return `form[name="${form.getAttribute("name")}"]`;
+  if (form.action && form.action !== location.href) return form.action;
+  return `form:${Array.from(document.forms).indexOf(form)}`;
+}
+function getFieldLabel(field, root) {
+  const ariaLabel = field.getAttribute("aria-label");
+  if (ariaLabel) return ariaLabel;
+  const id = field.id;
+  if (id) {
+    const label = root.querySelector(`label[for="${id}"]`);
+    if (label?.textContent) return label.textContent.trim();
+  }
+  const parentLabel = field.closest("label");
+  if (parentLabel?.textContent) {
+    const text = parentLabel.textContent.trim();
+    if (text.length < 60) return text;
   }
+  return field.name || field.placeholder || field.tagName.toLowerCase();
 }
-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 getErrorMessage(field) {
+  const errId = field.getAttribute("aria-errormessage");
+  if (errId) {
+    const el = document.getElementById(errId);
+    if (el?.textContent) return el.textContent.trim();
+  }
+  const descId = field.getAttribute("aria-describedby");
+  if (descId) {
+    for (const id of descId.split(/\s+/)) {
+      const el = document.getElementById(id);
+      if (el?.textContent?.trim()) return el.textContent.trim();
+    }
   }
+  if (field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement || field instanceof HTMLSelectElement) {
+    if (field.validationMessage) return field.validationMessage;
+  }
+  const next = field.nextElementSibling;
+  if (next?.getAttribute("role") === "alert" && next.textContent) {
+    return next.textContent.trim();
+  }
+  return void 0;
 }
-function createNetworkCollector(extraBlockedHosts = []) {
+function collectInvalidFields(root) {
+  const fields = [];
+  const invalidEls = root.querySelectorAll('[aria-invalid="true"], :invalid');
+  for (const el of invalidEls) {
+    if (el instanceof HTMLFormElement) continue;
+    if (el.tagName === "FIELDSET") continue;
+    fields.push({
+      name: getFieldLabel(el, root),
+      message: getErrorMessage(el)
+    });
+  }
+  return fields;
+}
+function collectVisibleErrors(root) {
+  const fields = [];
+  const seen = /* @__PURE__ */ new Set();
+  const alerts = root.querySelectorAll('[role="alert"]');
+  for (const el of alerts) {
+    const text = el.textContent?.trim();
+    if (!text || text.length > 200) continue;
+    if (seen.has(text)) continue;
+    seen.add(text);
+    fields.push({ name: "alert", message: text });
+  }
+  const errorEls = root.querySelectorAll(
+    "[data-error], [data-field-error], .error-message, .field-error, .form-error"
+  );
+  for (const el of errorEls) {
+    const text = el.textContent?.trim();
+    if (!text || text.length > 200) continue;
+    if (seen.has(text)) continue;
+    seen.add(text);
+    fields.push({ name: "error", message: text });
+  }
+  return fields;
+}
+function isSubmitButton(el) {
+  if (el.tagName === "BUTTON") {
+    const type = el.getAttribute("type");
+    return type === "submit" || type === null || type === "";
+  }
+  if (el.tagName === "INPUT") {
+    return el.type === "submit";
+  }
+  return false;
+}
+function findClosestForm(el) {
+  if ("form" in el && el.form) {
+    return el.form;
+  }
+  return el.closest("form");
+}
+function createFormErrorCollector() {
   const entries = [];
-  const blocked = new Set(extraBlockedHosts);
-  let origFetch = null;
-  let origXHROpen = null;
+  const attemptCounts = /* @__PURE__ */ new Map();
   let active = false;
+  let submitHandler = null;
+  let invalidHandler = null;
+  let clickHandler = null;
+  let lastSubmitTime = 0;
+  const recentRecords = /* @__PURE__ */ new Map();
+  const DEDUP_MS = 500;
   function push(entry) {
+    const key = `${entry.formId}:${entry.timestamp}`;
+    const last = recentRecords.get(entry.formId);
+    if (last && entry.timestamp - last < DEDUP_MS) return;
+    recentRecords.set(entry.formId, entry.timestamp);
     entries.push(entry);
     if (entries.length > MAX_ENTRIES2) entries.shift();
   }
+  function recordFormErrors(form, type) {
+    const formId = getFormId(form);
+    let fields = collectInvalidFields(form);
+    if (fields.length === 0) {
+      fields = collectVisibleErrors(form);
+    }
+    if (fields.length === 0) return;
+    const count = (attemptCounts.get(formId) ?? 0) + 1;
+    attemptCounts.set(formId, count);
+    push({
+      type,
+      formId,
+      fields,
+      attemptNumber: count,
+      url: location.href,
+      timestamp: Date.now()
+    });
+  }
+  function handleSubmitButtonClick(button) {
+    const form = findClosestForm(button);
+    setTimeout(() => {
+      if (!active) return;
+      if (Date.now() - lastSubmitTime < SILENT_SUBMIT_WINDOW_MS) return;
+      const root = form ?? document.body;
+      const formId = form ? getFormId(form) : `page:${location.pathname}`;
+      let fields = form ? collectInvalidFields(form) : [];
+      if (fields.length === 0) {
+        fields = collectVisibleErrors(root);
+      }
+      if (fields.length === 0 && form) {
+        fields = collectVisibleErrors(document.body);
+      }
+      if (fields.length === 0) return;
+      const count = (attemptCounts.get(formId) ?? 0) + 1;
+      attemptCounts.set(formId, count);
+      push({
+        type: "silent_submit",
+        formId,
+        fields,
+        attemptNumber: count,
+        url: location.href,
+        timestamp: Date.now()
+      });
+    }, SILENT_SUBMIT_WINDOW_MS);
+  }
   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;
+      submitHandler = (e) => {
+        lastSubmitTime = Date.now();
+        const form = e.target;
+        if (!(form instanceof HTMLFormElement)) return;
+        setTimeout(() => {
+          if (!active) return;
+          recordFormErrors(form, "validation_failed");
+        }, POST_SUBMIT_CHECK_MS);
       };
-      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]);
+      document.addEventListener("submit", submitHandler, true);
+      invalidHandler = (e) => {
+        lastSubmitTime = Date.now();
+        const field = e.target;
+        const form = field.closest("form");
+        if (!form) return;
+        setTimeout(() => {
+          if (!active) return;
+          recordFormErrors(form, "validation_failed");
+        }, POST_SUBMIT_CHECK_MS);
+      };
+      document.addEventListener("invalid", invalidHandler, true);
+      clickHandler = (e) => {
+        const target = e.target;
+        if (!target) return;
+        const button = target.closest("button, input[type=submit]");
+        if (!button) return;
+        if (!isSubmitButton(button)) return;
+        handleSubmitButtonClick(button);
       };
+      document.addEventListener("click", clickHandler, true);
     },
     stop() {
       if (!active) return;
       active = false;
-      if (origFetch) window.fetch = origFetch;
-      if (origXHROpen) XMLHttpRequest.prototype.open = origXHROpen;
+      if (submitHandler) document.removeEventListener("submit", submitHandler, true);
+      if (invalidHandler) document.removeEventListener("invalid", invalidHandler, true);
+      if (clickHandler) document.removeEventListener("click", clickHandler, true);
+      attemptCounts.clear();
+      recentRecords.clear();
     },
     getEntries() {
       return [...entries];
+    },
+    report(formId, errors) {
+      const fields = [];
+      for (const [name, err] of Object.entries(errors)) {
+        if (!err) continue;
+        fields.push({ name, message: err.message });
+      }
+      if (fields.length === 0) return;
+      const count = (attemptCounts.get(formId) ?? 0) + 1;
+      attemptCounts.set(formId, count);
+      push({
+        type: "validation_failed",
+        formId,
+        fields,
+        attemptNumber: count,
+        url: location.href,
+        timestamp: Date.now()
+      });
     }
   };
 }
@@ -347,9 +493,7 @@ function createFrustrationCollector(opts) {
     while (clickHistory.length > 0 && now - clickHistory[0].time > 1e3) {
       clickHistory.shift();
     }
-    const recentOnSame = clickHistory.filter(
-      (c) => c.target === target && now - c.time < window2
-    );
+    const recentOnSame = clickHistory.filter((c) => c.target === target && now - c.time < window2);
     if (recentOnSame.length >= threshold) {
       emit2({
         type: "rage_click",
@@ -416,7 +560,98 @@ function createFrustrationCollector(opts) {
   };
 }
 
+// src/collectors/network.ts
+var MAX_ENTRIES3 = 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_ENTRIES3) entries.shift();
+  }
+  return {
+    start() {
+      if (active) return;
+      active = true;
+      origFetch = window.fetch;
+      window.fetch = async (input, init2) => {
+        const method = (init2?.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, init2);
+        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];
+    }
+  };
+}
+
 // src/store.ts
+var formErrorCollectorRef = null;
+function _setFormErrorCollector(collector) {
+  formErrorCollectorRef = collector;
+}
 var state = { user: void 0, sessionReplay: void 0 };
 var listeners = /* @__PURE__ */ new Set();
 function emit() {
@@ -437,7 +672,155 @@ var flint = {
   setSessionReplay(url) {
     state = { ...state, sessionReplay: url ?? void 0 };
     emit();
+  },
+  /**
+   * Report a form validation failure with exact field-level errors.
+   * Call this from your form library's error callback.
+   *
+   * @example
+   * // React Hook Form + Zod
+   * const onSubmit = handleSubmit(onValid, (errors) => {
+   *   flint.reportFormError('checkout-form', errors);
+   * });
+   */
+  reportFormError(formId, errors) {
+    formErrorCollectorRef?.report(formId, errors);
+  }
+};
+
+// src/singleton.ts
+var DEFAULT_REPLAY_BUFFER_MS = 6e4;
+var instance = null;
+function init(config) {
+  if (instance) {
+    console.warn("[Flint] Already initialized. Call Flint.shutdown() first to re-initialize.");
+    return;
+  }
+  const {
+    enableConsole = true,
+    enableNetwork = true,
+    enableFormErrors = true,
+    enableFrustration = false,
+    autoReportFrustration = false,
+    enableReplay = false,
+    replayBufferMs = DEFAULT_REPLAY_BUFFER_MS,
+    blockedHosts = [],
+    frustration: frustrationOpts,
+    onFrustration,
+    _replayRecorder
+  } = config;
+  const flintHost = (() => {
+    try {
+      return new URL(config.serverUrl).hostname;
+    } catch {
+      return "";
+    }
+  })();
+  const consoleCol = enableConsole ? createConsoleCollector() : null;
+  consoleCol?.start();
+  const networkCol = enableNetwork ? createNetworkCollector([...blockedHosts, ...flintHost ? [flintHost] : []]) : null;
+  networkCol?.start();
+  const formErrorsCol = enableFormErrors ? createFormErrorCollector() : null;
+  if (formErrorsCol) {
+    formErrorsCol.start();
+    _setFormErrorCollector(formErrorsCol);
+  }
+  const frustrationCol = enableFrustration ? createFrustrationCollector(frustrationOpts) : null;
+  frustrationCol?.start();
+  if (config.user) {
+    flint.setUser(config.user);
+  }
+  const replayEvents = [];
+  let stopReplay = null;
+  instance = {
+    config,
+    console: consoleCol,
+    network: networkCol,
+    formErrors: formErrorsCol,
+    frustration: frustrationCol,
+    replayEvents,
+    stopReplay: null
+  };
+  if (enableReplay && _replayRecorder) {
+    _replayRecorder((event) => {
+      replayEvents.push(event);
+      const cutoff = Date.now() - replayBufferMs;
+      while (replayEvents.length > 0 && replayEvents[0].timestamp < cutoff) {
+        replayEvents.shift();
+      }
+    }).then((stop) => {
+      stopReplay = stop ?? null;
+      if (instance) instance.stopReplay = stopReplay;
+    });
   }
+  if (frustrationCol && autoReportFrustration) {
+    frustrationCol.onFrustration(async (event) => {
+      onFrustration?.(event);
+      const user = getSnapshot().user ?? config.user;
+      await submitReport(config.serverUrl, config.projectKey, {
+        reporterId: user?.id ?? "anonymous",
+        reporterName: user?.name ?? "Anonymous",
+        reporterEmail: user?.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: {
+          ...config.meta,
+          environment: collectEnvironment(),
+          consoleLogs: consoleCol?.getEntries() ?? [],
+          networkErrors: networkCol?.getEntries() ?? [],
+          formErrors: formErrorsCol?.getEntries() ?? [],
+          frustrationEvent: event
+        }
+      }).catch(() => {
+      });
+    });
+  } else if (frustrationCol && onFrustration) {
+    frustrationCol.onFrustration(onFrustration);
+  }
+}
+function shutdown() {
+  if (!instance) return;
+  instance.console?.stop();
+  instance.network?.stop();
+  instance.formErrors?.stop();
+  _setFormErrorCollector(null);
+  instance.frustration?.stop();
+  instance.stopReplay?.();
+  instance = null;
+}
+function isInitialized() {
+  return instance !== null;
+}
+function getInstance() {
+  return instance;
+}
+function getMeta(extraMeta) {
+  return {
+    ...extraMeta,
+    environment: collectEnvironment(),
+    consoleLogs: instance?.console?.getEntries() ?? [],
+    networkErrors: instance?.network?.getEntries() ?? [],
+    formErrors: instance?.formErrors?.getEntries() ?? []
+  };
+}
+function getReplayEvents() {
+  return instance ? [...instance.replayEvents] : [];
+}
+function getConfig() {
+  return instance?.config ?? null;
+}
+var Flint = {
+  init,
+  shutdown,
+  isInitialized,
+  getInstance,
+  getMeta,
+  getReplayEvents,
+  getConfig,
+  setUser: flint.setUser,
+  setSessionReplay: flint.setSessionReplay,
+  reportFormError: flint.reportFormError
 };
 
 // src/theme.ts
@@ -480,8 +863,11 @@ function resolveTheme(theme) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Flint,
+  _setFormErrorCollector,
   collectEnvironment,
   createConsoleCollector,
+  createFormErrorCollector,
   createFrustrationCollector,
   createNetworkCollector,
   flint,