mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-24 18:07:17 +01:00
Code Issues Releases Activity

chore: upgrade rrweb (#21734)

Browse Source
This commit is contained in:
David Newell 2024-04-23 15:44:16 +01:00 committed by GitHub
parent 9fa792dfe1
commit 907221067e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 145 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -79,7 +79,7 @@
"@posthog/icons": "0.7.0",
"@posthog/plugin-scaffold": "^1.4.4",
"@react-hook/size": "^2.1.2",
"@rrweb/types": "2.0.0-alpha.12",
"@rrweb/types": "2.0.0-alpha.13",
"@sentry/react": "7.22.0",
"@tailwindcss/container-queries": "^0.1.1",
"@testing-library/dom": ">=7.21.4",
@ -170,7 +170,7 @@
"react-transition-group": "^4.4.5",
"react-virtualized": "^9.22.5",
"resize-observer-polyfill": "^1.5.1",
"rrweb": "2.0.0-alpha.12",
"rrweb": "2.0.0-alpha.13",
"sass": "^1.26.2",
"tailwind-merge": "^2.2.2",
"tailwindcss": "^3.4.0",
@ -310,7 +310,7 @@
"playwright": "1.41.2"
},
"patchedDependencies": {
"rrweb@2.0.0-alpha.12": "patches/rrweb@2.0.0-alpha.12.patch",
"rrweb@2.0.0-alpha.13": "patches/rrweb@2.0.0-alpha.13.patch",
"heatmap.js@2.0.5": "patches/heatmap.js@2.0.5.patch"
}
},

287
patches/rrweb@2.0.0-alpha.12.patch → patches/rrweb@2.0.0-alpha.13.patch
View File

