diff --git a/frontend/app/components/Session_/Highlight/HighlightPanel.tsx b/frontend/app/components/Session_/Highlight/HighlightPanel.tsx index 5a02a02cf..11f0f3805 100644 --- a/frontend/app/components/Session_/Highlight/HighlightPanel.tsx +++ b/frontend/app/components/Session_/Highlight/HighlightPanel.tsx @@ -111,7 +111,7 @@ function HighlightPanel({ onClose }: { onClose: () => void }) { const onSave = async () => { try { notesStore.setSaving(true) - const playerContainer = document.querySelector('iframe')?.contentWindow?.document.body; + const playerContainer = document.querySelector('iframe')?.contentWindow?.document; let thumbnail; if (playerContainer) { thumbnail = await elementToImage(playerContainer); @@ -125,8 +125,8 @@ function HighlightPanel({ onClose }: { onClose: () => void }) { endAt: parseInt(uiPlayerStore.highlightSelection.endTs, 10), thumbnail, } - if (editNoteId) { - await notesStore.updateNote(editNoteId, note); + if (editNote) { + await notesStore.updateNote(editNote.noteId, note); toast.success('Highlight updated'); } else { const sessionId = sessionStore.current.sessionId; @@ -239,16 +239,21 @@ window.__debugElementToImage = (el) => elementToImage(el).then(img => { a.click(); }); -function elementToImage(el) { +function elementToImage(doc: Document) { + const el = doc.body; return import('html2canvas').then(({ default: html2canvas }) => { + const images = doc.querySelectorAll('img'); + images.forEach((img) => { + img.setAttribute('crossorigin', 'Anonymous'); + }) return html2canvas( el, { scale: 1, allowTaint: true, - useCORS: false, + foreignObjectRendering: true, + useCORS: true, logging: true, - foreignObjectRendering: false, height: 900, width: 1200, x: 0, @@ -263,4 +268,36 @@ function elementToImage(el) { }) } +const convertAllImagesToBase64 = (proxyURL, cloned) => { + const pendingImagesPromises = []; + const pendingPromisesData = []; + + const images = cloned.getElementsByTagName('img'); + + for (let i = 0; i < images.length; i += 1) { + const promise = new Promise((resolve, reject) => { + pendingPromisesData.push({ + index: i, resolve, reject, + }); + }); + pendingImagesPromises.push(promise); + } + + for (let i = 0; i < images.length; i += 1) { + fetch(`${proxyURL}?url=${images[i].src}`) + .then((response) => response.json()) + .then((data) => { + const pending = pendingPromisesData.find((p) => p.index === i); + images[i].src = data; + pending.resolve(data); + }) + .catch((e) => { + const pending = pendingPromisesData.find((p) => p.index === i); + pending.reject(e); + }); + } + + return Promise.all(pendingImagesPromises); +}; + export default observer(HighlightPanel); diff --git a/tracker/tracker-assist/.yarn/install-state.gz b/tracker/tracker-assist/.yarn/install-state.gz index e5341f0a7..5ea6c31c8 100644 Binary files a/tracker/tracker-assist/.yarn/install-state.gz and b/tracker/tracker-assist/.yarn/install-state.gz differ diff --git a/tracker/tracker-assist/package.json b/tracker/tracker-assist/package.json index 2d144ecc7..bf09d0f59 100644 --- a/tracker/tracker-assist/package.json +++ b/tracker/tracker-assist/package.json @@ -55,5 +55,5 @@ "eslint --fix --quiet" ] }, - "packageManager": "yarn@4.5.1" + "packageManager": "yarn@4.6.0" } diff --git a/tracker/tracker/.yarn/install-state.gz b/tracker/tracker/.yarn/install-state.gz index 0955c604f..bc3d716f8 100644 Binary files a/tracker/tracker/.yarn/install-state.gz and b/tracker/tracker/.yarn/install-state.gz differ diff --git a/tracker/tracker/package.json b/tracker/tracker/package.json index 050b8d568..e9b0b8a74 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": "15.0.5", + "version": "15.0.6", "keywords": [ "logging", "replay" @@ -80,5 +80,5 @@ "engines": { "node": ">=14.0" }, - "packageManager": "yarn@4.5.1" + "packageManager": "yarn@4.6.0" } diff --git a/tracker/tracker/src/main/modules/mouse.ts b/tracker/tracker/src/main/modules/mouse.ts index aca14a748..262005757 100644 --- a/tracker/tracker/src/main/modules/mouse.ts +++ b/tracker/tracker/src/main/modules/mouse.ts @@ -10,8 +10,7 @@ function _getSelector(target: Element, document: Document, options?: MouseHandle root: document.body, seedMinLength: 3, optimizedMinLength: options?.minSelectorDepth || 2, - threshold: options?.nthThreshold || 1000, - maxNumberOfTries: options?.maxOptimiseTries || 10_000, + maxNumberOfPathChecks: options?.maxOptimiseTries || 10_000, }) return selector diff --git a/tracker/tracker/src/main/modules/network.ts b/tracker/tracker/src/main/modules/network.ts index e6c1154d8..9c6066ee4 100644 --- a/tracker/tracker/src/main/modules/network.ts +++ b/tracker/tracker/src/main/modules/network.ts @@ -81,8 +81,8 @@ export default function (app: App, opts: Partial = {}) { const ignoreHeaders = options.ignoreHeaders const isHIgnored = Array.isArray(ignoreHeaders) - ? (name: string) => ignoreHeaders.includes(name) - : () => ignoreHeaders + ? (name: string) => ignoreHeaders.includes(name) + : () => ignoreHeaders const stHeader = options.sessionTokenHeader === true ? 'X-OpenReplay-SessionToken' : options.sessionTokenHeader @@ -361,4 +361,4 @@ export default function (app: App, opts: Partial = {}) { if (options.captureInIframes) { app.observer.attachContextCallback(app.safe(patchWindow)) } -} +} \ No newline at end of file diff --git a/tracker/tracker/src/main/tsconfig.json b/tracker/tracker/src/main/tsconfig.json index cba19b814..563bd9b72 100644 --- a/tracker/tracker/src/main/tsconfig.json +++ b/tracker/tracker/src/main/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../../tsconfig-base.json", "compilerOptions": { "allowSyntheticDefaultImports": true, - "lib": ["es2020", "dom"], + "lib": ["es2022", "dom"], "declaration": true, "declarationDir": "../../dist/types", } diff --git a/tracker/tracker/tsconfig-base.json b/tracker/tracker/tsconfig-base.json index f5aea83cf..9e5c63b2a 100644 --- a/tracker/tracker/tsconfig-base.json +++ b/tracker/tracker/tsconfig-base.json @@ -6,7 +6,7 @@ "strictNullChecks": true, "alwaysStrict": false, "target": "es2020", - "lib": ["DOM", "ES2020"], + "lib": ["DOM", "ES2022"], "module": "ES2022", "moduleResolution": "node", "esModuleInterop": true,