From 126de51eb5d9a3a81b494e2703e4744ab29ae61b Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 16 Jan 2023 14:42:22 +0100 Subject: [PATCH] change(tracker): change input node checks --- tracker/tracker/package.json | 2 +- tracker/tracker/src/main/app/guards.ts | 24 ++++++++-------- .../tracker/src/main/app/observer/observer.ts | 8 +++--- .../src/main/app/observer/top_observer.ts | 2 +- tracker/tracker/src/main/modules/cssrules.ts | 2 +- tracker/tracker/src/main/modules/focus.ts | 4 +-- tracker/tracker/src/main/modules/img.ts | 2 +- tracker/tracker/src/main/modules/input.ts | 28 +++++++------------ tracker/tracker/src/main/modules/mouse.ts | 2 +- tracker/tracker/src/main/modules/timing.ts | 2 +- tracker/tracker/src/webworker/QueueSender.ts | 5 ++-- tracker/tracker/src/webworker/index.ts | 3 +- 12 files changed, 39 insertions(+), 45 deletions(-) diff --git a/tracker/tracker/package.json b/tracker/tracker/package.json index 5c560150c..ff84fa655 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": "4.1.9", + "version": "4.1.9-beta.2", "keywords": [ "logging", "replay" diff --git a/tracker/tracker/src/main/app/guards.ts b/tracker/tracker/src/main/app/guards.ts index 56366a2cf..c58d03a74 100644 --- a/tracker/tracker/src/main/app/guards.ts +++ b/tracker/tracker/src/main/app/guards.ts @@ -24,21 +24,21 @@ export function isRootNode(node: Node): node is Document | DocumentFragment { } type TagTypeMap = { - HTML: HTMLHtmlElement - BODY: HTMLBodyElement - IMG: HTMLImageElement - INPUT: HTMLInputElement - TEXTAREA: HTMLTextAreaElement - SELECT: HTMLSelectElement - LABEL: HTMLLabelElement - IFRAME: HTMLIFrameElement - STYLE: HTMLStyleElement - style: SVGStyleElement - LINK: HTMLLinkElement + html: HTMLHtmlElement + body: HTMLBodyElement + img: HTMLImageElement + input: HTMLInputElement + textarea: HTMLTextAreaElement + select: HTMLSelectElement + label: HTMLLabelElement + iframe: HTMLIFrameElement + style: HTMLStyleElement | SVGStyleElement + link: HTMLLinkElement } export function hasTag( el: Node, tagName: T, ): el is TagTypeMap[typeof tagName] { - return el.nodeName === tagName + // @ts-ignore + return el.localName === tagName } diff --git a/tracker/tracker/src/main/app/observer/observer.ts b/tracker/tracker/src/main/app/observer/observer.ts index dec086509..98abcb994 100644 --- a/tracker/tracker/src/main/app/observer/observer.ts +++ b/tracker/tracker/src/main/app/observer/observer.ts @@ -144,7 +144,7 @@ export default abstract class Observer { } if ( name === 'value' && - hasTag(node, 'INPUT') && + hasTag(node, 'input') && node.type !== 'button' && node.type !== 'reset' && node.type !== 'submit' @@ -155,7 +155,7 @@ export default abstract class Observer { this.app.send(RemoveNodeAttribute(id, name)) return } - if (name === 'style' || (name === 'href' && hasTag(node, 'LINK'))) { + if (name === 'style' || (name === 'href' && hasTag(node, 'link'))) { this.app.send(SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref())) return } @@ -166,7 +166,7 @@ export default abstract class Observer { } private sendNodeData(id: number, parentElement: Element, data: string): void { - if (hasTag(parentElement, 'STYLE') || hasTag(parentElement, 'style')) { + if (hasTag(parentElement, 'style')) { this.app.send(SetCSSDataURLBased(id, data, this.app.getBaseHref())) return } @@ -242,7 +242,7 @@ export default abstract class Observer { // Disable parent check for the upper context HTMLHtmlElement, because it is root there... (before) // TODO: get rid of "special" cases (there is an issue with CreateDocument altered behaviour though) // TODO: Clean the logic (though now it workd fine) - if (!hasTag(node, 'HTML') || !this.isTopContext) { + if (!hasTag(node, 'html') || !this.isTopContext) { if (parent === null) { // Sometimes one observation contains attribute mutations for the removimg node, which gets ignored here. // That shouldn't affect the visual rendering ( should it? maybe when transition applied? ) diff --git a/tracker/tracker/src/main/app/observer/top_observer.ts b/tracker/tracker/src/main/app/observer/top_observer.ts index be1a1ce33..38944c5c9 100644 --- a/tracker/tracker/src/main/app/observer/top_observer.ts +++ b/tracker/tracker/src/main/app/observer/top_observer.ts @@ -34,7 +34,7 @@ export default class TopObserver extends Observer { // IFrames this.app.nodes.attachNodeCallback((node) => { if ( - hasTag(node, 'IFRAME') && + hasTag(node, 'iframe') && ((this.options.captureIFrames && !hasOpenreplayAttribute(node, 'obscured')) || hasOpenreplayAttribute(node, 'capture')) ) { diff --git a/tracker/tracker/src/main/modules/cssrules.ts b/tracker/tracker/src/main/modules/cssrules.ts index 08db23af8..8636c68c0 100644 --- a/tracker/tracker/src/main/modules/cssrules.ts +++ b/tracker/tracker/src/main/modules/cssrules.ts @@ -87,7 +87,7 @@ export default function (app: App | null) { app.observer.attachContextCallback(patchContext) app.nodes.attachNodeCallback((node: Node): void => { - if (!(hasTag(node, 'STYLE') || hasTag(node, 'style')) || !node.sheet) { + if (!hasTag(node, 'style') || !node.sheet) { return } if (node.textContent !== null && node.textContent.trim().length > 0) { diff --git a/tracker/tracker/src/main/modules/focus.ts b/tracker/tracker/src/main/modules/focus.ts index d9db865db..3c95fd774 100644 --- a/tracker/tracker/src/main/modules/focus.ts +++ b/tracker/tracker/src/main/modules/focus.ts @@ -12,7 +12,7 @@ export default function (app: App): void { let blurred = false app.nodes.attachNodeCallback((node) => { - if (!hasTag(node, 'BODY')) { + if (!hasTag(node, 'body')) { return } app.nodes.attachNodeListener(node, 'focus', (e: FocusEvent): void => { @@ -35,7 +35,7 @@ export default function (app: App): void { }) app.attachStartCallback(() => { let elem = document.activeElement - while (elem && hasTag(elem, 'IFRAME') && elem.contentDocument) { + while (elem && hasTag(elem, 'iframe') && elem.contentDocument) { elem = elem.contentDocument.activeElement } if (elem && elem !== elem.ownerDocument.body) { diff --git a/tracker/tracker/src/main/modules/img.ts b/tracker/tracker/src/main/modules/img.ts index c6dedc6e0..1538fc3ff 100644 --- a/tracker/tracker/src/main/modules/img.ts +++ b/tracker/tracker/src/main/modules/img.ts @@ -104,7 +104,7 @@ export default function (app: App): void { }) app.nodes.attachNodeCallback((node: Node): void => { - if (!hasTag(node, 'IMG')) { + if (!hasTag(node, 'img')) { return } app.nodes.attachNodeListener(node, 'error', () => sendImgError(node)) diff --git a/tracker/tracker/src/main/modules/input.ts b/tracker/tracker/src/main/modules/input.ts index 2eeb3a2b3..15acecaa9 100644 --- a/tracker/tracker/src/main/modules/input.ts +++ b/tracker/tracker/src/main/modules/input.ts @@ -8,10 +8,10 @@ const INPUT_TYPES = ['text', 'password', 'email', 'search', 'number', 'range', ' // TODO: take into consideration "contenteditable" attribute type TextEditableElement = HTMLInputElement | HTMLTextAreaElement function isTextEditable(node: any): node is TextEditableElement { - if (hasTag(node, 'TEXTAREA')) { + if (hasTag(node, 'textarea')) { return true } - if (!hasTag(node, 'INPUT')) { + if (!hasTag(node, 'input')) { return false } @@ -19,7 +19,7 @@ function isTextEditable(node: any): node is TextEditableElement { } function isCheckable(node: any): node is HTMLInputElement { - if (!hasTag(node, 'INPUT')) { + if (!hasTag(node, 'input')) { return false } const type = node.type @@ -31,7 +31,7 @@ const labelElementFor: (element: TextEditableElement) => HTMLLabelElement | unde ? (node) => { let p: Node | null = node while ((p = p.parentNode) !== null) { - if (hasTag(p, 'LABEL')) { + if (hasTag(p, 'label')) { return p } } @@ -43,7 +43,7 @@ const labelElementFor: (element: TextEditableElement) => HTMLLabelElement | unde : (node) => { let p: Node | null = node while ((p = p.parentNode) !== null) { - if (hasTag(p, 'LABEL')) { + if (hasTag(p, 'label')) { return p } } @@ -142,12 +142,8 @@ export default function (app: App, opts: Partial): void { app.ticker.attach((): void => { inputValues.forEach((value, id) => { - const node = app.nodes.getNode(id) - if (!node) return - if (!isTextEditable(node)) { - inputValues.delete(id) - return - } + const node = app.nodes.getNode(id) as HTMLInputElement + if (!node) return inputValues.delete(id) if (value !== node.value) { inputValues.set(id, node.value) if (!registeredTargets.has(id)) { @@ -158,12 +154,8 @@ export default function (app: App, opts: Partial): void { } }) checkableValues.forEach((checked, id) => { - const node = app.nodes.getNode(id) - if (!node) return - if (!isCheckable(node)) { - checkableValues.delete(id) - return - } + const node = app.nodes.getNode(id) as HTMLInputElement + if (!node) return checkableValues.delete(id) if (checked !== node.checked) { checkableValues.set(id, node.checked) app.send(SetInputChecked(id, node.checked)) @@ -179,7 +171,7 @@ export default function (app: App, opts: Partial): void { return } // TODO: support multiple select (?): use selectedOptions; Need send target? - if (hasTag(node, 'SELECT')) { + if (hasTag(node, 'select')) { sendInputValue(id, node) app.attachEventListener(node, 'change', () => { sendInputValue(id, node) diff --git a/tracker/tracker/src/main/modules/mouse.ts b/tracker/tracker/src/main/modules/mouse.ts index 15c5e786c..b00d6d304 100644 --- a/tracker/tracker/src/main/modules/mouse.ts +++ b/tracker/tracker/src/main/modules/mouse.ts @@ -86,7 +86,7 @@ export default function (app: App): void { if (dl !== null) { return dl } - if (hasTag(target, 'INPUT')) { + if (hasTag(target, 'input')) { return getInputLabel(target) } if (isClickable(target)) { diff --git a/tracker/tracker/src/main/modules/timing.ts b/tracker/tracker/src/main/modules/timing.ts index 89f26ee7c..54c094126 100644 --- a/tracker/tracker/src/main/modules/timing.ts +++ b/tracker/tracker/src/main/modules/timing.ts @@ -21,7 +21,7 @@ function getPaintBlocks(resources: ResourcesTimeMap): Array { for (let i = 0; i < elements.length; i++) { const element = elements[i] let src = '' - if (hasTag(element, 'IMG')) { + if (hasTag(element, 'img')) { src = element.currentSrc || element.src } if (!src) { diff --git a/tracker/tracker/src/webworker/QueueSender.ts b/tracker/tracker/src/webworker/QueueSender.ts index 2a2863192..d37d7c313 100644 --- a/tracker/tracker/src/webworker/QueueSender.ts +++ b/tracker/tracker/src/webworker/QueueSender.ts @@ -57,6 +57,7 @@ export default class QueueSender { private sendBatch(batch: Uint8Array): void { this.busy = true + // @ts-ignore fetch(this.ingestURL, { body: batch, method: 'POST', @@ -66,7 +67,7 @@ export default class QueueSender { }, keepalive: batch.length < KEEPALIVE_SIZE_LIMIT, }) - .then((r) => { + .then((r: Record) => { if (r.status === 401) { // TODO: continuous session ? this.busy = false @@ -81,7 +82,7 @@ export default class QueueSender { this.attemptsCount = 0 this.sendNext() }) - .catch((e) => { + .catch((e: any) => { console.warn('OpenReplay:', e) this.retry(batch) }) diff --git a/tracker/tracker/src/webworker/index.ts b/tracker/tracker/src/webworker/index.ts index 2c6253210..0f27167c0 100644 --- a/tracker/tracker/src/webworker/index.ts +++ b/tracker/tracker/src/webworker/index.ts @@ -69,7 +69,8 @@ function initiateFailure(reason: string): void { let sendIntervalID: ReturnType | null = null let restartTimeoutID: ReturnType -self.onmessage = ({ data }: MessageEvent): any => { +// @ts-ignore +self.onmessage = ({ data }: any): any => { if (data == null) { finalize() return