@ -1,8 +1,8 @@
diff --git a/es/rrweb/packages/rrweb/src/replay/index.js b/es/rrweb/packages/rrweb/src/replay/index.js
index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce94604ce1aa1 100644
index 0d49411b1f6d31103bed898c0e81d1d74ab51234..0b2160ef08aa3ae5310f63c295abc0a560332b22 100644
--- a/es/rrweb/packages/rrweb/src/replay/index.js
+++ b/es/rrweb/packages/rrweb/src/replay/index.js
@@ -201,6 +201,10 @@ class Replayer {
@@ -203,6 +203,10 @@ class Replayer {
mouseTail: defaultMouseTailConfig,
useVirtualDom: true,
logger: console,
@ -13,7 +13,7 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
};
this.config = Object.assign({}, defaultConfig, config);
this.handleResize = this.handleResize.bind(this);
@@ -738,272 +742,276 @@ class Replayer {
@@ -755,255 +759,259 @@ class Replayer {
applyIncremental(e, isSync) {
var _a, _b, _c;
const { data: d } = e;
@ -116,16 +116,16 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
- if ('blur' in target) {
- target.blur();
- }
+ case IncrementalSource.MouseInteraction: {
+ if (d.id === -1) {
break;
- break;
- case MouseInteractions.Focus:
- if (triggerFocus && target.focus) {
- target.focus({
- preventScroll: true,
- });
- }
- break;
+ case IncrementalSource.MouseInteraction: {
+ if (d.id === -1) {
break;
- case MouseInteractions.Click:
- case MouseInteractions.TouchStart:
- case MouseInteractions.TouchEnd:
@ -300,11 +300,17 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
+ width: d.width,
+ height: d.height,
+ });
+ break;
break;
- }
- if (this.usingVirtualDom) {
- const target = this.virtualDom.mirror.getNode(d.id);
- if (!target) {
- return this.debugNodeNotFound(d, d.id);
+ case IncrementalSource.Input: {
+ if (d.id === -1) {
+ break;
+ }
}
- target.inputData = d;
+ if (this.usingVirtualDom) {
+ const target = this.virtualDom.mirror.getNode(d.id);
+ if (!target) {
@ -316,18 +322,6 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
+ this.applyInput(d);
break;
}
- if (this.usingVirtualDom) {
- const target = this.virtualDom.mirror.getNode(d.id);
+ case IncrementalSource.MediaInteraction: {
+ const target = this.usingVirtualDom
+ ? this.virtualDom.mirror.getNode(d.id)
+ : this.mirror.getNode(d.id);
if (!target) {
return this.debugNodeNotFound(d, d.id);
}
- target.inputData = d;
- break;
- }
- this.applyInput(d);
- break;
- }
@ -339,90 +333,12 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
- return this.debugNodeNotFound(d, d.id);
- }
- const mediaEl = target;
- try {
- if (d.currentTime !== undefined) {
- mediaEl.currentTime = d.currentTime;
+ const mediaEl = target;
+ try {
+ if (d.currentTime !== undefined) {
+ mediaEl.currentTime = d.currentTime;
+ }
+ if (d.volume !== undefined) {
+ mediaEl.volume = d.volume;
+ }
+ if (d.muted !== undefined) {
+ mediaEl.muted = d.muted;
+ }
+ if (d.type === 1) {
+ mediaEl.pause();
+ }
+ if (d.type === 0) {
+ void mediaEl.play();
+ }
+ if (d.type === 4) {
+ mediaEl.playbackRate = d.playbackRate;
+ }
}
- if (d.volume !== undefined) {
- mediaEl.volume = d.volume;
+ catch (error) {
+ this.warn(`Failed to replay media interactions: ${error.message || error}`);
}
- if (d.muted !== undefined) {
- mediaEl.muted = d.muted;
+ break;
+ }
+ case IncrementalSource.StyleSheetRule:
+ case IncrementalSource.StyleDeclaration: {
+ if (this.usingVirtualDom) {
+ if (d.styleId)
+ this.constructedStyleMutations.push(d);
+ else if (d.id)
+ (_b = this.virtualDom.mirror.getNode(d.id)) === null || _b === void 0 ? void 0 : _b.rules.push(d);
}
- if (d.type === 1) {
- mediaEl.pause();
+ else
+ this.applyStyleSheetMutation(d);
+ break;
+ }
+ case IncrementalSource.CanvasMutation: {
+ if (!this.config.UNSAFE_replayCanvas) {
+ return;
}
- if (d.type === 0) {
- void mediaEl.play();
+ if (this.usingVirtualDom) {
+ const target = this.virtualDom.mirror.getNode(d.id);
+ if (!target) {
+ return this.debugNodeNotFound(d, d.id);
+ }
+ target.canvasMutations.push({
+ event: e,
+ mutation: d,
+ });
}
- if (d.type === 4) {
- mediaEl.playbackRate = d.playbackRate;
+ else {
+ const target = this.mirror.getNode(d.id);
+ if (!target) {
+ return this.debugNodeNotFound(d, d.id);
+ }
+ void canvasMutation({
+ event: e,
+ mutation: d,
+ target: target,
+ imageMap: this.imageMap,
+ canvasEventMap: this.canvasEventMap,
+ errorHandler: this.warnCanvasMutationFailed.bind(this),
+ });
}
+ break;
}
- catch (error) {
- this.warn(`Failed to replay media interactions: ${error.message || error}`);
- }
- const { events } = this.service.state.context;
- this.mediaManager.mediaMutation({
- target: mediaEl,
- timeOffset: e.timestamp - events[0].timestamp,
- mutation: d,
- });
- break;
- }
- case IncrementalSource.StyleSheetRule:
@ -443,26 +359,35 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
- }
- if (this.usingVirtualDom) {
- const target = this.virtualDom.mirror.getNode(d.id);
- if (!target) {
- return this.debugNodeNotFound(d, d.id);
+ case IncrementalSource.Font: {
+ try {
+ const fontFace = new FontFace(d.family, d.buffer
+ ? new Uint8Array(JSON.parse(d.fontSource))
+ : d.fontSource, d.descriptors);
+ (_c = this.iframe.contentDocument) === null || _c === void 0 ? void 0 : _c.fonts.add(fontFace);
+ case IncrementalSource.MediaInteraction: {
+ const target = this.usingVirtualDom
+ ? this.virtualDom.mirror.getNode(d.id)
+ : this.mirror.getNode(d.id);
if (!target) {
return this.debugNodeNotFound(d, d.id);
}
- target.canvasMutations.push({
- event: e,
- mutation: d,
- });
- }
+ const mediaEl = target;
+ const { events } = this.service.state.context;
+ this.mediaManager.mediaMutation({
+ target: mediaEl,
+ timeOffset: e.timestamp - events[0].timestamp,
mutation: d,
});
+ break;
}
- else {
- const target = this.mirror.getNode(d.id);
- if (!target) {
- return this.debugNodeNotFound(d, d.id);
+ catch (error) {
+ this.warn(error);
+ case IncrementalSource.StyleSheetRule:
+ case IncrementalSource.StyleDeclaration: {
+ if (this.usingVirtualDom) {
+ if (d.styleId)
+ this.constructedStyleMutations.push(d);
+ else if (d.id)
+ (_b = this.virtualDom.mirror.getNode(d.id)) === null || _b === void 0 ? void 0 : _b.rules.push(d);
}
- void canvasMutation({
- event: e,
@ -472,7 +397,10 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
- canvasEventMap: this.canvasEventMap,
- errorHandler: this.warnCanvasMutationFailed.bind(this),
- });
- }
+ else
+ this.applyStyleSheetMutation(d);
+ break;
}
- break;
- }
- case IncrementalSource.Font: {
@ -481,16 +409,48 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
- ? new Uint8Array(JSON.parse(d.fontSource))
- : d.fontSource, d.descriptors);
- (_c = this.iframe.contentDocument) === null || _c === void 0 ? void 0 : _c.fonts.add(fontFace);
+ case IncrementalSource.CanvasMutation: {
+ if (!this.config.UNSAFE_replayCanvas) {
+ return;
+ }
+ if (this.usingVirtualDom) {
+ const target = this.virtualDom.mirror.getNode(d.id);
+ if (!target) {
+ return this.debugNodeNotFound(d, d.id);
+ }
+ target.canvasMutations.push({
+ event: e,
+ mutation: d,
+ });
+ }
+ else {
+ const target = this.mirror.getNode(d.id);
+ if (!target) {
+ return this.debugNodeNotFound(d, d.id);
+ }
+ void canvasMutation({
+ event: e,
+ mutation: d,
+ target: target,
+ imageMap: this.imageMap,
+ canvasEventMap: this.canvasEventMap,
+ errorHandler: this.warnCanvasMutationFailed.bind(this),
+ });
+ }
+ break;
}
- catch (error) {
- this.warn(error);
+ case IncrementalSource.Selection: {
+ if (isSync) {
+ this.lastSelectionData = d;
+ break;
+ case IncrementalSource.Font: {
+ try {
+ const fontFace = new FontFace(d.family, d.buffer
+ ? new Uint8Array(JSON.parse(d.fontSource))
+ : d.fontSource, d.descriptors);
+ (_c = this.iframe.contentDocument) === null || _c === void 0 ? void 0 : _c.fonts.add(fontFace);
+ }
+ catch (error) {
+ this.warn(error);
+ }
+ this.applySelection(d);
+ break;
}
- break;
@ -498,6 +458,14 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
- case IncrementalSource.Selection: {
- if (isSync) {
- this.lastSelectionData = d;
+ case IncrementalSource.Selection: {
+ if (isSync) {
+ this.lastSelectionData = d;
+ break;
+ }
+ this.applySelection(d);
+ break;
+ }
+ case IncrementalSource.AdoptedStyleSheet: {
+ if (this.usingVirtualDom)
+ this.adoptedStyleSheets.push(d);
@ -521,50 +489,33 @@ index e9a8ab2ba94093198f3dc42c9f6c4915f99cbc1d..182662fff8cca2eb4c63d956f0fce946
}
applyMutation(d, isSync) {
diff --git a/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js b/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js
index 342e1df171368d312dc0372dace0c6b5a1eb9c61..e98368347aab6f22902e691e1909aa0333232140 100644
index 38a23aaae8d683fa584329eced277dd8de55d1ff..a20f6c785ca3fde692295b7c80fa53d6211315b4 100644
--- a/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js
+++ b/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js
@@ -1254,16 +1254,40 @@ function parse(css, options = {}) {
if (!m) {
return;
}
- return trim(m[0])
+ return splitRootSelectors(trim(m[0])
.replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
.replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (m) => {
return m.replace(/,/g, '\u200C');
- })
- .split(/\s*(?![^(]*\)),\s*/)
+ }))
.map((s) => {
return s.replace(/\u200C/g, ',');
});
}
+ function splitRootSelectors(input) {
+ let parts = [];
+ let nestedLevel = 0;
+ let currentPart = '';
+
+ for (let i = 0; i < input.length; i++) {
+ const char = input[i];
+ currentPart += char;
+
+ if (char === '(') {
+ nestedLevel++;
+ } else if (char === ')') {
+ nestedLevel--;
+ } else if (char === ',' && nestedLevel === 0) {
+ parts.push(currentPart.slice(0, -1).trim());
+ currentPart = '';
@@ -1278,8 +1278,15 @@ function parse(css, options = {}) {
let currentSegment = '';
let depthParentheses = 0;
let depthBrackets = 0;
+ let currentStringChar = null;
for (const char of input) {
- if (char === '(') {
+ const hasStringEscape = currentSegment.endsWith('\\');
+ if (currentStringChar) {
+ if (currentStringChar === char && !hasStringEscape) {
+ currentStringChar = null;
+ }
+ }
+ }
+
+ if (currentPart.trim() !== '') {
+ parts.push(currentPart.trim());
+ }
+
+ return parts;
+ }
function declaration() {
const pos = position();
const propMatch = match(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);
+ else if (char === '(') {
depthParentheses++;
}
else if (char === ')') {
@@ -1291,6 +1298,9 @@ function parse(css, options = {}) {
else if (char === ']') {
depthBrackets--;
}
+ else if ('\'"'.includes(char)) {
+ currentStringChar = char;
+ }
if (char === ',' && depthParentheses === 0 && depthBrackets === 0) {
result.push(currentSegment);
currentSegment = '';

45
pnpm-lock.yaml
View File

@ -1,4 +1,4 @@
lockfileVersion: '6.1'
lockfileVersion: '6.0'
settings:
autoInstallPeers: true
@ -11,9 +11,9 @@ patchedDependencies:
heatmap.js@2.0.5:
hash: gydrxrztd4ruyhouu6tu7zh43e
path: patches/heatmap.js@2.0.5.patch
rrweb@2.0.0-alpha.12:
hash: t3xxecww6aodjl4qopwv6jdxmq
path: patches/rrweb@2.0.0-alpha.12.patch
rrweb@2.0.0-alpha.13:
hash: kfckshv6vjunfa5tljyhkshxxe
path: patches/rrweb@2.0.0-alpha.13.patch
dependencies:
'@ant-design/icons':
@ -59,8 +59,8 @@ dependencies:
specifier: ^2.1.2
version: 2.1.2(react@18.2.0)
'@rrweb/types':
specifier: 2.0.0-alpha.12
version: 2.0.0-alpha.12
specifier: 2.0.0-alpha.13
version: 2.0.0-alpha.13
'@sentry/react':
specifier: 7.22.0
version: 7.22.0(react@18.2.0)
@ -332,8 +332,8 @@ dependencies:
specifier: ^1.5.1
version: 1.5.1
rrweb:
specifier: 2.0.0-alpha.12
version: 2.0.0-alpha.12(patch_hash=t3xxecww6aodjl4qopwv6jdxmq)
specifier: 2.0.0-alpha.13
version: 2.0.0-alpha.13(patch_hash=kfckshv6vjunfa5tljyhkshxxe)
sass:
specifier: ^1.26.2
version: 1.56.0
@ -356,7 +356,7 @@ dependencies:
optionalDependencies:
fsevents:
specifier: ^2.3.2
version: 2.3.2
version: 2.3.3
devDependencies:
'@babel/core':
@ -5892,10 +5892,10 @@ packages:
type-fest: 2.19.0
dev: false
/@rrweb/types@2.0.0-alpha.12:
resolution: {integrity: sha512-dHFMvVBA9JD8MBV+waHtJs8lIeTPCVeT3h+WZ5s8a+EX42TQ08t+ObFMK0OYEszvWgJMJ5WZi5lXTvF46P27Hg==}
/@rrweb/types@2.0.0-alpha.13:
resolution: {integrity: sha512-ytq+MeVm/vP2ybw+gTAN3Xvt7HN2yS+wlbfnwHpQMftxrwzq0kEZHdw+Jp5WUvvpONWzXriNAUU9dW0qLGkzNg==}
dependencies:
rrweb-snapshot: 2.0.0-alpha.12
rrweb-snapshot: 2.0.0-alpha.13
dev: false
/@sentry/browser@7.22.0:
@ -12864,6 +12864,7 @@ packages:
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
dev: true
optional: true
/fsevents@2.3.3:
@ -19200,27 +19201,27 @@ packages:
resolution: {integrity: sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==}
dev: false
/rrdom@2.0.0-alpha.12:
resolution: {integrity: sha512-xdl51tE/ruN+zO0iEalEyyaQtbb4lb2HLULA6ug/zyApQjIVevaDc3BJnyXbDhd0eYgY9flBXTZ2gM64htUwHQ==}
/rrdom@2.0.0-alpha.13:
resolution: {integrity: sha512-GJD3L2MPbIg3+VgCwwfujB4HRXyMfDdg8o3djPjSB9rMX2b52Hx2tBUmwmdnWfgWKtYGDJ2wVX9Dng3tZEBHVA==}
dependencies:
rrweb-snapshot: 2.0.0-alpha.12
rrweb-snapshot: 2.0.0-alpha.13
dev: false
/rrweb-snapshot@2.0.0-alpha.12:
resolution: {integrity: sha512-i4sz9469dbsEGFiBzCkq+7I7M+imPeC3NrKgrrdJ2tXu9H+/eegNe4SrQgCsLBeSZHZDHU0o9L5rxTAiapWbGg==}
/rrweb-snapshot@2.0.0-alpha.13:
resolution: {integrity: sha512-slbhNBCYjxLGCeH95a67ECCy5a22nloXp1F5wF7DCzUNw80FN7tF9Lef1sRGLNo32g3mNqTc2sWLATlKejMxYw==}
dev: false
/rrweb@2.0.0-alpha.12(patch_hash=t3xxecww6aodjl4qopwv6jdxmq):
resolution: {integrity: sha512-lUGwBV7gmbwz1dIgzo9EEayIVyxoTIF6NBF6+Jctqs4Uy45QkyARtikpQlCUfxVCGTCQ0FOee9jeVYsG39oq1g==}
/rrweb@2.0.0-alpha.13(patch_hash=kfckshv6vjunfa5tljyhkshxxe):
resolution: {integrity: sha512-a8GXOCnzWHNaVZPa7hsrLZtNZ3CGjiL+YrkpLo0TfmxGLhjNZbWY2r7pE06p+FcjFNlgUVTmFrSJbK3kO7yxvw==}
dependencies:
'@rrweb/types': 2.0.0-alpha.12
'@rrweb/types': 2.0.0-alpha.13
'@types/css-font-loading-module': 0.0.7
'@xstate/fsm': 1.6.5
base64-arraybuffer: 1.0.2
fflate: 0.4.8
mitt: 3.0.0
rrdom: 2.0.0-alpha.12
rrweb-snapshot: 2.0.0-alpha.12
rrdom: 2.0.0-alpha.13
rrweb-snapshot: 2.0.0-alpha.13
dev: false
patched: true