fix(rrweb): clean up pointer tap circles when seeking by breadcrumb

packages/rrweb/src/replay/index.ts

@@ -936,7 +936,7 @@
         sn?.type === NodeType.Element &&
         sn?.tagName.toUpperCase() === 'HTML'
       ) {
         const { documentElement, head } = iframeEl.contentDocument!;
         this.insertStyleRules(
           documentElement as HTMLElement | RRElement,
           head as HTMLElement | RRElement,
@@ -955,14 +955,14 @@
     };
 
     buildNodeWithSN(mutation.node, {
       doc: iframeEl.contentDocument! as Document,
       mirror: mirror as Mirror,
       hackCss: true,
       skipChild: false,
       afterAppend,
       cache: this.cache,
     });
     afterAppend(iframeEl.contentDocument! as Document, mutation.node.id);
 
     for (const { mutationInQueue, builtNode } of collected) {
       this.attachDocumentToIframe(mutationInQueue, builtNode);
@@ -1049,7 +1049,7 @@
    * pause when there are some canvas drawImage args need to be loaded
    */
   private async preloadAllImages(): Promise<void[]> {
     let beforeLoadState = this.service.state;
     const stateHandler = () => {
       beforeLoadState = this.service.state;
     };
@@ -1084,8 +1084,8 @@
       const ctx = canvas.getContext('2d');
       const imgd = ctx?.createImageData(canvas.width, canvas.height);
       let d = imgd?.data;
       d = JSON.parse(data.args[0]) as Uint8ClampedArray;
       ctx?.putImageData(imgd!, 0, 0);
     }
   }
   private async deserializeAndPreloadCanvasEvents(
@@ -1219,6 +1219,20 @@
             if (isSync) {
               if (d.type === MouseInteractions.TouchStart) {
                 pointer.touchActive = true;
+
+                // prevents multiple touch circles from staying on the screen
+                // when the user seeks by breadcrumbs
+                Object.values(this.pointers).forEach((p) => {
+                  // don't set p.touchActive to false if p.touchActive is already true
+                  // so that multitouch still works.
+                  // p.touchActive can be null (in which case
+                  // we still want to set it as false) - it's set as null
+                  // in the ReplayerEvents.Flush handler after
+                  // the 'touch-active' class is added or removed.
+                  if (p !== pointer && !p.touchActive) {
+                    p.touchActive = false;
+                  }
+                });
               } else if (d.type === MouseInteractions.TouchEnd) {
                 pointer.touchActive = false;
                 pointer.pointerEl.remove();
@@ -1446,7 +1460,7 @@
     // Only apply virtual dom optimization if the fast-forward process has node mutation. Because the cost of creating a virtual dom tree and executing the diff algorithm is usually higher than directly applying other kind of events.
     if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
       this.usingVirtualDom = true;
       buildFromDom(this.iframe.contentDocument!, this.mirror, this.virtualDom);
       // If these legacy missing nodes haven't been resolved, they should be converted to virtual nodes.
       if (Object.keys(this.legacy_missingNodeRetryMap).length) {
         for (const key in this.legacy_missingNodeRetryMap) {
@@ -1563,7 +1577,7 @@
         // If the parent is attached a shadow dom after it's created, it won't have a shadow root.
         if (!hasShadowRoot(parent)) {
           (parent as Element | RRElement).attachShadow({ mode: 'open' });
           parent = (parent as Element | RRElement).shadowRoot! as Node | RRNode;
         } else parent = parent.shadowRoot as Node | RRNode;
       }
 

packages/rrweb/test/events/is-sync-tap.ts

@@ -0,0 +1,181 @@
+import {
+  EventType,
+  IncrementalSource,
+  MouseInteractions,
+} from '@sentry-internal/rrweb-types';
+import type { eventWithTime } from '../../../types/src';
+
+const events: eventWithTime[] = [
+  {
+    type: 4,
+    data: {
+      href: '',
+      width: 1600,
+      height: 900,
+    },
+    timestamp: 0,
+  },
+  {
+    type: 2,
+    data: {
+      node: {
+        type: 0,
+        childNodes: [
+          { type: 1, name: 'html', publicId: '', systemId: '', id: 2 },
+          {
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 101,
+                    type: 2,
+                    tagName: 'style',
+                    attributes: {},
+                    childNodes: [
+                      {
+                        id: 102,
+                        type: 3,
+                        isStyle: true,
+                        textContent: 'div:hover { background-color: gold; }',
+                      },
+                    ],
+                  },
+                ],
+                id: 4,
+              },
+              { type: 3, textContent: '\n  ', id: 13 },
+              {
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 15 },
+                  {
+                    type: 2,
+                    tagName: 'div',
+                    attributes: {
+                      style:
+                        'border: 1px solid #000000; width: 100px; height: 100px;',
+                    },
+                    childNodes: [{ type: 3, textContent: '\n    ', id: 17 }],
+                    id: 16,
+                  },
+                ],
+                id: 14,
+              },
+            ],
+            id: 3,
+          },
+        ],
+        id: 1,
+      },
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: 10,
+  },
+  {
+    type: 3,
+    data: {
+      source: IncrementalSource.MouseInteraction,
+      type: MouseInteractions.TouchStart,
+      id: 16,
+      x: 30,
+      y: 30,
+      pointerId: 0,
+    },
+    timestamp: 100,
+  },
+  {
+    type: 3,
+    data: {
+      source: IncrementalSource.TouchMove,
+      positions: [
+        {
+          id: 0,
+          x: 149.436,
+          y: 433.929,
+          timeOffset: 30,
+        },
+        {
+          id: 1,
+          x: 243.436,
+          y: 155.929,
+          timeOffset: 0,
+        },
+      ],
+      pointerId: 0,
+    },
+    timestamp: 150,
+  },
+  {
+    type: 3,
+    data: {
+      source: IncrementalSource.MouseInteraction,
+      type: MouseInteractions.TouchEnd,
+      id: 16,
+      x: 30,
+      y: 30,
+      pointerId: 0,
+    },
+    timestamp: 155,
+  },
+  {
+    type: 3,
+    data: {
+      source: IncrementalSource.MouseInteraction,
+      type: MouseInteractions.TouchStart,
+      id: 16,
+      x: 30,
+      y: 30,
+      pointerId: 1,
+    },
+    timestamp: 160,
+  },
+  {
+    type: 3,
+    data: {
+      source: IncrementalSource.TouchMove,
+      positions: [
+        {
+          id: 0,
+          x: 149.436,
+          y: 433.929,
+          timeOffset: 30,
+        },
+        {
+          id: 1,
+          x: 243.436,
+          y: 155.929,
+          timeOffset: 0,
+        },
+      ],
+      pointerId: 1,
+    },
+    timestamp: 170,
+  },
+  {
+    type: 3,
+    data: {
+      source: IncrementalSource.MouseInteraction,
+      type: MouseInteractions.TouchEnd,
+      id: 16,
+      x: 30,
+      y: 30,
+      pointerId: 1,
+    },
+    timestamp: 180,
+  },
+  {
+    type: EventType.IncrementalSnapshot,
+    data: { source: IncrementalSource.Scroll, id: 1, x: 0, y: 250 },
+    timestamp: 220,
+  },
+];
+
+export default events;

