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

…p in distinguishing navigational clicks from other clicks. Part of rrweb-io#503
statcounter · Jul 26, 2022 · 3b03d60 · 3b03d60
1 parent 5e4d002
commit 3b03d60
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 6 deletions.
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
@@ -16,6 +16,8 @@ import {
   mousemoveCallBack,
   mousePosition,
   mouseInteractionCallBack,
+  mouseInteractionParam,
+  clickParam,
   MouseInteractions,
   listenerHandler,
   scrollCallback,
@@ -234,12 +236,30 @@ function initMouseInteractionObserver({
       }
       const id = mirror.getId(target);
       const { clientX, clientY } = e;
-      mouseInteractionCb({
+      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,
+          };
+        }
+      }
+      mouseInteractionCb(emissionEvent);
     };
   };
   Object.keys(MouseInteractions)

diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
@@ -468,14 +468,18 @@ export type CanvasArg =
   | null
   | CanvasArg[];
 
-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
@@ -1169,6 +1169,7 @@ exports[`record integration tests can record clicks 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>
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
@@ -316,13 +316,18 @@ export declare type SerializedCanvasArg = {
     index: number;
 };
 export declare type CanvasArg = SerializedCanvasArg | string | number | boolean | null | CanvasArg[];
-declare type mouseInteractionParam = {
+export declare type mouseInteractionParam = {
     type: MouseInteractions;
     id: number;
     x: number;
     y: number;
 };
-export declare type mouseInteractionCallBack = (d: mouseInteractionParam) => void;
+export declare type clickParam = mouseInteractionParam & {
+    href?: string;
+    targetId?: string;
+    targetText?: string;
+};
+export declare type mouseInteractionCallBack = (d: mouseInteractionParam | clickParam) => void;
 export declare type scrollPosition = {
     id: number;
     x: number;