🐛 [RUM-3039] Fix missing pending mutations at view end

packages/core/src/tools/instrumentMethod.ts

@@ -1,4 +1,5 @@
-import { setTimeout } from './timer'
+import type { TimeoutId } from './timer'
+import { setTimeout, clearTimeout } from './timer'
 import { callMonitored } from './monitor'
 import { noop } from './utils/functionUtils'
 
@@ -125,11 +126,14 @@ export function instrumentSetter<TARGET extends { [key: string]: any }, PROPERTY
     return { stop: noop }
   }
 
+  const timeoutIds = new Set<TimeoutId>()
   let instrumentation = (target: TARGET, value: TARGET[PROPERTY]) => {
     // put hooked setter into event loop to avoid of set latency
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
+      timeoutIds.delete(timeoutId)
       after(target, value)
     }, 0)
+    timeoutIds.add(timeoutId)
   }
 
   const instrumentationWrapper = function (this: TARGET, value: TARGET[PROPERTY]) {
@@ -148,6 +152,10 @@ export function instrumentSetter<TARGET extends { [key: string]: any }, PROPERTY
       } else {
         instrumentation = noop
       }
+      if (timeoutIds) {
+        timeoutIds.forEach(clearTimeout)
+        timeoutIds.clear()
+      }
     },
   }
 }

packages/rum/src/domain/record/observers/moveObserver.ts

@@ -15,7 +15,7 @@ export type MousemoveCallBack = (
 ) => void
 
 export function initMoveObserver(configuration: RumConfiguration, cb: MousemoveCallBack): ListenerHandler {
-  const { throttled: updatePosition } = throttle(
+  const { throttled: updatePosition, cancel: cancelThrottle } = throttle(
     (event: MouseEvent | TouchEvent) => {
       const target = getEventTarget(event)
       if (hasSerializedNode(target)) {
@@ -39,10 +39,21 @@ export function initMoveObserver(configuration: RumConfiguration, cb: MousemoveC
     }
   )
 
-  return addEventListeners(configuration, document, [DOM_EVENT.MOUSE_MOVE, DOM_EVENT.TOUCH_MOVE], updatePosition, {
-    capture: true,
-    passive: true,
-  }).stop
+  const { stop: removeListener } = addEventListeners(
+    configuration,
+    document,
+    [DOM_EVENT.MOUSE_MOVE, DOM_EVENT.TOUCH_MOVE],
+    updatePosition,
+    {
+      capture: true,
+      passive: true,
+    }
+  )
+
+  return () => {
+    removeListener()
+    cancelThrottle()
+  }
 }
 
 export function tryToComputeCoordinates(event: MouseEvent | TouchEvent) {

packages/rum/src/domain/record/observers/scrollObserver.ts

@@ -19,7 +19,7 @@ export function initScrollObserver(
   defaultPrivacyLevel: DefaultPrivacyLevel,
   elementsScrollPositions: ElementsScrollPositions
 ): ListenerHandler {
-  const { throttled: updatePosition } = throttle((event: Event) => {
+  const { throttled: updatePosition, cancel: cancelThrottle } = throttle((event: Event) => {
     const target = getEventTarget(event) as HTMLElement | Document
     if (
       !target ||
@@ -46,6 +46,14 @@ export function initScrollObserver(
       y: scrollPositions.scrollTop,
     })
   }, SCROLL_OBSERVER_THRESHOLD)
-  return addEventListener(configuration, document, DOM_EVENT.SCROLL, updatePosition, { capture: true, passive: true })
-    .stop
+
+  const { stop: removeListener } = addEventListener(configuration, document, DOM_EVENT.SCROLL, updatePosition, {
+    capture: true,
+    passive: true,
+  })
+
+  return () => {
+    removeListener()
+    cancelThrottle()
+  }
 }

packages/rum/src/domain/record/observers/viewportResizeObserver.ts

@@ -35,7 +35,7 @@ export function initVisualViewportResizeObserver(
       trailing: false,
     }
   )
-  const removeListener = addEventListeners(
+  const { stop: removeListener } = addEventListeners(
     configuration,
     visualViewport,
     [DOM_EVENT.RESIZE, DOM_EVENT.SCROLL],
@@ -44,7 +44,7 @@ export function initVisualViewportResizeObserver(
       capture: true,
       passive: true,
     }
-  ).stop
+  )
 
   return function stop() {
     removeListener()