Record the href target on anchor (and area) elements as a first step in distinguishing navigational clicks from other clicks. Part of #503

eoghanmurray · eoghanmurray · commit 9ef6c136b053 · 2021-08-09T13:09:39.000+01:00
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\\"
     }
   }
 ]"
diff --git a/packages/rrweb/test/html/link.html b/packages/rrweb/test/html/link.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+	<title>Link click</title>
+  </head>
+  <body>
+	  <span id="not-a-link">not link</span>
+	  <a href="#clicked">link</a>
+  </body>
+</html>

Original file line number	Diff line number	Diff line change
@@ -2992,6 +2992,7 @@ exports[`link 1`] = `
`2992`	`2992`	`\\"source\\": 2,`
`2993`	`2993`	`\\"type\\": 2,`
`2994`	`2994`	`\\"id\\": 21,`
	`2995`	`+ \\"href\\": \\"about:blank#clicked\\"`
`2995`	`2996`	`}`
`2996`	`2997`	`}`
`2997`	`2998`	`]"`