@diegotsi/flint-core 0.1.2 → 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,6 +218,236 @@ function collectEnvironment() {
   };
 }
 
+// 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 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 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 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;
+      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);
+      };
+      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 (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()
+      });
+    }
+  };
+}
+
 // src/collectors/frustration.ts
 function createFrustrationCollector(opts) {
   const threshold = opts?.rageClickThreshold ?? 3;
@@ -328,7 +561,7 @@ function createFrustrationCollector(opts) {
 }
 
 // src/collectors/network.ts
-var MAX_ENTRIES2 = 50;
+var MAX_ENTRIES3 = 50;
 var BLOCKED_HOSTS = /* @__PURE__ */ new Set([
   "browser-intake-datadoghq.com",
   "rum.browser-intake-datadoghq.com",
@@ -361,18 +594,18 @@ function createNetworkCollector(extraBlockedHosts = []) {
   let active = false;
   function push(entry) {
     entries.push(entry);
-    if (entries.length > MAX_ENTRIES2) entries.shift();
+    if (entries.length > MAX_ENTRIES3) entries.shift();
   }
   return {
     start() {
       if (active) return;
       active = true;
       origFetch = window.fetch;
-      window.fetch = async (input, init) => {
-        const method = (init?.method ?? "GET").toUpperCase();
+      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, init);
+        const res = await origFetch.call(window, input, init2);
         if (res.status >= 400 && !isBlockedUrl(url, blocked)) {
           push({
             method,
@@ -415,6 +648,10 @@ function createNetworkCollector(extraBlockedHosts = []) {
 }
 
 // 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() {
@@ -435,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
@@ -478,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,