From faac5795dab8fc72bfbbc5dcea29db5fb194aa94 Mon Sep 17 00:00:00 2001 From: ShiKhu Date: Thu, 22 Jul 2021 12:53:34 +0800 Subject: [PATCH] feat (tracker): 3.2.0 - click selectors --- .../app/player/MessageDistributor/messages.ts | 34 ++--------------- tracker/tracker/package-lock.json | 5 +++ tracker/tracker/package.json | 3 +- tracker/tracker/src/main/app/index.ts | 2 +- tracker/tracker/src/main/modules/mouse.ts | 6 +++ tracker/tracker/src/messages/index.ts | 38 ++++++++++--------- 6 files changed, 38 insertions(+), 50 deletions(-) diff --git a/frontend/app/player/MessageDistributor/messages.ts b/frontend/app/player/MessageDistributor/messages.ts index 286ec024e..92c7e60fb 100644 --- a/frontend/app/player/MessageDistributor/messages.ts +++ b/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 { - tp: "fetch_depricated", +export interface Fetch { + 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 | FetchDepricated | Profiler | OTable | Redux | Vuex | MobX | NgRx | GraphQl | PerformanceTrack | ConnectionInformation | SetPageVisibility | LongTask | Fetch; +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 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()); diff --git a/tracker/tracker/package-lock.json b/tracker/tracker/package-lock.json index e478e35c6..4af49d03f 100644 --- a/tracker/tracker/package-lock.json +++ b/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", diff --git a/tracker/tracker/package.json b/tracker/tracker/package.json index 3692baa66..822107f58 100644 --- a/tracker/tracker/package.json +++ b/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": { diff --git a/tracker/tracker/src/main/app/index.ts b/tracker/tracker/src/main/app/index.ts index 8fc79a7ac..f7aef2fce 100644 --- a/tracker/tracker/src/main/app/index.ts +++ b/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."); diff --git a/tracker/tracker/src/main/modules/mouse.ts b/tracker/tracker/src/main/modules/mouse.ts index 969cd7401..73e3672b9 100644 --- a/tracker/tracker/src/main/modules/mouse.ts +++ b/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, ); diff --git a/tracker/tracker/src/messages/index.ts b/tracker/tracker/src/messages/index.ts index 30e4e8127..487868202 100644 --- a/tracker/tracker/src/messages/index.ts +++ b/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); + +