DragEvent handling, null check fixes (#630)

packages/rrweb/src/record/mutation.ts

@@ -271,7 +271,10 @@ export default class MutationBuffer {
       const shadowHost: Element | null = n.getRootNode
         ? (n.getRootNode() as ShadowRoot)?.host
         : null;
-      const notInDoc = !this.doc.contains(n) && !this.doc.contains(shadowHost);
+      // ensure shadowHost is a Node, or doc.contains will throw an error
+      const notInDoc =
+        !this.doc.contains(n) &&
+        (!(shadowHost instanceof Node) || !this.doc.contains(shadowHost));
       if (!n.parentNode || notInDoc) {
         return;
       }
@@ -359,6 +362,8 @@ export default class MutationBuffer {
       if (!node) {
         for (let index = addList.length - 1; index >= 0; index--) {
           const _node = addList.get(index)!;
+          // ensure _node is defined before attempting to find value
+          if (_node) {
             const parentId = this.mirror.getId(
               (_node.value.parentNode as Node) as INode,
             );
@@ -369,6 +374,7 @@ export default class MutationBuffer {
             }
           }
         }
+      }
       if (!node) {
         /**
          * If all nodes in queue could not find a serialized parent,

packages/rrweb/src/record/observer.ts

@@ -194,8 +194,9 @@ function initMoveObserver(
     },
     callbackThreshold,
   );
-  const updatePosition = throttle<MouseEvent | TouchEvent | DragEvent>(
+
-    (evt) => {
+  // update position for mouse, touch, and drag events (drag event extends mouse event)
+  function handleUpdatePositionEvent(evt: MouseEvent | TouchEvent) {
     const target = getEventTarget(evt);
     const { clientX, clientY } = isTouchEvent(evt)
       ? evt.changedTouches[0]
@@ -209,6 +210,27 @@ function initMoveObserver(
       id: mirror.getId(target as INode),
       timeOffset: Date.now() - timeBaseline,
     });
+  }
+
+  // separate call for non-drag events, in case DragEvent is not defined
+  const updatePosition = throttle<MouseEvent | TouchEvent>(
+    (evt) => {
+      handleUpdatePositionEvent(evt);
+      wrappedCb(
+        evt instanceof MouseEvent
+          ? IncrementalSource.MouseMove
+          : IncrementalSource.TouchMove,
+      );
+    },
+    threshold,
+    {
+      trailing: false,
+    },
+  );
+  // call for drag events, when DragEvent is defined
+  const updateDragPosition = throttle<MouseEvent | TouchEvent | DragEvent>(
+    (evt) => {
+      handleUpdatePositionEvent(evt);
       wrappedCb(
         evt instanceof DragEvent
           ? IncrementalSource.Drag
@@ -222,10 +244,13 @@ function initMoveObserver(
       trailing: false,
     },
   );
+  // it is possible DragEvent is undefined even on devices
+  // that support event 'drag'
+  const dragEventDefined = typeof DragEvent !== 'undefined';
   const handlers = [
     on('mousemove', updatePosition, doc),
     on('touchmove', updatePosition, doc),
-    on('drag', updatePosition, doc),
+    on('drag', dragEventDefined ? updateDragPosition : updatePosition, doc),
   ];
   return () => {
     handlers.forEach((h) => h());