@appsurify-testmap/rrweb-record 2.1.0-alpha.7 → 2.1.1-alpha.2

package/dist/rrweb-record.js

@@ -168,6 +168,41 @@ function patch$1(source, name, replacement) {
     };
   }
 }
+function describeNode$1(el) {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : "";
+  const classes = el.classList.length ? "." + Array.from(el.classList).join(".") : "";
+  return `${tag}${id}${classes}`;
+}
+function getElementVisibility$1(el) {
+  var _a2, _b;
+  const win = ((_a2 = el.ownerDocument) == null ? void 0 : _a2.defaultView) ?? window;
+  const rect = el.getBoundingClientRect();
+  const viewportWidth = win.innerWidth || win.document.documentElement.clientWidth || 0;
+  const viewportHeight = win.innerHeight || win.document.documentElement.clientHeight || 0;
+  const isRectVisible = rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < viewportHeight && rect.left < viewportWidth;
+  const style = (_b = win.getComputedStyle) == null ? void 0 : _b.call(win, el);
+  const isStyleVisible2 = !!style && style.display !== "none" && style.visibility !== "hidden" && (parseFloat(style.opacity) || 0) > 0;
+  const isVisible = isStyleVisible2 && isRectVisible;
+  let ratio = 0;
+  if (isVisible) {
+    const xOverlap = Math.max(
+      0,
+      Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0)
+    );
+    const yOverlap = Math.max(
+      0,
+      Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0)
+    );
+    const intersectionArea = xOverlap * yOverlap;
+    const elementArea = rect.width * rect.height;
+    ratio = elementArea > 0 ? intersectionArea / elementArea : 0;
+  }
+  return {
+    isVisible,
+    ratio
+  };
+}
 const index$1 = {
   childNodes: childNodes$1,
   parentNode: parentNode$1,
@@ -181,7 +216,9 @@ const index$1 = {
   querySelector: querySelector$1,
   querySelectorAll: querySelectorAll$1,
   mutationObserver: mutationObserverCtor$1,
-  patch: patch$1
+  patch: patch$1,
+  describeNode: describeNode$1,
+  getElementVisibility: getElementVisibility$1
 };
 function isElement(n2) {
   return n2.nodeType === n2.ELEMENT_NODE;
@@ -555,71 +592,95 @@ function splitCssText(cssText, style, _testNoPxNorm = false) {
 function markCssSplits(cssText, style) {
   return splitCssText(cssText, style).join("/* rr_split */");
 }
-function getXPath(node2) {
-  if (node2.nodeType === Node.DOCUMENT_NODE) {
-    return "/";
+function isSelectorUnique(selector, target) {
+  try {
+    const matches = document.querySelectorAll(selector);
+    return matches.length === 1 && matches[0] === target;
+  } catch {
+    return false;
   }
-  if (node2.nodeType === Node.DOCUMENT_TYPE_NODE) {
-    return "/html/doctype";
+}
+function buildSelector(node2) {
+  if (!(node2 instanceof Element)) return null;
+  if (node2.id) {
+    return `#${CSS.escape(node2.id)}`;
   }
-  if (node2.nodeType === Node.ELEMENT_NODE) {
-    const element = node2;
-    if (element.id) {
-      return `//*[@id="${element.id}"]`;
-    }
-    if (element.tagName && element.tagName.toLowerCase() === "html") {
-      return "/html";
-    }
-    if (element === document.head) {
-      return "/html/head";
-    }
-    if (element === document.body) {
-      return "/html/body";
-    }
-    const parentNode2 = element.parentNode;
-    if (!parentNode2) {
-      return "";
-    }
-    const siblings = Array.from(parentNode2.children).filter(
-      (sibling) => sibling.tagName === element.tagName
-    );
-    const index2 = siblings.length > 1 ? `[${siblings.indexOf(element) + 1}]` : "";
-    return `${getXPath(parentNode2)}/${element.tagName.toLowerCase()}${index2}`;
+  const parts = [];
+  const tag = node2.tagName.toLowerCase();
+  if (node2.classList.length) {
+    parts.push(...Array.from(node2.classList).map((cls) => `.${CSS.escape(cls)}`));
   }
-  if (node2.nodeType === Node.TEXT_NODE) {
-    const parent = node2.parentNode;
-    if (!parent) {
-      return "";
+  Array.from(node2.attributes).forEach((attr) => {
+    if (attr.name.startsWith("data-")) {
+      parts.push(`[${attr.name}="${CSS.escape(attr.value)}"]`);
     }
-    const textSiblings = Array.from(parent.childNodes).filter(
-      (sibling) => sibling.nodeType === Node.TEXT_NODE
-    );
-    const index2 = textSiblings.length > 1 ? `[${textSiblings.indexOf(node2) + 1}]` : "";
-    return `${getXPath(parent)}/text()${index2}`;
-  }
-  if (node2.nodeType === Node.CDATA_SECTION_NODE) {
-    const parent = node2.parentNode;
-    if (!parent) {
-      return "";
+  });
+  const shortSelector = `${tag}${parts.join("")}`;
+  if (isSelectorUnique(shortSelector, node2)) {
+    return shortSelector;
+  }
+  const pathParts = [];
+  let current = node2;
+  while (current && current.nodeType === Node.ELEMENT_NODE) {
+    const parent = current.parentElement;
+    const tagName = current.tagName.toLowerCase();
+    let nth = "";
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (el) => el.tagName.toLowerCase() === tagName
+      );
+      if (siblings.length > 1) {
+        nth = `:nth-of-type(${siblings.indexOf(current) + 1})`;
+      }
+    }
+    pathParts.unshift(`${tagName}${nth}`);
+    current = parent;
+  }
+  return pathParts.join(" > ") || null;
+}
+function buildXPath(node2) {
+  switch (node2.nodeType) {
+    case Node.DOCUMENT_NODE:
+      return "/";
+    case Node.DOCUMENT_TYPE_NODE:
+      return "/html/doctype";
+    case Node.ELEMENT_NODE: {
+      const element = node2;
+      if (element.id) {
+        return `//*[@id="${CSS.escape(element.id)}"]`;
+      }
+      if (element.tagName.toLowerCase() === "html") return "/html";
+      if (element === document.head) return "/html/head";
+      if (element === document.body) return "/html/body";
+      const parent = element.parentNode;
+      if (!parent) return "";
+      const tag = element.tagName.toLowerCase();
+      const siblings = Array.from(parent.children).filter(
+        (el) => el.tagName.toLowerCase() === tag
+      );
+      const index2 = siblings.length > 1 ? `[${siblings.indexOf(element) + 1}]` : "";
+      return `${buildXPath(parent)}/${tag}${index2}`;
+    }
+    case Node.TEXT_NODE:
+    case Node.CDATA_SECTION_NODE:
+    case Node.COMMENT_NODE: {
+      const parent = node2.parentNode;
+      if (!parent) return "";
+      const typeMap = {
+        [Node.TEXT_NODE]: "text()",
+        [Node.CDATA_SECTION_NODE]: "text()",
+        // CDATA ≡ text() в XPath
+        [Node.COMMENT_NODE]: "comment()"
+      };
+      const sameTypeSiblings = Array.from(parent.childNodes).filter(
+        (sibling) => sibling.nodeType === node2.nodeType
+      );
+      const index2 = sameTypeSiblings.length > 1 ? `[${sameTypeSiblings.indexOf(node2)}]` : "";
+      return `${buildXPath(parent)}/${typeMap[node2.nodeType]}${index2}`;
     }
-    const cdataSiblings = Array.from(parent.childNodes).filter(
-      (sibling) => sibling.nodeType === Node.CDATA_SECTION_NODE
-    );
-    const index2 = cdataSiblings.length > 1 ? `[${cdataSiblings.indexOf(node2) + 1}]` : "";
-    return `${getXPath(parent)}/text()${index2}`;
-  }
-  if (node2.nodeType === Node.COMMENT_NODE) {
-    const parent = node2.parentNode;
-    if (!parent) {
+    default:
       return "";
-    }
-    const commentSiblings = Array.from(parent.childNodes).filter(
-      (sibling) => sibling.nodeType === Node.COMMENT_NODE
-    );
-    const index2 = commentSiblings.length > 1 ? `[${commentSiblings.indexOf(node2) + 1}]` : "";
-    return `${getXPath(parent)}/comment()${index2}`;
   }
-  return "";
 }
 function isTextVisible(n2) {
   var _a2;
@@ -635,20 +696,9 @@ function isTextVisible(n2) {
   const textContent2 = (_a2 = n2.textContent) == null ? void 0 : _a2.trim();
   return textContent2 !== "";
 }
-function isElementVisible(n2) {
-  var _a2;
-  const win = ((_a2 = n2.ownerDocument) == null ? void 0 : _a2.defaultView) ?? null;
-  const style = win ? win.getComputedStyle(n2) : null;
-  const isStyleVisible = style != null && style.display !== "none" && style.visibility !== "hidden" && parseFloat(style.opacity) !== 0;
-  const rect = n2.getBoundingClientRect();
-  const result2 = isStyleVisible && isRectVisible(rect);
-  return result2;
-}
-function isRectVisible(rect, win = window) {
-  var _a2, _b, _c, _d;
-  const height = (win == null ? void 0 : win.innerHeight) ?? ((_b = (_a2 = win == null ? void 0 : win.document) == null ? void 0 : _a2.documentElement) == null ? void 0 : _b.clientHeight) ?? 0;
-  const width = (win == null ? void 0 : win.innerWidth) ?? ((_d = (_c = win == null ? void 0 : win.document) == null ? void 0 : _c.documentElement) == null ? void 0 : _d.clientWidth) ?? 0;
-  return rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0 && rect.bottom <= height && rect.right <= width;
+function isElementVisible(el) {
+  const visibility = index$1.getElementVisibility(el);
+  return visibility.isVisible;
 }
 const interactiveEvents$1 = [
   "change",
@@ -881,9 +931,6 @@ function transformAttribute(doc, tagName, name, value) {
 function ignoreAttribute(tagName, name, _value) {
   return (tagName === "video" || tagName === "audio") && name === "autoplay";
 }
-function isIncludeAttribute(name, include) {
-  return typeof include === "string" ? name.includes(include) : include.test(name);
-}
 function isExcludeAttribute(name, exclude) {
   return typeof exclude === "string" ? name.includes(exclude) : exclude.test(name);
 }
@@ -1017,7 +1064,6 @@ function serializeNode(n2, options) {
     blockClass,
     blockSelector,
     excludeAttribute,
-    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions = {},
@@ -1031,22 +1077,19 @@ function serializeNode(n2, options) {
     cssCaptured = false
   } = options;
   const rootId = getRootId(doc, mirror2);
-  const xPath = getXPath(n2);
   switch (n2.nodeType) {
     case n2.DOCUMENT_NODE:
       if (n2.compatMode !== "CSS1Compat") {
         return {
           type: NodeType$3.Document,
           childNodes: [],
-          xPath,
           compatMode: n2.compatMode
           // probably "BackCompat"
         };
       } else {
         return {
           type: NodeType$3.Document,
-          childNodes: [],
-          xPath
+          childNodes: []
         };
       }
     case n2.DOCUMENT_TYPE_NODE:
@@ -1055,8 +1098,7 @@ function serializeNode(n2, options) {
         name: n2.name,
         publicId: n2.publicId,
         systemId: n2.systemId,
-        rootId,
-        xPath
+        rootId
       };
     case n2.ELEMENT_NODE:
       return serializeElementNode(n2, {
@@ -1064,7 +1106,6 @@ function serializeNode(n2, options) {
         blockClass,
         blockSelector,
         excludeAttribute,
-        includeAttribute,
         inlineStylesheet,
         maskInputOptions,
         maskInputFn,
@@ -1073,8 +1114,7 @@ function serializeNode(n2, options) {
         recordCanvas,
         keepIframeSrcFn,
         newlyAddedElement,
-        rootId,
-        xPath
+        rootId
       });
     case n2.TEXT_NODE:
       return serializeTextNode(n2, {
@@ -1082,22 +1122,19 @@ function serializeNode(n2, options) {
         needsMask,
         maskTextFn,
         rootId,
-        cssCaptured,
-        xPath
+        cssCaptured
       });
     case n2.CDATA_SECTION_NODE:
       return {
         type: NodeType$3.CDATA,
         textContent: "",
-        rootId,
-        xPath
+        rootId
       };
     case n2.COMMENT_NODE:
       return {
         type: NodeType$3.Comment,
         textContent: index$1.textContent(n2) || "",
-        rootId,
-        xPath
+        rootId
       };
     default:
       return false;
@@ -1109,7 +1146,7 @@ function getRootId(doc, mirror2) {
   return docId === 1 ? void 0 : docId;
 }
 function serializeTextNode(n2, options) {
-  const { needsMask, maskTextFn, rootId, cssCaptured, xPath } = options;
+  const { needsMask, maskTextFn, rootId, cssCaptured } = options;
   const parent = index$1.parentNode(n2);
   const parentTagName = parent && parent.tagName;
   let textContent2 = "";
@@ -1126,15 +1163,10 @@ function serializeTextNode(n2, options) {
   if (!isStyle && !isScript && textContent2 && needsMask) {
     textContent2 = maskTextFn ? maskTextFn(textContent2, index$1.parentElement(n2)) : textContent2.replace(/[\S]/g, "*");
   }
-  const isVisible = isTextVisible(n2);
-  const isInteractive = isElementInteractive(n2);
   return {
     type: NodeType$3.Text,
     textContent: textContent2 || "",
-    rootId,
-    isVisible,
-    isInteractive,
-    xPath
+    rootId
   };
 }
 function serializeElementNode(n2, options) {
@@ -1143,7 +1175,6 @@ function serializeElementNode(n2, options) {
     blockClass,
     blockSelector,
     excludeAttribute,
-    includeAttribute,
     inlineStylesheet,
     maskInputOptions = {},
     maskInputFn,
@@ -1152,8 +1183,7 @@ function serializeElementNode(n2, options) {
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
-    rootId,
-    xPath
+    rootId
   } = options;
   const needBlock = _isBlockedElement(n2, blockClass, blockSelector);
   const tagName = getValidTagName$1(n2);
@@ -1161,7 +1191,7 @@ function serializeElementNode(n2, options) {
   const len = n2.attributes.length;
   for (let i2 = 0; i2 < len; i2++) {
     const attr = n2.attributes[i2];
-    if (isExcludeAttribute(attr.name, excludeAttribute) && !isIncludeAttribute(attr.name, includeAttribute)) {
+    if (isExcludeAttribute(attr.name, excludeAttribute)) {
       continue;
     }
     if (!ignoreAttribute(tagName, attr.name, attr.value)) {
@@ -1323,8 +1353,6 @@ function serializeElementNode(n2, options) {
     if (customElements.get(tagName)) isCustomElement = true;
   } catch (e2) {
   }
-  const isVisible = isElementVisible(n2);
-  const isInteractive = isElementInteractive(n2);
   return {
     type: NodeType$3.Element,
     tagName,
@@ -1333,10 +1361,7 @@ function serializeElementNode(n2, options) {
     isSVG: isSVGElement(n2) || void 0,
     needBlock,
     rootId,
-    isCustom: isCustomElement,
-    isVisible,
-    isInteractive,
-    xPath
+    isCustom: isCustomElement
   };
 }
 function lowerIfExists(maybeAttr) {
@@ -1387,7 +1412,6 @@ function serializeNodeWithId(n2, options) {
     maskTextClass,
     maskTextSelector,
     excludeAttribute,
-    includeAttribute,
     skipChild = false,
     inlineStylesheet = true,
     maskInputOptions = {},
@@ -1423,7 +1447,6 @@ function serializeNodeWithId(n2, options) {
     blockClass,
     blockSelector,
     excludeAttribute,
-    includeAttribute,
     needsMask,
     inlineStylesheet,
     maskInputOptions,
@@ -1449,6 +1472,22 @@ function serializeNodeWithId(n2, options) {
     id = genId();
   }
   const serializedNode = Object.assign(_serializedNode, { id });
+  if (isElement(n2) || n2.nodeType === Node.TEXT_NODE) {
+    serializedNode.xpath = buildXPath(n2);
+    if (isElement(n2)) {
+      const selector = buildSelector(n2);
+      if (selector) {
+        serializedNode.selector = selector;
+      }
+    }
+    if (n2.nodeType === Node.TEXT_NODE) {
+      serializedNode.isVisible = isTextVisible(n2);
+    }
+    if (n2.nodeType === Node.ELEMENT_NODE) {
+      serializedNode.isVisible = isElementVisible(n2);
+      serializedNode.isInteractive = isElementInteractive(n2);
+    }
+  }
   mirror2.add(n2, serializedNode);
   if (id === IGNORED_NODE) {
     return null;
@@ -1477,7 +1516,6 @@ function serializeNodeWithId(n2, options) {
       maskTextClass,
       maskTextSelector,
       excludeAttribute,
-      includeAttribute,
       skipChild,
       inlineStylesheet,
       maskInputOptions,
@@ -1538,7 +1576,6 @@ function serializeNodeWithId(n2, options) {
             maskTextClass,
             maskTextSelector,
             excludeAttribute,
-            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1581,7 +1618,6 @@ function serializeNodeWithId(n2, options) {
             maskTextClass,
             maskTextSelector,
             excludeAttribute,
-            includeAttribute,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
@@ -1619,8 +1655,7 @@ function snapshot(n2, options) {
     blockSelector = null,
     maskTextClass = "rr-mask",
     maskTextSelector = null,
-    excludeAttribute = /^$a/,
-    includeAttribute = /.+/i,
+    excludeAttribute = /.^/,
     inlineStylesheet = true,
     inlineImages = false,
     recordCanvas = false,
@@ -1681,7 +1716,6 @@ function snapshot(n2, options) {
     maskTextClass,
     maskTextSelector,
     excludeAttribute,
-    includeAttribute,
     skipChild: false,
     inlineStylesheet,
     maskInputOptions,
@@ -9092,6 +9126,41 @@ function patch(source, name, replacement) {
     };
   }
 }
+function describeNode(el) {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : "";
+  const classes = el.classList.length ? "." + Array.from(el.classList).join(".") : "";
+  return `${tag}${id}${classes}`;
+}
+function getElementVisibility(el) {
+  var _a2, _b;
+  const win = ((_a2 = el.ownerDocument) == null ? void 0 : _a2.defaultView) ?? window;
+  const rect = el.getBoundingClientRect();
+  const viewportWidth = win.innerWidth || win.document.documentElement.clientWidth || 0;
+  const viewportHeight = win.innerHeight || win.document.documentElement.clientHeight || 0;
+  const isRectVisible = rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < viewportHeight && rect.left < viewportWidth;
+  const style = (_b = win.getComputedStyle) == null ? void 0 : _b.call(win, el);
+  const isStyleVisible2 = !!style && style.display !== "none" && style.visibility !== "hidden" && (parseFloat(style.opacity) || 0) > 0;
+  const isVisible = isStyleVisible2 && isRectVisible;
+  let ratio = 0;
+  if (isVisible) {
+    const xOverlap = Math.max(
+      0,
+      Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0)
+    );
+    const yOverlap = Math.max(
+      0,
+      Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0)
+    );
+    const intersectionArea = xOverlap * yOverlap;
+    const elementArea = rect.width * rect.height;
+    ratio = elementArea > 0 ? intersectionArea / elementArea : 0;
+  }
+  return {
+    isVisible,
+    ratio
+  };
+}
 const index = {
   childNodes,
   parentNode,
@@ -9105,7 +9174,9 @@ const index = {
   querySelector,
   querySelectorAll,
   mutationObserver: mutationObserverCtor,
-  patch
+  patch,
+  describeNode,
+  getElementVisibility
 };
 function on(type, fn, target = document) {
   const options = { capture: true, passive: true };
@@ -9379,6 +9450,7 @@ var IncrementalSource = /* @__PURE__ */ ((IncrementalSource2) => {
   IncrementalSource2[IncrementalSource2["Selection"] = 14] = "Selection";
   IncrementalSource2[IncrementalSource2["AdoptedStyleSheet"] = 15] = "AdoptedStyleSheet";
   IncrementalSource2[IncrementalSource2["CustomElement"] = 16] = "CustomElement";
+  IncrementalSource2[IncrementalSource2["VisibilityMutation"] = 17] = "VisibilityMutation";
   return IncrementalSource2;
 })(IncrementalSource || {});
 var MouseInteractions = /* @__PURE__ */ ((MouseInteractions2) => {
@@ -9525,7 +9597,6 @@ class MutationBuffer {
     __publicField(this, "maskTextClass");
     __publicField(this, "maskTextSelector");
     __publicField(this, "excludeAttribute");
-    __publicField(this, "includeAttribute");
     __publicField(this, "inlineStylesheet");
     __publicField(this, "maskInputOptions");
     __publicField(this, "maskTextFn");
@@ -9541,6 +9612,7 @@ class MutationBuffer {
     __publicField(this, "stylesheetManager");
     __publicField(this, "shadowDomManager");
     __publicField(this, "canvasManager");
+    __publicField(this, "visibilityManager");
     __publicField(this, "processedNodeManager");
     __publicField(this, "unattachedDoc");
     __publicField(this, "processMutations", (mutations) => {
@@ -9590,7 +9662,6 @@ class MutationBuffer {
           maskTextClass: this.maskTextClass,
           maskTextSelector: this.maskTextSelector,
           excludeAttribute: this.excludeAttribute,
-          includeAttribute: this.includeAttribute,
           skipChild: true,
           newlyAddedElement: true,
           inlineStylesheet: this.inlineStylesheet,
@@ -9636,7 +9707,8 @@ class MutationBuffer {
         this.mirror.removeNodeFromMap(this.mapRemoves.shift());
       }
       for (const n2 of this.movedSet) {
-        if (isParentRemoved(this.removesSubTreeCache, n2, this.mirror) && !this.movedSet.has(index.parentNode(n2))) {
+        if (isParentRemoved(this.removesSubTreeCache, n2, this.mirror) && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        !this.movedSet.has(index.parentNode(n2))) {
           continue;
         }
         pushAdd(n2);
@@ -9792,12 +9864,60 @@ class MutationBuffer {
           const target = m.target;
           let attributeName = m.attributeName;
           let value = m.target.getAttribute(attributeName);
-          const propValue = target[attributeName];
-          const isPhantomAttributeMutation = value === null && !target.hasAttribute(attributeName) && m.oldValue !== null && (propValue === "" || propValue === null || typeof propValue === "undefined");
+          const attrKey = attributeName;
+          const propValue = target[attrKey];
+          const isBooleanAttr = typeof propValue === "boolean";
+          const inDOM = document.contains(target);
+          const isVisible = isElementVisible(target);
+          const isExcludeAttributeName = isExcludeAttribute(attributeName, this.excludeAttribute);
+          const isPhantomAttributeMutation = value === null && // текущего атрибута нет
+          !target.hasAttribute(attributeName) && // явно подтверждаем отсутствие
+          m.oldValue !== null && // раньше он был
+          (propValue === "" || // свойство = пустая строка
+          propValue === null || // или null
+          typeof propValue === "undefined");
           if (isPhantomAttributeMutation) {
+            console.debug(
+              `[${nowTimestamp()}] [rrweb:record/mutation] ⛔ phantom attribute mutation ignored`,
+              {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call
+                node: index.describeNode(target),
+                tag: target.tagName,
+                nodeType: target.nodeType,
+                attribute: attributeName,
+                value,
+                oldValue: m.oldValue,
+                excludeAttribute: this.excludeAttribute,
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                propValue,
+                isBooleanAttr,
+                inDOM,
+                isVisible,
+                isExcludeAttributeName
+              }
+            );
             return;
           }
           if (isExcludeAttribute(attributeName, this.excludeAttribute)) {
+            console.debug(
+              `[${nowTimestamp()}] [rrweb:record/mutation] ⛔ excluded attribute mutation ignored`,
+              {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call
+                node: index.describeNode(target),
+                tag: target.tagName,
+                nodeType: target.nodeType,
+                attribute: attributeName,
+                value,
+                oldValue: m.oldValue,
+                excludeAttribute: this.excludeAttribute,
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                propValue,
+                isBooleanAttr,
+                inDOM,
+                isVisible,
+                isExcludeAttributeName
+              }
+            );
             return;
           }
           if (attributeName === "value") {
@@ -9842,9 +9962,35 @@ class MutationBuffer {
               toLowerCase(attributeName),
               value
             );
-            if (value === item.attributes[attributeName]) {
-              console.debug("[rrweb-record] A questionable mutation that needs to be investigated in the future.");
-              return;
+            const isSuspiciousClassMutation = attributeName !== "class" && (m.oldValue === null || // ранее не было класса
+            value === "" || // класс удалён
+            value !== m.oldValue);
+            if (isSuspiciousClassMutation) {
+              console.debug(
+                `[${nowTimestamp()}] [rrweb:record/mutation] ⚠️ suspicious attribute mutation`,
+                {
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call
+                  reason: [
+                    value === m.oldValue ? "no change in value" : null,
+                    value === propValue ? "mirrored in DOM property" : null,
+                    value === item.attributes[attributeName] ? "redundant assignment" : null
+                  ].filter(Boolean).join(", ") || "uncategorized",
+                  node: index.describeNode(target),
+                  tag: target.tagName,
+                  nodeType: target.nodeType,
+                  attribute: attributeName,
+                  value,
+                  oldValue: m.oldValue,
+                  transformedValue: item.attributes[attributeName],
+                  excludeAttribute: this.excludeAttribute,
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                  propValue,
+                  isBooleanAttr,
+                  inDOM,
+                  isVisible,
+                  isExcludeAttributeName
+                }
+              );
             }
             if (attributeName === "style") {
               if (!this.unattachedDoc) {
@@ -9959,7 +10105,6 @@ class MutationBuffer {
       "maskTextClass",
       "maskTextSelector",
       "excludeAttribute",
-      "includeAttribute",
       "inlineStylesheet",
       "maskInputOptions",
       "maskTextFn",
@@ -9975,6 +10120,7 @@ class MutationBuffer {
       "stylesheetManager",
       "shadowDomManager",
       "canvasManager",
+      "visibilityManager",
       "processedNodeManager"
     ].forEach((key) => {
       this[key] = options[key];
@@ -9983,10 +10129,12 @@ class MutationBuffer {
   freeze() {
     this.frozen = true;
     this.canvasManager.freeze();
+    this.visibilityManager.freeze();
   }
   unfreeze() {
     this.frozen = false;
     this.canvasManager.unfreeze();
+    this.visibilityManager.unfreeze();
     this.emit();
   }
   isFrozen() {
@@ -9995,15 +10143,18 @@ class MutationBuffer {
   lock() {
     this.locked = true;
     this.canvasManager.lock();
+    this.visibilityManager.lock();
   }
   unlock() {
     this.locked = false;
     this.canvasManager.unlock();
+    this.visibilityManager.unlock();
     this.emit();
   }
   reset() {
     this.shadowDomManager.reset();
     this.canvasManager.reset();
+    this.visibilityManager.reset();
   }
 }
 function deepDelete(addsSet, n2) {
@@ -10937,6 +11088,7 @@ function mergeHooks(o2, hooks) {
     styleSheetRuleCb,
     styleDeclarationCb,
     canvasMutationCb,
+    visibilityMutationCb,
     fontCb,
     selectionCb,
     customElementCb
@@ -11001,6 +11153,12 @@ function mergeHooks(o2, hooks) {
     }
     canvasMutationCb(...p);
   };
+  o2.visibilityMutationCb = (...p) => {
+    if (hooks.visibilityMutation) {
+      hooks.visibilityMutation(...p);
+    }
+    visibilityMutationCb(...p);
+  };
   o2.fontCb = (...p) => {
     if (hooks.font) {
       hooks.font(...p);
@@ -12114,11 +12272,249 @@ class ProcessedNodeManager {
   destroy() {
   }
 }
+function computeVisibility(elements, previous, options) {
+  const root2 = (options == null ? void 0 : options.root) ?? null;
+  const threshold = (options == null ? void 0 : options.threshold) ?? 0.5;
+  const sensitivity = (options == null ? void 0 : options.sensitivity) ?? 0.05;
+  const rootMarginFn = parseRootMargin((options == null ? void 0 : options.rootMargin) ?? "0px");
+  const current = /* @__PURE__ */ new Map();
+  const rootRect = getRootRect(root2);
+  const expandedRoot = expandRootRect(rootRect, rootMarginFn);
+  for (const el of elements) {
+    const elRect = el.getBoundingClientRect();
+    let intersectionRect = emptyRect();
+    let intersectionRatio = 0;
+    if (elRect.width > 0 && elRect.height > 0) {
+      intersectionRect = computeIntersectionRect(elRect, expandedRoot);
+      intersectionRatio = computeIntersectionRatio(elRect, intersectionRect);
+      intersectionRatio = Math.round(intersectionRatio * 100) / 100;
+    }
+    const isStyle = isStyleVisible(el);
+    const old = previous.get(el) ?? null;
+    const prevRatio = (old == null ? void 0 : old.intersectionRatio) ?? 0;
+    const currRatio = intersectionRatio;
+    const wasVisible = (old == null ? void 0 : old.isStyleVisible) && prevRatio > threshold;
+    const nowVisible = isStyle && currRatio > threshold;
+    const changed = !old || wasVisible !== nowVisible || wasVisible !== nowVisible && Math.abs(currRatio - prevRatio) > sensitivity;
+    if (changed) {
+      current.set(el, {
+        target: el,
+        isVisible: nowVisible,
+        isStyleVisible: isStyle,
+        intersectionRatio: currRatio,
+        intersectionRect,
+        oldValue: old
+      });
+    } else {
+      current.set(el, old);
+    }
+  }
+  return current;
+}
+function parseRootMargin(marginStr) {
+  const parts = marginStr.trim().split(/\s+/);
+  const getValue = (val, size) => val.endsWith("%") ? parseFloat(val) / 100 * size : parseFloat(val) || 0;
+  return function(rootRect) {
+    const top = getValue(parts[0] || "0px", rootRect.height);
+    const right = getValue(parts[1] || parts[0] || "0px", rootRect.width);
+    const bottom = getValue(parts[2] || parts[0] || "0px", rootRect.height);
+    const left = getValue(parts[3] || parts[1] || parts[0] || "0px", rootRect.width);
+    return { top, right, bottom, left, width: 0, height: 0 };
+  };
+}
+function getRootRect(root2) {
+  return root2 ? root2.getBoundingClientRect() : new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+}
+function expandRootRect(rect, marginFn) {
+  const margin = marginFn(rect);
+  return new DOMRect(
+    rect.left - margin.left,
+    rect.top - margin.top,
+    rect.width + margin.left + margin.right,
+    rect.height + margin.top + margin.bottom
+  );
+}
+function computeIntersectionRect(a2, b) {
+  const top = Math.max(a2.top, b.top);
+  const left = Math.max(a2.left, b.left);
+  const bottom = Math.min(a2.bottom, b.bottom);
+  const right = Math.min(a2.right, b.right);
+  const width = Math.max(0, right - left);
+  const height = Math.max(0, bottom - top);
+  return { top, left, bottom, right, width, height };
+}
+function computeIntersectionRatio(elRect, intersectionRect) {
+  const elArea = elRect.width * elRect.height;
+  const intArea = intersectionRect.width * intersectionRect.height;
+  return elArea > 0 ? intArea / elArea : 0;
+}
+function emptyRect() {
+  return { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 };
+}
+function isStyleVisible(el) {
+  const style = getComputedStyle(el);
+  return style && style.display !== "none" && style.visibility !== "hidden" && parseFloat(style.opacity || "1") > 0;
+}
+class VisibilityManager {
+  constructor(options) {
+    __publicField(this, "frozen", false);
+    __publicField(this, "locked", false);
+    __publicField(this, "pending", /* @__PURE__ */ new Map());
+    __publicField(this, "mirror");
+    __publicField(this, "mutationCb");
+    __publicField(this, "rafId", null);
+    __publicField(this, "rafThrottle");
+    __publicField(this, "lastFlushTime", 0);
+    __publicField(this, "elements", /* @__PURE__ */ new Set());
+    __publicField(this, "previousState", /* @__PURE__ */ new Map());
+    __publicField(this, "root", null);
+    __publicField(this, "threshold");
+    __publicField(this, "sensitivity");
+    __publicField(this, "rootMargin");
+    __publicField(this, "hasInitialized", false);
+    __publicField(this, "mode", "none");
+    __publicField(this, "debounce", 50);
+    __publicField(this, "throttle", 100);
+    __publicField(this, "buffer", /* @__PURE__ */ new Map());
+    __publicField(this, "debounceTimer", null);
+    __publicField(this, "lastThrottleTime", 0);
+    __publicField(this, "disabled", false);
+    __publicField(this, "notifyActivity");
+    const { doc, mirror: mirror2, sampling, mutationCb, notifyActivity } = options;
+    this.mirror = mirror2;
+    this.mutationCb = mutationCb;
+    this.notifyActivity = notifyActivity;
+    this.rootMargin = "0px";
+    if (sampling === false) {
+      this.disabled = true;
+      return;
+    }
+    const visibilitySampling = typeof sampling === "object" && sampling !== null ? sampling : {};
+    this.mode = (visibilitySampling == null ? void 0 : visibilitySampling.mode) ?? "none";
+    this.debounce = Number((visibilitySampling == null ? void 0 : visibilitySampling.debounce) ?? 100);
+    this.throttle = Number((visibilitySampling == null ? void 0 : visibilitySampling.throttle) ?? 100);
+    this.threshold = Number((visibilitySampling == null ? void 0 : visibilitySampling.threshold) ?? 0.5);
+    this.sensitivity = Number((visibilitySampling == null ? void 0 : visibilitySampling.sensitivity) ?? 0.05);
+    this.rafThrottle = Number((visibilitySampling == null ? void 0 : visibilitySampling.rafThrottle) ?? 100);
+    doc.querySelectorAll("*").forEach((el) => this.observe(el));
+    const mo = new MutationObserver((mutations) => {
+      mutations.forEach((m) => {
+        m.addedNodes.forEach((n2) => {
+          if (n2.nodeType === Node.ELEMENT_NODE) {
+            this.observe(n2);
+            n2.querySelectorAll("*").forEach((el) => this.observe(el));
+          }
+        });
+        m.removedNodes.forEach((n2) => {
+          if (n2.nodeType === Node.ELEMENT_NODE) {
+            this.unobserve(n2);
+          }
+        });
+      });
+    });
+    mo.observe(doc.body, { childList: true, subtree: true });
+    this.startPendingFlushLoop();
+  }
+  startPendingFlushLoop() {
+    if (this.disabled) return;
+    const loop = (timestamp) => {
+      if (timestamp - this.lastFlushTime >= this.rafThrottle) {
+        this.lastFlushTime = timestamp;
+        this.flushPendingVisibilityMutations();
+      }
+      this.rafId = requestAnimationFrame(loop);
+    };
+    this.rafId = requestAnimationFrame(loop);
+  }
+  flushPendingVisibilityMutations() {
+    if (this.disabled) return;
+    if (this.frozen || this.locked || this.elements.size === 0) return;
+    const state = computeVisibility(this.elements, this.previousState, {
+      root: this.root,
+      threshold: this.threshold,
+      sensitivity: this.sensitivity,
+      rootMargin: this.rootMargin
+    });
+    for (const [el, entry] of state.entries()) {
+      const old = this.previousState.get(el);
+      const changed = !old || old.isVisible !== entry.isVisible || Math.abs(old.intersectionRatio - entry.intersectionRatio) > this.sensitivity;
+      if (changed) {
+        const id = this.mirror.getId(el);
+        if (id !== -1) {
+          this.buffer.set(el, {
+            id,
+            isVisible: entry.isVisible,
+            ratio: entry.intersectionRatio
+          });
+        }
+        this.previousState.set(el, entry);
+      }
+    }
+    this.previousState = state;
+    if (!this.hasInitialized) {
+      this.hasInitialized = true;
+      this.buffer.clear();
+      return;
+    }
+    this.scheduleEmit();
+  }
+  scheduleEmit() {
+    if (this.mode === "debounce") {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = setTimeout(() => this.flushBuffer(), this.debounce);
+    } else if (this.mode === "throttle") {
+      const now = performance.now();
+      if (now - this.lastThrottleTime >= this.throttle) {
+        this.lastThrottleTime = now;
+        this.flushBuffer();
+      }
+    } else {
+      this.flushBuffer();
+    }
+  }
+  flushBuffer() {
+    var _a2;
+    if (this.buffer.size === 0) return;
+    (_a2 = this.notifyActivity) == null ? void 0 : _a2.call(this, this.buffer.size);
+    this.mutationCb({ mutations: Array.from(this.buffer.values()) });
+    this.buffer.clear();
+  }
+  observe(el) {
+    if (this.disabled) return;
+    this.elements.add(el);
+  }
+  unobserve(el) {
+    if (this.disabled) return;
+    this.elements.delete(el);
+    this.previousState.delete(el);
+    this.pending.delete(el);
+  }
+  freeze() {
+    this.frozen = true;
+  }
+  unfreeze() {
+    this.frozen = false;
+  }
+  lock() {
+    this.locked = true;
+  }
+  unlock() {
+    this.locked = false;
+  }
+  reset() {
+    this.elements.clear();
+    this.previousState.clear();
+    this.pending.clear();
+    if (this.rafId) cancelAnimationFrame(this.rafId);
+  }
+}
 let wrappedEmit;
 let takeFullSnapshot$1;
 let canvasManager;
+let visibilityManager;
 let recording = false;
-const preRecordingCustomEvents = [];
+const customEventQueue = [];
+let flushCustomEventQueue;
 try {
   if (Array.from([1], (x2) => x2 * 2)[0] !== 2) {
     const cleanFrame = document.createElement("iframe");
@@ -12135,12 +12531,12 @@ function record(options = {}) {
     emit,
     checkoutEveryNms,
     checkoutEveryNth,
+    checkoutEveryNvm,
     blockClass = "rr-block",
     blockSelector = null,
     ignoreClass = "rr-ignore",
     ignoreSelector = null,
     excludeAttribute: _excludeAttribute,
-    includeAttribute: _includeAttribute,
     maskTextClass = "rr-mask",
     maskTextSelector = null,
     inlineStylesheet = true,
@@ -12158,7 +12554,7 @@ function record(options = {}) {
     recordCanvas = false,
     recordCrossOriginIframes = false,
     recordAfter = options.recordAfter === "DOMContentLoaded" ? options.recordAfter : "load",
-    flushCustomQueue = options.flushCustomQueue !== void 0 ? options.flushCustomQueue : "after",
+    flushCustomEvent = options.flushCustomEvent !== void 0 ? options.flushCustomEvent : "after",
     userTriggeredOnInput = false,
     collectFonts = false,
     inlineImages = false,
@@ -12190,8 +12586,7 @@ function record(options = {}) {
     sampling.mousemove = mousemoveWait;
   }
   mirror.reset();
-  const excludeAttribute = _excludeAttribute === void 0 ? /^$a/ : _excludeAttribute;
-  const includeAttribute = _includeAttribute === void 0 ? /.+/i : _includeAttribute;
+  const excludeAttribute = _excludeAttribute === void 0 ? /.^/ : _excludeAttribute;
   const maskInputOptions = maskAllInputs === true ? {
     color: true,
     date: true,
@@ -12228,6 +12623,10 @@ function record(options = {}) {
   polyfill$1();
   let lastFullSnapshotEvent;
   let incrementalSnapshotCount = 0;
+  let recentVisibilityChanges = 0;
+  const onVisibilityActivity = (count) => {
+    recentVisibilityChanges += count;
+  };
   const eventProcessor = (e2) => {
     for (const plugin3 of plugins || []) {
       if (plugin3.eventProcessor) {
@@ -12268,7 +12667,11 @@ function record(options = {}) {
       incrementalSnapshotCount++;
       const exceedCount = checkoutEveryNth && incrementalSnapshotCount >= checkoutEveryNth;
       const exceedTime = checkoutEveryNms && e2.timestamp - lastFullSnapshotEvent.timestamp > checkoutEveryNms;
-      if (exceedCount || exceedTime) {
+      const exceedVisibility = checkoutEveryNvm && recentVisibilityChanges >= checkoutEveryNvm;
+      if (exceedCount || exceedTime || exceedVisibility) {
+        if (exceedVisibility) {
+          recentVisibilityChanges = 0;
+        }
         takeFullSnapshot$1(true);
       }
     }
@@ -12296,6 +12699,17 @@ function record(options = {}) {
       ...p
     }
   });
+  const wrappedVisibilityMutationEmit = (p) => {
+    var _a2;
+    (_a2 = hooks == null ? void 0 : hooks.visibilityMutation) == null ? void 0 : _a2.call(hooks, p);
+    wrappedEmit({
+      type: EventType.IncrementalSnapshot,
+      data: {
+        source: IncrementalSource.VisibilityMutation,
+        ...p
+      }
+    });
+  };
   const wrappedAdoptedStyleSheetEmit = (a2) => wrappedEmit({
     type: EventType.IncrementalSnapshot,
     data: {
@@ -12333,6 +12747,13 @@ function record(options = {}) {
     sampling: sampling.canvas,
     dataURLOptions
   });
+  visibilityManager = new VisibilityManager({
+    doc: window.document,
+    mirror,
+    sampling: sampling.visibility,
+    mutationCb: wrappedVisibilityMutationEmit,
+    notifyActivity: onVisibilityActivity
+  });
   const shadowDomManager = new ShadowDomManager({
     mutationCb: wrappedMutationEmit,
     scrollCb: wrappedScrollEmit,
@@ -12342,7 +12763,6 @@ function record(options = {}) {
       maskTextClass,
       maskTextSelector,
       excludeAttribute,
-      includeAttribute,
       inlineStylesheet,
       maskInputOptions,
       dataURLOptions,
@@ -12355,6 +12775,7 @@ function record(options = {}) {
       iframeManager,
       stylesheetManager,
       canvasManager,
+      visibilityManager,
       keepIframeSrcFn,
       processedNodeManager
     },
@@ -12385,7 +12806,6 @@ function record(options = {}) {
       maskTextClass,
       maskTextSelector,
       excludeAttribute,
-      includeAttribute,
       inlineStylesheet,
       maskAllInputs: maskInputOptions,
       maskTextFn,
@@ -12434,6 +12854,12 @@ function record(options = {}) {
         mirror.getId(document)
       );
   };
+  flushCustomEventQueue = () => {
+    for (const e2 of customEventQueue) {
+      wrappedEmit(e2);
+    }
+    customEventQueue.length = 0;
+  };
   try {
     const handlers = [];
     const observe = (doc) => {
@@ -12492,6 +12918,7 @@ function record(options = {}) {
             }
           }),
           canvasMutationCb: wrappedCanvasMutationEmit,
+          visibilityMutationCb: wrappedVisibilityMutationEmit,
           fontCb: (p) => wrappedEmit({
             type: EventType.IncrementalSnapshot,
             data: {
@@ -12523,7 +12950,6 @@ function record(options = {}) {
           maskTextClass,
           maskTextSelector,
           excludeAttribute,
-          includeAttribute,
           maskInputOptions,
           inlineStylesheet,
           sampling,
@@ -12545,6 +12971,7 @@ function record(options = {}) {
           shadowDomManager,
           processedNodeManager,
           canvasManager,
+          visibilityManager,
           ignoreCSSAttributes,
           plugins: ((_a2 = plugins == null ? void 0 : plugins.filter((p) => p.observer)) == null ? void 0 : _a2.map((p) => ({
             observer: p.observer,
@@ -12569,14 +12996,14 @@ function record(options = {}) {
       }
     });
     const init = () => {
-      if (flushCustomQueue === "before") {
-        flushPreRecordingEvents();
+      if (flushCustomEvent === "before") {
+        flushCustomEventQueue();
       }
       takeFullSnapshot$1();
       handlers.push(observe(document));
       recording = true;
-      if (flushCustomQueue === "after") {
-        flushPreRecordingEvents();
+      if (flushCustomEvent === "after") {
+        flushCustomEventQueue();
       }
     };
     if (document.readyState === "interactive" || document.readyState === "complete") {
@@ -12606,7 +13033,7 @@ function record(options = {}) {
       );
     }
     return () => {
-      flushPreRecordingEvents();
+      flushCustomEventQueue();
       handlers.forEach((h) => h());
       processedNodeManager.destroy();
       recording = false;
@@ -12616,12 +13043,10 @@ function record(options = {}) {
     console.warn(error);
   }
 }
-function flushPreRecordingEvents() {
-  for (const e2 of preRecordingCustomEvents) {
-    wrappedEmit(e2);
-  }
-  preRecordingCustomEvents.length = 0;
-}
+record.flushCustomEventQueue = () => {
+  console.warn(`[rrweb] CustomEvent flushing: ${customEventQueue.length} events`);
+  flushCustomEventQueue();
+};
 record.addCustomEvent = (tag, payload) => {
   const customEvent = {
     type: EventType.Custom,
@@ -12631,8 +13056,8 @@ record.addCustomEvent = (tag, payload) => {
     }
   };
   if (!recording) {
-    console.warn(`[rrweb] CustomEvent buffered before recording start: ${tag}`);
-    preRecordingCustomEvents.push(customEvent);
+    console.warn(`[rrweb] CustomEvent buffered before/after recording start: ${tag}`);
+    customEventQueue.push(customEvent);
     return;
   }
   wrappedEmit(customEvent);