handle more elements

Author: mydea

packages/browser-integration-tests/suites/replay/slowClick/clickTargets/test.ts

@@ -0,0 +1,141 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers';
+
+[
+  {
+    id: 'link',
+    slowClick: true,
+  },
+  {
+    id: 'linkExternal',
+    slowClick: false,
+  },
+  {
+    id: 'linkDownload',
+    slowClick: false,
+  },
+  {
+    id: 'inputButton',
+    slowClick: true,
+  },
+  {
+    id: 'inputSubmit',
+    slowClick: true,
+  },
+  {
+    id: 'inputText',
+    slowClick: false,
+  },
+].forEach(({ id, slowClick }) => {
+  if (slowClick) {
+    sentryTest(`slow click is captured for ${id}`, async ({ getLocalTestUrl, page }) => {
+      if (shouldSkipReplayTest()) {
+        sentryTest.skip();
+      }
+
+      page.on('console', msg => console.log(msg.text()));
+
+      const reqPromise0 = waitForReplayRequest(page, 0);
+
+      await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ id: 'test-id' }),
+        });
+      });
+
+      const url = await getLocalTestUrl({ testDir: __dirname });
+
+      await page.goto(url);
+      await reqPromise0;
+
+      const reqPromise1 = waitForReplayRequest(page, (event, res) => {
+        const { breadcrumbs } = getCustomRecordingEvents(res);
+
+        return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
+      });
+
+      await page.click(`#${id}`);
+
+      const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+      const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
+
+      expect(slowClickBreadcrumbs).toEqual([
+        {
+          category: 'ui.slowClickDetected',
+          data: {
+            endReason: 'timeout',
+            node: {
+              attributes: expect.objectContaining({
+                id,
+              }),
+              id: expect.any(Number),
+              tagName: expect.any(String),
+              textContent: expect.any(String),
+            },
+            nodeId: expect.any(Number),
+            timeAfterClickMs: expect.any(Number),
+            url: expect.any(String),
+          },
+          message: expect.any(String),
+          timestamp: expect.any(Number),
+        },
+      ]);
+    });
+  } else {
+    sentryTest(`slow click is not captured for ${id}`, async ({ getLocalTestUrl, page }) => {
+      if (shouldSkipReplayTest()) {
+        sentryTest.skip();
+      }
+
+      const reqPromise0 = waitForReplayRequest(page, 0);
+
+      await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ id: 'test-id' }),
+        });
+      });
+
+      const url = await getLocalTestUrl({ testDir: __dirname });
+
+      await page.goto(url);
+      await reqPromise0;
+
+      const reqPromise1 = waitForReplayRequest(page, (event, res) => {
+        const { breadcrumbs } = getCustomRecordingEvents(res);
+
+        return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click');
+      });
+
+      await page.click(`#${id}`);
+
+      const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+      expect(breadcrumbs).toEqual([
+        {
+          category: 'ui.click',
+          data: {
+            node: {
+              attributes: expect.objectContaining({
+                id,
+              }),
+              id: expect.any(Number),
+              tagName: expect.any(String),
+              textContent: expect.any(String),
+            },
+            nodeId: expect.any(Number),
+          },
+          message: expect.any(String),
+          timestamp: expect.any(Number),
+          type: 'default',
+        },
+      ]);
+    });
+  }
+});

packages/browser-integration-tests/suites/replay/slowClick/template.html

@@ -19,6 +19,13 @@
     <button id="scrollLateButton">Trigger scroll late</button>
     <button id="mutationIgnoreButton" class="ignore-class">Trigger scroll late</button>
 
+    <a href="#" id="link">Link</a>
+    <a href="#" target="_blank" id="linkExternal">Link external</a>
+    <a href="" download id="linkDownload">Link download</a>
+    <input type="button" id="inputButton" value="Input button" />
+    <input type="submit" id="inputSubmit" value="Input submit" />
+    <input type="text" id="inputText" />
+
     <h1 id="h1">Heading</h1>
 
     <div id="out" style="min-height: 1000px"></div>
@@ -62,6 +69,15 @@ <h1 id="h2">Bottom</h1>
           console.log('DONE');
         }, 400);
       });
+
+      // Do nothing on these elements
+      document
+        .querySelectorAll('#link,#linkExternal,#linkDownload,#inputButton,#inputSubmit,#inputText')
+        .forEach(link => {
+          link.addEventListener('click', e => {
+            e.preventDefault();
+          });
+        });
     </script>
   </body>
 </html>

packages/replay/src/coreHandlers/handleSlowClick.ts

@@ -114,8 +114,10 @@ function handleSlowClick(
   addBreadcrumbEvent(replay, breadcrumb);
 }
 
+const SLOW_CLICK_POSSIBLE_TAGS = ['BUTTON', 'A', 'INPUT'];
+
 function ignoreElement(node: HTMLElement, config: SlowClickConfig): boolean {
-  if (node.tagName !== 'BUTTON' && node.tagName !== 'A') {
+  if (!SLOW_CLICK_POSSIBLE_TAGS.includes(node.tagName)) {
     return true;
   }
 
@@ -129,6 +131,11 @@ function ignoreElement(node: HTMLElement, config: SlowClickConfig): boolean {
     return true;
   }
 
+  // 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 (config.ignoreSelector && node.matches(config.ignoreSelector)) {
     return true;
   }