Record the href target on anchor (and area) elements as a first ste…

…p in distinguishing navigational clicks from other clicks. Part of #503
rrweb-io · Aug 9, 2021 · 08bf3ff · 08bf3ff
1 parent 44111c1
commit 08bf3ff
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
@@ -23,6 +23,8 @@ import {
   mousemoveCallBack,
   mousePosition,
   mouseInteractionCallBack,
+  mouseInteractionParam,
+  clickParam,
   MouseInteractions,
   listenerHandler,
   scrollCallback,
@@ -286,12 +288,30 @@ function initMouseInteractionObserver(
       }
       const id = mirror.getId(target as INode);
       const { clientX, clientY } = e;
-      cb({
+      let emissionEvent: mouseInteractionParam | clickParam = {
         type: MouseInteractions[eventKey],
         id,
         x: clientX,
         y: clientY,
-      });
+      }
+      const htarget = (target as Element);
+      if (MouseInteractions[eventKey] === MouseInteractions.Click) {
+        let href: string | null = null;
+        if (htarget.tagName.toLowerCase() === 'a' &&
+            (htarget as HTMLAnchorElement).href) {
+          href = (htarget as HTMLAnchorElement).href;
+        } else if (htarget.tagName.toLowerCase() === 'area' &&
+                   (htarget as HTMLAreaElement).href) {
+          href = (htarget as HTMLAreaElement).href;
+        }
+        if (href !== null) {
+          emissionEvent = {
+            ...emissionEvent,
+            href: href,
+          };
+        }
+      }
+      cb(emissionEvent);
     };
   };
   Object.keys(MouseInteractions)

diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
@@ -365,14 +365,18 @@ export enum MouseInteractions {
   TouchEnd,
 }
 
-type mouseInteractionParam = {
+export type mouseInteractionParam = {
   type: MouseInteractions;
   id: number;
   x: number;
   y: number;
 };
 
-export type mouseInteractionCallBack = (d: mouseInteractionParam) => void;
+export type clickParam = mouseInteractionParam & {
+  href?: string;
+};
+
+export type mouseInteractionCallBack = (d: mouseInteractionParam | clickParam) => void;
 
 export type scrollPosition = {
   id: number;

diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -2992,6 +2992,7 @@ exports[`link 1`] = `
       \\"source\\": 2,
       \\"type\\": 2,
       \\"id\\": 21,
+      \\"href\\": \\"about:blank#clicked\\"
     }
   }
 ]"