@sentry/replay 7.52.0 → 7.52.1

package/cjs/index.js

@@ -3374,6 +3374,141 @@ function addBreadcrumbEvent(replay, breadcrumb) {
   });
 }
 
+/**
+ * Detect a slow click on a button/a tag,
+ * and potentially create a corresponding breadcrumb.
+ */
+function detectSlowClick(
+  replay,
+  config,
+  clickBreadcrumb,
+  node,
+) {
+  if (ignoreElement(node, config)) {
+    return;
+  }
+
+  /*
+    We consider a slow click a click on a button/a, which does not trigger one of:
+     - DOM mutation
+     - Scroll (within 100ms)
+     Within the given threshold time.
+     After time timeout time, we stop listening and mark it as a slow click anyhow.
+  */
+
+  let cleanup = () => {
+    // replaced further down
+  };
+
+  // After timeout time, def. consider this a slow click, and stop watching for mutations
+  const timeout = setTimeout(() => {
+    handleSlowClick(replay, clickBreadcrumb, config.timeout, 'timeout');
+    cleanup();
+  }, config.timeout);
+
+  const mutationHandler = () => {
+    maybeHandleSlowClick(replay, clickBreadcrumb, config.threshold, config.timeout, 'mutation');
+    cleanup();
+  };
+
+  const scrollHandler = () => {
+    maybeHandleSlowClick(replay, clickBreadcrumb, config.scrollTimeout, config.timeout, 'scroll');
+    cleanup();
+  };
+
+  const obs = new MutationObserver(mutationHandler);
+
+  obs.observe(WINDOW.document.documentElement, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  });
+
+  WINDOW.addEventListener('scroll', scrollHandler);
+
+  // Stop listening to scroll timeouts early
+  const scrollTimeout = setTimeout(() => {
+    WINDOW.removeEventListener('scroll', scrollHandler);
+  }, config.scrollTimeout);
+
+  cleanup = () => {
+    clearTimeout(timeout);
+    clearTimeout(scrollTimeout);
+    obs.disconnect();
+    WINDOW.removeEventListener('scroll', scrollHandler);
+  };
+}
+
+function maybeHandleSlowClick(
+  replay,
+  clickBreadcrumb,
+  threshold,
+  timeout,
+  endReason,
+) {
+  const now = Date.now();
+  const timeAfterClickMs = now - clickBreadcrumb.timestamp * 1000;
+
+  if (timeAfterClickMs > threshold) {
+    handleSlowClick(replay, clickBreadcrumb, Math.min(timeAfterClickMs, timeout), endReason);
+    return true;
+  }
+
+  return false;
+}
+
+function handleSlowClick(
+  replay,
+  clickBreadcrumb,
+  timeAfterClickMs,
+  endReason,
+) {
+  const breadcrumb = {
+    message: clickBreadcrumb.message,
+    timestamp: clickBreadcrumb.timestamp,
+    category: 'ui.slowClickDetected',
+    data: {
+      ...clickBreadcrumb.data,
+      url: WINDOW.location.href,
+      // TODO FN: add parametrized route, when possible
+      timeAfterClickMs,
+      endReason,
+    },
+  };
+
+  addBreadcrumbEvent(replay, breadcrumb);
+}
+
+const SLOW_CLICK_IGNORE_TAGS = ['SELECT', 'OPTION'];
+
+function ignoreElement(node, config) {
+  // If <input> tag, we only want to consider input[type='submit'] & input[type='button']
+  if (node.tagName === 'INPUT' && !['submit', 'button'].includes(node.getAttribute('type') || '')) {
+    return true;
+  }
+
+  if (SLOW_CLICK_IGNORE_TAGS.includes(node.tagName)) {
+    return true;
+  }
+
+  // If <a> tag, detect special variants that may not lead to an action
+  // If target !== _self, we may open the link somewhere else, which would lead to no action
+  // Also, when downloading a file, we may not leave the page, but still not trigger an action
+  if (
+    node.tagName === 'A' &&
+    (node.hasAttribute('download') || (node.hasAttribute('target') && node.getAttribute('target') !== '_self'))
+  ) {
+    return true;
+  }
+
+  if (config.ignoreSelector && node.matches(config.ignoreSelector)) {
+    return true;
+  }
+
+  return false;
+}
+
 // Note that these are the serialized attributes and not attributes directly on
 // the DOM Node. Attributes we are interested in:
 const ATTRIBUTES_TO_RECORD = new Set([
@@ -3408,9 +3543,21 @@ function getAttributesToRecord(attributes) {
   return obj;
 }
 
-const handleDomListener =
-  (replay) =>
-  (handlerData) => {
+const handleDomListener = (
+  replay,
+) => {
+  const slowClickExperiment = replay.getOptions()._experiments.slowClicks;
+
+  const slowClickConfig = slowClickExperiment
+    ? {
+        threshold: slowClickExperiment.threshold,
+        timeout: slowClickExperiment.timeout,
+        scrollTimeout: slowClickExperiment.scrollTimeout,
+        ignoreSelector: slowClickExperiment.ignoreSelectors ? slowClickExperiment.ignoreSelectors.join(',') : '',
+      }
+    : undefined;
+
+  return (handlerData) => {
     if (!replay.isEnabled()) {
       return;
     }
@@ -3421,8 +3568,21 @@ const handleDomListener =
       return;
     }
 
+    const isClick = handlerData.name === 'click';
+    const event = isClick && (handlerData.event );
+    // Ignore clicks if ctrl/alt/meta keys are held down as they alter behavior of clicks (e.g. open in new tab)
+    if (isClick && slowClickConfig && event && !event.altKey && !event.metaKey && !event.ctrlKey) {
+      detectSlowClick(
+        replay,
+        slowClickConfig,
+        result ,
+        getClickTargetNode(handlerData.event) ,
+      );
+    }
+
     addBreadcrumbEvent(replay, result);
   };
+};
 
 /** Get the base DOM breadcrumb. */
 function getBaseDomBreadcrumb(target, message) {