packages/rrweb/test/replayer.test.ts

@@ -15,6 +15,7 @@ import touchAllPointerEvents from './events/touch-all-pointer-id';
 import touchSomePointerEvents from './events/touch-some-pointer-id';
 import mouseEvents from './events/mouse';
 import scrollEvents from './events/scroll';
+import isSyncTapEvents from './events/is-sync-tap';
 import scrollWithParentStylesEvents from './events/scroll-with-parent-styles';
 import inputEvents from './events/input';
 import iframeEvents from './events/iframe';
@@ -881,7 +882,7 @@ describe('replayer', function () {
     `);
 
     // No pointer should exist yet
-    await expect(
+    expect(
       await page.evaluate(
         () => document.querySelectorAll('.replayer-mouse')!.length,
       ),
@@ -892,7 +893,7 @@ describe('replayer', function () {
     `);
 
     // One mouse pointer should exist
-    await expect(
+    expect(
       await page.evaluate(
         () => document.querySelectorAll('.replayer-mouse')!.length,
       ),
@@ -903,13 +904,45 @@ describe('replayer', function () {
     `);
 
     // Pointer should still exist after all events execute
-    await expect(
+    expect(
       await page.evaluate(
         () => document.querySelectorAll('.replayer-mouse')!.length,
       ),
     ).toEqual(1);
   });
 
+  it('removes tap circles from the screen when isSync = true', async () => {
+    await page.evaluate(`events = ${JSON.stringify(isSyncTapEvents)}`);
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+    `);
+
+    // No pointer should exist yet
+    expect(
+      await page.evaluate(
+        () => document.querySelectorAll('.replayer-mouse')!.length,
+      ),
+    ).toEqual(0);
+
+    // Seek to second tap
+    await page.evaluate(`
+      replayer.pause(161);
+    `);
+
+    // Seek to first tap
+    await page.evaluate(`
+      replayer.pause(101);
+    `);
+
+    // Only one tap should exist, not both
+    expect(
+      await page.evaluate(
+        () => document.querySelectorAll('.touch-active')!.length,
+      ),
+    ).toEqual(1);
+  });
+
   it('should destroy the replayer after calling destroy()', async () => {
     await page.evaluate(`events = ${JSON.stringify(events)}`);
     await page.evaluate(`