feat (tracker): 3.2.0 - click selectors

frontend/app/player/MessageDistributor/messages.ts

@@ -24,7 +24,7 @@ export const ID_TP_MAP = {
   22: "console_log",
   37: "css_insert_rule",
   38: "css_delete_rule",
-  39: "fetch_depricated",
+  39: "fetch",
   40: "profiler",
   41: "o_table",
   44: "redux",
@@ -36,7 +36,6 @@ export const ID_TP_MAP = {
   54: "connection_information",
   55: "set_page_visibility",
   59: "long_task",
-  68: "fetch",
 } as const;
 
 
@@ -167,8 +166,8 @@ export interface CssDeleteRule {
   index: number,
 }
 
-export interface FetchDepricated {
+export interface Fetch {
-  tp: "fetch_depricated",
+  tp: "fetch",
   method: string,
   url: string,
   request: string,
@@ -256,20 +255,8 @@ export interface LongTask {
   containerName: string,
 }
 
-export interface Fetch {
-  tp: "fetch",
-  method: string,
-  url: string,
-  request: string,
-  response: string,
-  status: number,
-  timestamp: number,
-  duration: number,
-  headers: string,
-}
 
-
+export type Message = Timestamp | SetPageLocation | SetViewportSize | SetViewportScroll | CreateDocument | CreateElementNode | CreateTextNode | MoveNode | RemoveNode | SetNodeAttribute | RemoveNodeAttribute | SetNodeData | SetCssData | SetNodeScroll | SetInputValue | SetInputChecked | MouseMove | ConsoleLog | CssInsertRule | CssDeleteRule | Fetch | Profiler | OTable | Redux | Vuex | MobX | NgRx | GraphQl | PerformanceTrack | ConnectionInformation | SetPageVisibility | LongTask;
-export type Message = Timestamp | SetPageLocation | SetViewportSize | SetViewportScroll | CreateDocument | CreateElementNode | CreateTextNode | MoveNode | RemoveNode | SetNodeAttribute | RemoveNodeAttribute | SetNodeData | SetCssData | SetNodeScroll | SetInputValue | SetInputChecked | MouseMove | ConsoleLog | CssInsertRule | CssDeleteRule | FetchDepricated | Profiler | OTable | Redux | Vuex | MobX | NgRx | GraphQl | PerformanceTrack | ConnectionInformation | SetPageVisibility | LongTask | Fetch;
 
 export default function (r: PrimitiveReader): Message | null {
   switch (r.readUint()) {
@@ -522,19 +509,6 @@ export default function (r: PrimitiveReader): Message | null {
       containerName: r.readString(),      
     };
   
-  case 68:
-    return {
-      tp: ID_TP_MAP[68], 
-      method: r.readString(),
-      url: r.readString(),
-      request: r.readString(),
-      response: r.readString(),
-      status: r.readUint(),
-      timestamp: r.readUint(),
-      duration: r.readUint(),
-      headers: r.readString(),      
-    };
-  
   default:
     r.readUint(); // IOS skip timestamp  
     r.skip(r.readUint()); 

tracker/tracker/package-lock.json

@@ -293,6 +293,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@medv/finder": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@medv/finder/-/finder-2.0.0.tgz",
+      "integrity": "sha512-gV4jOsGpiWNDGd8Dw7tod1Fc9Gc7StaOT4oZ/6srHRWtsHU+HYWzmkYsa3Qy/z0e9tY1WpJ9wWdBFGskfbzoug=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",

tracker/tracker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "keywords": [
     "logging",
     "replay"
@@ -41,6 +41,7 @@
     "typescript": "^4.3.4"
   },
   "dependencies": {
+    "@medv/finder": "^2.0.0",
     "error-stack-parser": "^2.0.6"
   },
   "engines": {

tracker/tracker/src/main/app/index.ts

@@ -248,8 +248,8 @@ export default class App {
           throw new Error("Stranger things: no worker found after start request");
         }
         this.worker.postMessage({ token });
-        this.observer.observe();
         this.startCallbacks.forEach((cb) => cb());
+        this.observer.observe();
         this.ticker.start();
 
         log("OpenReplay tracking started.");

tracker/tracker/src/main/modules/mouse.ts

@@ -1,8 +1,13 @@
+import { finder } from '@medv/finder';
 import { normSpaces, hasOpenreplayAttribute, getLabelAttribute } from '../utils';
 import App from '../app';
 import { MouseMove, MouseClick } from '../../messages';
 import { getInputLabel } from './input';
 
+const selectorMap: {[id:number]: string} = {};
+function getSelector(id: number, target: Element): string {
+  return selectorMap[id] = selectorMap[id] || finder(target);
+}
 
 function getTarget(target: EventTarget | null): Element | null {
   if (target instanceof Element) {
@@ -128,6 +133,7 @@ export default function (app: App): void {
             ? Math.round(performance.now() - mouseTargetTime)
             : 0,
           getTargetLabel(target),
+          getSelector(id, target),
         ),
         true,
       );

tracker/tracker/src/messages/index.ts

@@ -317,24 +317,6 @@ export const MouseMove = bindNew(_MouseMove);
 classes.set(20, MouseMove);
 
 
-class _MouseClick implements Message {
-  readonly _id: number = 21;
-  constructor(
-    public id: number,
-    public hesitationTime: number,
-    public label: string
-  ) {}
-  encode(writer: Writer): boolean {
-    return writer.uint(21) &&
-      writer.uint(this.id) &&
-      writer.uint(this.hesitationTime) &&
-      writer.string(this.label); 
-  }
-}
-export const MouseClick = bindNew(_MouseClick);
-classes.set(21, MouseClick);
-
-
 class _ConsoleLog implements Message {
   readonly _id: number = 22;
   constructor(
@@ -883,3 +865,23 @@ export const CSSInsertRuleURLBased = bindNew(_CSSInsertRuleURLBased);
 classes.set(67, CSSInsertRuleURLBased);
 
 
+class _MouseClick implements Message {
+  readonly _id: number = 69;
+  constructor(
+    public id: number,
+    public hesitationTime: number,
+    public label: string,
+    public selector: string
+  ) {}
+  encode(writer: Writer): boolean {
+    return writer.uint(69) &&
+      writer.uint(this.id) &&
+      writer.uint(this.hesitationTime) &&
+      writer.string(this.label) &&
+      writer.string(this.selector); 
+  }
+}
+export const MouseClick = bindNew(_MouseClick);
+classes.set(69, MouseClick);
+
+