diff --git a/frontend/src/scenes/session-recordings/player/rrweb/canvas/canvas-plugin.ts b/frontend/src/scenes/session-recordings/player/rrweb/canvas/canvas-plugin.ts index 926fc78e579..34b21a1115b 100644 --- a/frontend/src/scenes/session-recordings/player/rrweb/canvas/canvas-plugin.ts +++ b/frontend/src/scenes/session-recordings/player/rrweb/canvas/canvas-plugin.ts @@ -1,8 +1,7 @@ import { CanvasArg, canvasMutationData, canvasMutationParam, eventWithTime } from '@rrweb/types' import { captureException } from '@sentry/react' import { debounce } from 'lib/utils' -import { canvasMutation, EventType, IncrementalSource, Replayer } from 'rrweb' -import { ReplayPlugin } from 'rrweb/typings/types' +import { canvasMutation, EventType, IncrementalSource, Replayer, ReplayPlugin } from 'rrweb' import { deserializeCanvasArg } from './deserialize-canvas-args' diff --git a/frontend/src/scenes/session-recordings/player/rrweb/index.ts b/frontend/src/scenes/session-recordings/player/rrweb/index.ts index 97a3c1eddb2..f3e96a57696 100644 --- a/frontend/src/scenes/session-recordings/player/rrweb/index.ts +++ b/frontend/src/scenes/session-recordings/player/rrweb/index.ts @@ -1,6 +1,5 @@ import Hls from 'hls.js' -import { EventType, eventWithTime, IncrementalSource } from 'rrweb' -import { playerConfig, ReplayPlugin } from 'rrweb/typings/types' +import { EventType, eventWithTime, IncrementalSource, playerConfig, ReplayPlugin } from 'rrweb' export const PLACEHOLDER_SVG_DATA_IMAGE_URL = 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg==");' diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts index 56240e7ec1e..40becfc0876 100644 --- a/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts +++ b/frontend/src/scenes/session-recordings/player/sessionRecordingPlayerLogic.ts @@ -25,8 +25,7 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic' import { wrapConsole } from 'lib/utils/wrapConsole' import posthog from 'posthog-js' import { RefObject } from 'react' -import { Replayer } from 'rrweb' -import { playerConfig, ReplayPlugin } from 'rrweb/typings/types' +import { playerConfig, Replayer, ReplayPlugin } from 'rrweb' import { openBillingPopupModal } from 'scenes/billing/BillingPopup' import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic' import { diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 14d8f9263fd..227ce6fc020 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -1,5 +1,6 @@ import { LemonInputProps, LemonTableColumns } from '@posthog/lemon-ui' import { PluginConfigSchema } from '@posthog/plugin-scaffold' +import { LogLevel } from '@rrweb/rrweb-plugin-console-record' import { eventWithTime } from '@rrweb/types' import { ChartDataset, ChartType, InteractionItem } from 'chart.js' import { LogicWrapper } from 'kea' @@ -23,7 +24,6 @@ import { Dayjs, dayjs } from 'lib/dayjs' import { PopoverProps } from 'lib/lemon-ui/Popover/Popover' import type { PostHog, SupportedWebVitalsMetrics } from 'posthog-js' import { Layout } from 'react-grid-layout' -import { LogLevel } from 'rrweb' import { BehavioralFilterKey, BehavioralFilterType } from 'scenes/cohorts/CohortFilters/types' import { Holdout } from 'scenes/experiments/holdoutsLogic' import { AggregationAxisFormat } from 'scenes/insights/aggregationAxisFormat' diff --git a/package.json b/package.json index e3374ce653b..b9acc6b29bd 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "@posthog/icons": "0.8.5", "@posthog/plugin-scaffold": "^1.4.4", "@react-hook/size": "^2.1.2", - "@rrweb/types": "2.0.0-alpha.13", + "@rrweb/types": "2.0.0-alpha.17", "@sentry/react": "7.112.1", "@stripe/react-stripe-js": "^2.8.0", "@stripe/stripe-js": "^4.5.0", @@ -181,7 +181,7 @@ "react-transition-group": "^4.4.5", "react-virtualized": "^9.22.5", "resize-observer-polyfill": "^1.5.1", - "rrweb": "2.0.0-alpha.13", + "rrweb": "2.0.0-alpha.17", "sass": "^1.26.2", "tailwind-merge": "^2.2.2", "tailwindcss": "^3.4.0", @@ -202,6 +202,7 @@ "@babel/preset-typescript": "^7.22.5", "@cypress/webpack-preprocessor": "^5.17.1", "@playwright/test": "1.45.0", + "@rrweb/rrweb-plugin-console-record": "^2.0.0-alpha.17", "@sentry/types": "7.112.1", "@storybook/addon-a11y": "^7.6.4", "@storybook/addon-actions": "^7.6.4", @@ -326,9 +327,9 @@ "playwright": "1.45.0" }, "patchedDependencies": { - "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", - "dayjs@1.11.11": "patches/dayjs@1.11.11.patch" + "dayjs@1.11.11": "patches/dayjs@1.11.11.patch", + "rrweb@2.0.0-alpha.17": "patches/rrweb@2.0.0-alpha.17.patch" } }, "lint-staged": { diff --git a/patches/rrweb@2.0.0-alpha.13.patch b/patches/rrweb@2.0.0-alpha.13.patch deleted file mode 100644 index a845c08858a..00000000000 --- a/patches/rrweb@2.0.0-alpha.13.patch +++ /dev/null @@ -1,812 +0,0 @@ -diff --git a/es/rrweb/packages/rrweb/src/replay/index.js b/es/rrweb/packages/rrweb/src/replay/index.js -index 0d49411b1f6d31103bed898c0e81d1d74ab51234..0b2160ef08aa3ae5310f63c295abc0a560332b22 100644 ---- a/es/rrweb/packages/rrweb/src/replay/index.js -+++ b/es/rrweb/packages/rrweb/src/replay/index.js -@@ -203,6 +203,10 @@ class Replayer { - mouseTail: defaultMouseTailConfig, - useVirtualDom: true, - logger: console, -+ onError: (e) => { -+ // maintain the existing behaviour of throwing if no handler is provided -+ throw e; -+ }, - }; - this.config = Object.assign({}, defaultConfig, config); - this.handleResize = this.handleResize.bind(this); -@@ -755,255 +759,259 @@ class Replayer { - applyIncremental(e, isSync) { - var _a, _b, _c; - const { data: d } = e; -- switch (d.source) { -- case IncrementalSource.Mutation: { -- try { -- this.applyMutation(d, isSync); -- } -- catch (error) { -- this.warn(`Exception in mutation ${error.message || error}`, d); -- } -- break; -- } -- case IncrementalSource.Drag: -- case IncrementalSource.TouchMove: -- case IncrementalSource.MouseMove: -- if (isSync) { -- const lastPosition = d.positions[d.positions.length - 1]; -- this.mousePos = { -- x: lastPosition.x, -- y: lastPosition.y, -- id: lastPosition.id, -- debugData: d, -- }; -+ try { -+ switch (d.source) { -+ case IncrementalSource.Mutation: { -+ try { -+ this.applyMutation(d, isSync); -+ } -+ catch (error) { -+ this.warn(`Exception in mutation ${error.message || error}`, d); -+ } -+ break; - } -- else { -- d.positions.forEach((p) => { -- const action = { -- doAction: () => { -- this.moveAndHover(p.x, p.y, p.id, isSync, d); -- }, -- delay: p.timeOffset + -- e.timestamp - -- this.service.state.context.baselineTime, -+ case IncrementalSource.Drag: -+ case IncrementalSource.TouchMove: -+ case IncrementalSource.MouseMove: -+ if (isSync) { -+ const lastPosition = d.positions[d.positions.length - 1]; -+ this.mousePos = { -+ x: lastPosition.x, -+ y: lastPosition.y, -+ id: lastPosition.id, -+ debugData: d, - }; -- this.timer.addAction(action); -- }); -- this.timer.addAction({ -- doAction() { -- }, -- delay: e.delay - ((_a = d.positions[0]) === null || _a === void 0 ? void 0 : _a.timeOffset), -- }); -- } -- break; -- case IncrementalSource.MouseInteraction: { -- if (d.id === -1) { -+ } -+ else { -+ d.positions.forEach((p) => { -+ const action = { -+ doAction: () => { -+ this.moveAndHover(p.x, p.y, p.id, isSync, d); -+ }, -+ delay: p.timeOffset + -+ e.timestamp - -+ this.service.state.context.baselineTime, -+ }; -+ this.timer.addAction(action); -+ }); -+ this.timer.addAction({ -+ doAction() { -+ }, -+ delay: e.delay - ((_a = d.positions[0]) === null || _a === void 0 ? void 0 : _a.timeOffset), -+ }); -+ } - break; -- } -- const event = new Event(toLowerCase(MouseInteractions[d.type])); -- const target = this.mirror.getNode(d.id); -- if (!target) { -- return this.debugNodeNotFound(d, d.id); -- } -- this.emitter.emit(ReplayerEvents.MouseInteraction, { -- type: d.type, -- target, -- }); -- const { triggerFocus } = this.config; -- switch (d.type) { -- case MouseInteractions.Blur: -- if ('blur' in target) { -- target.blur(); -- } -- break; -- case MouseInteractions.Focus: -- if (triggerFocus && target.focus) { -- target.focus({ -- preventScroll: true, -- }); -- } -+ case IncrementalSource.MouseInteraction: { -+ if (d.id === -1) { - break; -- case MouseInteractions.Click: -- case MouseInteractions.TouchStart: -- case MouseInteractions.TouchEnd: -- case MouseInteractions.MouseDown: -- case MouseInteractions.MouseUp: -- if (isSync) { -- if (d.type === MouseInteractions.TouchStart) { -- this.touchActive = true; -- } -- else if (d.type === MouseInteractions.TouchEnd) { -- this.touchActive = false; -- } -- if (d.type === MouseInteractions.MouseDown) { -- this.lastMouseDownEvent = [target, event]; -- } -- else if (d.type === MouseInteractions.MouseUp) { -- this.lastMouseDownEvent = null; -+ } -+ const event = new Event(toLowerCase(MouseInteractions[d.type])); -+ const target = this.mirror.getNode(d.id); -+ if (!target) { -+ return this.debugNodeNotFound(d, d.id); -+ } -+ this.emitter.emit(ReplayerEvents.MouseInteraction, { -+ type: d.type, -+ target, -+ }); -+ const { triggerFocus } = this.config; -+ switch (d.type) { -+ case MouseInteractions.Blur: -+ if ('blur' in target) { -+ target.blur(); - } -- this.mousePos = { -- x: d.x || 0, -- y: d.y || 0, -- id: d.id, -- debugData: d, -- }; -- } -- else { -- if (d.type === MouseInteractions.TouchStart) { -- this.tailPositions.length = 0; -+ break; -+ case MouseInteractions.Focus: -+ if (triggerFocus && target.focus) { -+ target.focus({ -+ preventScroll: true, -+ }); - } -- this.moveAndHover(d.x || 0, d.y || 0, d.id, isSync, d); -- if (d.type === MouseInteractions.Click) { -- this.mouse.classList.remove('active'); -- void this.mouse.offsetWidth; -- this.mouse.classList.add('active'); -+ break; -+ case MouseInteractions.Click: -+ case MouseInteractions.TouchStart: -+ case MouseInteractions.TouchEnd: -+ case MouseInteractions.MouseDown: -+ case MouseInteractions.MouseUp: -+ if (isSync) { -+ if (d.type === MouseInteractions.TouchStart) { -+ this.touchActive = true; -+ } -+ else if (d.type === MouseInteractions.TouchEnd) { -+ this.touchActive = false; -+ } -+ if (d.type === MouseInteractions.MouseDown) { -+ this.lastMouseDownEvent = [target, event]; -+ } -+ else if (d.type === MouseInteractions.MouseUp) { -+ this.lastMouseDownEvent = null; -+ } -+ this.mousePos = { -+ x: d.x || 0, -+ y: d.y || 0, -+ id: d.id, -+ debugData: d, -+ }; - } -- else if (d.type === MouseInteractions.TouchStart) { -- void this.mouse.offsetWidth; -- this.mouse.classList.add('touch-active'); -+ else { -+ if (d.type === MouseInteractions.TouchStart) { -+ this.tailPositions.length = 0; -+ } -+ this.moveAndHover(d.x || 0, d.y || 0, d.id, isSync, d); -+ if (d.type === MouseInteractions.Click) { -+ this.mouse.classList.remove('active'); -+ void this.mouse.offsetWidth; -+ this.mouse.classList.add('active'); -+ } -+ else if (d.type === MouseInteractions.TouchStart) { -+ void this.mouse.offsetWidth; -+ this.mouse.classList.add('touch-active'); -+ } -+ else if (d.type === MouseInteractions.TouchEnd) { -+ this.mouse.classList.remove('touch-active'); -+ } -+ else { -+ target.dispatchEvent(event); -+ } - } -- else if (d.type === MouseInteractions.TouchEnd) { -- this.mouse.classList.remove('touch-active'); -+ break; -+ case MouseInteractions.TouchCancel: -+ if (isSync) { -+ this.touchActive = false; - } - else { -- target.dispatchEvent(event); -+ this.mouse.classList.remove('touch-active'); - } -- } -+ break; -+ default: -+ target.dispatchEvent(event); -+ } -+ break; -+ } -+ case IncrementalSource.Scroll: { -+ if (d.id === -1) { - break; -- case MouseInteractions.TouchCancel: -- if (isSync) { -- this.touchActive = false; -- } -- else { -- this.mouse.classList.remove('touch-active'); -+ } -+ if (this.usingVirtualDom) { -+ const target = this.virtualDom.mirror.getNode(d.id); -+ if (!target) { -+ return this.debugNodeNotFound(d, d.id); - } -+ target.scrollData = d; - break; -- default: -- target.dispatchEvent(event); -- } -- break; -- } -- case IncrementalSource.Scroll: { -- if (d.id === -1) { -- break; -- } -- if (this.usingVirtualDom) { -- const target = this.virtualDom.mirror.getNode(d.id); -- if (!target) { -- return this.debugNodeNotFound(d, d.id); - } -- target.scrollData = d; -+ this.applyScroll(d, isSync); - break; - } -- this.applyScroll(d, isSync); -- break; -- } -- case IncrementalSource.ViewportResize: -- this.emitter.emit(ReplayerEvents.Resize, { -- width: d.width, -- height: d.height, -- }); -- break; -- case IncrementalSource.Input: { -- if (d.id === -1) { -+ case IncrementalSource.ViewportResize: -+ this.emitter.emit(ReplayerEvents.Resize, { -+ width: d.width, -+ height: d.height, -+ }); - 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) { -+ return this.debugNodeNotFound(d, d.id); -+ } -+ target.inputData = d; -+ break; -+ } -+ this.applyInput(d); - break; - } -- this.applyInput(d); -- break; -- } -- 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); -- } -- const mediaEl = target; -- const { events } = this.service.state.context; -- this.mediaManager.mediaMutation({ -- target: mediaEl, -- timeOffset: e.timestamp - events[0].timestamp, -- mutation: d, -- }); -- 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); -- } -- else -- this.applyStyleSheetMutation(d); -- break; -- } -- case IncrementalSource.CanvasMutation: { -- if (!this.config.UNSAFE_replayCanvas) { -- return; -- } -- 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.canvasMutations.push({ -- event: e, -+ 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); -+ 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, -- mutation: d, -- target: target, -- imageMap: this.imageMap, -- canvasEventMap: this.canvasEventMap, -- errorHandler: this.warnCanvasMutationFailed.bind(this), -- }); -+ else -+ this.applyStyleSheetMutation(d); -+ break; - } -- 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); -+ 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.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); -+ } -+ break; - } -- break; -- } -- 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); -+ else -+ this.applyAdoptedStyleSheet(d); - break; - } -- this.applySelection(d); -- break; -- } -- case IncrementalSource.AdoptedStyleSheet: { -- if (this.usingVirtualDom) -- this.adoptedStyleSheets.push(d); -- else -- this.applyAdoptedStyleSheet(d); -- break; - } -+ } catch (error) { -+ this.config.onError(error); - } - } - applyMutation(d, isSync) { -diff --git a/es/rrweb/packages/rrweb/src/replay/media/index.js b/es/rrweb/packages/rrweb/src/replay/media/index.js -index 22fee601e786c1d8dfb5c01d2e359c8bcbac7c42..6d80d33030c601fa74f1b95573cb1590c3a0116b 100644 ---- a/es/rrweb/packages/rrweb/src/replay/media/index.js -+++ b/es/rrweb/packages/rrweb/src/replay/media/index.js -@@ -21,7 +21,7 @@ class MediaManager { - this.mediaMap.forEach((mediaState, target) => { - this.syncTargetWithState(target); - if (options.pause) { -- target.pause(); -+ target?.pause(); - } - }); - } -@@ -49,7 +49,7 @@ class MediaManager { - target.currentTime = seekToTime; - } - else { -- target.pause(); -+ target?.pause(); - target.currentTime = mediaState.currentTimeAtLastInteraction; - } - } -@@ -117,7 +117,7 @@ class MediaManager { - void target.play(); - } - else { -- target.pause(); -+ target?.pause(); - } - } - catch (error) { -@@ -141,7 +141,7 @@ class MediaManager { - isPlaying = target.getAttribute('autoplay') !== null; - } - if (isPlaying && playerIsPaused) -- target.pause(); -+ target?.pause(); - let playbackRate = 1; - if (typeof mediaAttributes.rr_mediaPlaybackRate === 'number') { - playbackRate = mediaAttributes.rr_mediaPlaybackRate; -@@ -180,6 +180,8 @@ class MediaManager { - this.syncTargetWithState(target); - } - mediaMutation({ target, timeOffset, mutation, }) { -+ if (!['AUDIO', 'VIDEO'].includes(target.nodeName)) -+ return; - this.mediaMap.set(target, this.getMediaStateFromMutation({ - target, - timeOffset, -diff --git a/es/rrweb/packages/rrweb-snapshot/es/css.js b/es/rrweb/packages/rrweb-snapshot/es/css.js -new file mode 100644 -index 0000000000000000000000000000000000000000..0a6c5930c017852afd3d7f0170f6eca821619dd3 ---- /dev/null -+++ b/es/rrweb/packages/rrweb-snapshot/es/css.js -@@ -0,0 +1,87 @@ -+import postcss from '../../../../../../../../../postcss/lib/postcss.js' -+ -+const MEDIA_SELECTOR = /(max|min)-device-(width|height)/ -+const MEDIA_SELECTOR_GLOBAL = new RegExp(MEDIA_SELECTOR.source, 'g') -+ -+export const mutate = (cssText) => { -+ const ast = postcss([mediaSelectorPlugin, pseudoClassPlugin]).process(cssText) -+ return ast.css -+} -+ -+const mediaSelectorPlugin = { -+ postcssPlugin: 'postcss-custom-selectors', -+ prepare() { -+ return { -+ postcssPlugin: 'postcss-custom-selectors', -+ AtRule: function (atrule) { -+ if (atrule.params.match(MEDIA_SELECTOR_GLOBAL)) { -+ atrule.params = atrule.params.replace(MEDIA_SELECTOR_GLOBAL, '$1-$2') -+ } -+ }, -+ } -+ }, -+} -+ -+// Adapted from https://github.com/giuseppeg/postcss-pseudo-classes/blob/master/index.js -+const pseudoClassPlugin = { -+ postcssPlugin: 'postcss-hover-classes', -+ prepare: function () { -+ const fixed = [] -+ return { -+ Rule: function (rule) { -+ if (fixed.indexOf(rule) !== -1) { -+ return -+ } -+ fixed.push(rule) -+ -+ rule.selectors.forEach(function (selector) { -+ if (!selector.includes(':')) { -+ return -+ } -+ -+ const selectorParts = selector.replace(/\n/g, ' ').split(' ') -+ const pseudoedSelectorParts = [] -+ -+ selectorParts.forEach(function (selectorPart) { -+ const pseudos = selectorPart.match(/::?([^:]+)/g) -+ -+ if (!pseudos) { -+ pseudoedSelectorParts.push(selectorPart) -+ return -+ } -+ -+ const baseSelector = selectorPart.substr(0, selectorPart.length - pseudos.join('').length) -+ -+ const classPseudos = pseudos.map(function (pseudo) { -+ const pseudoToCheck = pseudo.replace(/\(.*/g, '') -+ if (pseudoToCheck !== ':hover') { -+ return pseudo -+ } -+ -+ // Ignore pseudo-elements! -+ if (pseudo.match(/^::/)) { -+ return pseudo -+ } -+ -+ // Kill the colon -+ pseudo = pseudo.substr(1) -+ -+ // Replace left and right parens -+ pseudo = pseudo.replace(/\(/g, '\\(') -+ pseudo = pseudo.replace(/\)/g, '\\)') -+ -+ return '.' + '\\:' + pseudo -+ }) -+ -+ pseudoedSelectorParts.push(baseSelector + classPseudos.join('')) -+ }) -+ -+ const newSelector = pseudoedSelectorParts.join(' ') -+ if (newSelector && newSelector !== selector) { -+ rule.selector += ',\n' + newSelector -+ } -+ }) -+ }, -+ } -+ }, -+} -diff --git a/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js b/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js -index 38a23aaae8d683fa584329eced277dd8de55d1ff..8aeee467a3bab9baeefb1a97f2b131bedbd0fa3c 100644 ---- a/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js -+++ b/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js -@@ -1,3 +1,5 @@ -+import {mutate} from './css.js'; -+ - var NodeType; - (function (NodeType) { - NodeType[NodeType["Document"] = 0] = "Document"; -@@ -1255,54 +1257,19 @@ function parse(css, options = {}) { - }); - } - function selector() { -- whitespace(); -- while (css[0] == '}') { -- error('extra closing bracket'); -- css = css.slice(1); -- whitespace(); -- } -- const m = match(/^(("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^{])+)/); -+ const m = match(/^([^{]+)/); - if (!m) { - return; - } -- const cleanedInput = m[0] -- .trim() -+ return trim(m[0]) - .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '') - .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (m) => { -- return m.replace(/,/g, '\u200C'); -- }); -- return customSplit(cleanedInput).map((s) => s.replace(/\u200C/g, ',').trim()); -- } -- function customSplit(input) { -- const result = []; -- let currentSegment = ''; -- let depthParentheses = 0; -- let depthBrackets = 0; -- for (const char of input) { -- if (char === '(') { -- depthParentheses++; -- } -- else if (char === ')') { -- depthParentheses--; -- } -- else if (char === '[') { -- depthBrackets++; -- } -- else if (char === ']') { -- depthBrackets--; -- } -- if (char === ',' && depthParentheses === 0 && depthBrackets === 0) { -- result.push(currentSegment); -- currentSegment = ''; -- } -- else { -- currentSegment += char; -- } -- } -- if (currentSegment) { -- result.push(currentSegment); -- } -- return result; -+ return m.replace(/,/g, '\u200C'); -+ }) -+ .split(/\s*(?![^(]*\)),\s*/) -+ .map((s) => { -+ return s.replace(/\u200C/g, ','); -+ }); - } - function declaration() { - const pos = position(); -@@ -1662,56 +1629,60 @@ function adaptCssForReplay(cssText, cache) { - const cachedStyle = cache === null || cache === void 0 ? void 0 : cache.stylesWithHoverClass.get(cssText); - if (cachedStyle) - return cachedStyle; -- const ast = parse(cssText, { -- silent: true, -- }); -- if (!ast.stylesheet) { -- return cssText; -- } -- const selectors = []; -- const medias = []; -- function getSelectors(rule) { -- if ('selectors' in rule && rule.selectors) { -- rule.selectors.forEach((selector) => { -- if (HOVER_SELECTOR.test(selector)) { -- selectors.push(selector); -- } -- }); -+ let result = cssText; -+ try { -+ result = mutate(cssText) -+ } catch (error) { -+ const ast = parse(cssText, { -+ silent: true, -+ }); -+ if (!ast.stylesheet) { -+ return cssText; -+ } -+ const selectors = []; -+ const medias = []; -+ function getSelectors(rule) { -+ if ('selectors' in rule && rule.selectors) { -+ rule.selectors.forEach((selector) => { -+ if (HOVER_SELECTOR.test(selector)) { -+ selectors.push(selector); -+ } -+ }); -+ } -+ if ('media' in rule && rule.media && MEDIA_SELECTOR.test(rule.media)) { -+ medias.push(rule.media); -+ } -+ if ('rules' in rule && rule.rules) { -+ rule.rules.forEach(getSelectors); -+ } - } -- if ('media' in rule && rule.media && MEDIA_SELECTOR.test(rule.media)) { -- medias.push(rule.media); -+ getSelectors(ast.stylesheet); -+ if (selectors.length > 0) { -+ const selectorMatcher = new RegExp(selectors -+ .filter((selector, index) => selectors.indexOf(selector) === index) -+ .sort((a, b) => b.length - a.length) -+ .map((selector) => { -+ return escapeRegExp(selector); -+ }) -+ .join('|'), 'g'); -+ result = result.replace(selectorMatcher, (selector) => { -+ const newSelector = selector.replace(HOVER_SELECTOR_GLOBAL, '$1.\\:hover'); -+ return `${selector}, ${newSelector}`; -+ }); - } -- if ('rules' in rule && rule.rules) { -- rule.rules.forEach(getSelectors); -+ if (medias.length > 0) { -+ const mediaMatcher = new RegExp(medias -+ .filter((media, index) => medias.indexOf(media) === index) -+ .sort((a, b) => b.length - a.length) -+ .map((media) => { -+ return escapeRegExp(media); -+ }) -+ .join('|'), 'g'); -+ result = result.replace(mediaMatcher, (media) => { -+ return media.replace(MEDIA_SELECTOR_GLOBAL, '$1-$2'); -+ }); - } - } -- getSelectors(ast.stylesheet); -- let result = cssText; -- if (selectors.length > 0) { -- const selectorMatcher = new RegExp(selectors -- .filter((selector, index) => selectors.indexOf(selector) === index) -- .sort((a, b) => b.length - a.length) -- .map((selector) => { -- return escapeRegExp(selector); -- }) -- .join('|'), 'g'); -- result = result.replace(selectorMatcher, (selector) => { -- const newSelector = selector.replace(HOVER_SELECTOR_GLOBAL, '$1.\\:hover'); -- return `${selector}, ${newSelector}`; -- }); -- } -- if (medias.length > 0) { -- const mediaMatcher = new RegExp(medias -- .filter((media, index) => medias.indexOf(media) === index) -- .sort((a, b) => b.length - a.length) -- .map((media) => { -- return escapeRegExp(media); -- }) -- .join('|'), 'g'); -- result = result.replace(mediaMatcher, (media) => { -- return media.replace(MEDIA_SELECTOR_GLOBAL, '$1-$2'); -- }); -- } - cache === null || cache === void 0 ? void 0 : cache.stylesWithHoverClass.set(cssText, result); - return result; - } diff --git a/patches/rrweb@2.0.0-alpha.17.patch b/patches/rrweb@2.0.0-alpha.17.patch new file mode 100644 index 00000000000..e7f0898a8db --- /dev/null +++ b/patches/rrweb@2.0.0-alpha.17.patch @@ -0,0 +1,482 @@ +diff --git a/dist/rrweb.js b/dist/rrweb.js +index 12f4ad3c7f897fe8a9ee2f4595dcf37f302d17c5..65b80aa52851aa8d57bfa218e639a850f1b19cb7 100644 +--- a/dist/rrweb.js ++++ b/dist/rrweb.js +@@ -15007,7 +15007,7 @@ class MediaManager { + } + } + addMediaElements(node2, timeOffset, mirror2) { +- if (!["AUDIO", "VIDEO"].includes(node2.nodeName)) return; ++ if (!this.isSupportedMediaElement(node2)) return; + const target = node2; + const serializedNode = mirror2.getMeta(target); + if (!serializedNode || !("attributes" in serializedNode)) return; +@@ -15060,6 +15060,7 @@ class MediaManager { + timeOffset, + mutation + }) { ++ if (!this.isSupportedMediaElement(target)) return; + this.mediaMap.set( + target, + this.getMediaStateFromMutation({ +@@ -15312,7 +15313,11 @@ class Replayer { + mouseTail: defaultMouseTailConfig, + useVirtualDom: true, + // Virtual-dom optimization is enabled by default. +- logger: console ++ logger: console, ++ onError: (e) => { ++ // maintain the existing behaviour of throwing if no handler is provided ++ throw e; ++ }, + }; + this.config = Object.assign({}, defaultConfig, config); + this.handleResize = this.handleResize.bind(this); +@@ -15941,240 +15946,244 @@ class Replayer { + applyIncremental(e2, isSync) { + var _a2, _b, _c; + const { data: d } = e2; +- switch (d.source) { +- case IncrementalSource.Mutation: { +- try { +- this.applyMutation(d, isSync); +- } catch (error) { +- this.warn(`Exception in mutation ${error.message || error}`, d); ++ try { ++ switch (d.source) { ++ case IncrementalSource.Mutation: { ++ try { ++ this.applyMutation(d, isSync); ++ } catch (error) { ++ this.warn(`Exception in mutation ${error.message || error}`, d); ++ } ++ break; + } +- break; +- } +- case IncrementalSource.Drag: +- case IncrementalSource.TouchMove: +- case IncrementalSource.MouseMove: +- if (isSync) { +- const lastPosition = d.positions[d.positions.length - 1]; +- this.mousePos = { +- x: lastPosition.x, +- y: lastPosition.y, +- id: lastPosition.id, +- debugData: d +- }; +- } else { +- d.positions.forEach((p) => { +- const action = { +- doAction: () => { +- this.moveAndHover(p.x, p.y, p.id, isSync, d); +- }, +- delay: p.timeOffset + e2.timestamp - this.service.state.context.baselineTime ++ case IncrementalSource.Drag: ++ case IncrementalSource.TouchMove: ++ case IncrementalSource.MouseMove: ++ if (isSync) { ++ const lastPosition = d.positions[d.positions.length - 1]; ++ this.mousePos = { ++ x: lastPosition.x, ++ y: lastPosition.y, ++ id: lastPosition.id, ++ debugData: d + }; +- this.timer.addAction(action); +- }); +- this.timer.addAction({ +- doAction() { +- }, +- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion +- delay: e2.delay - ((_a2 = d.positions[0]) == null ? void 0 : _a2.timeOffset) +- }); +- } +- break; +- case IncrementalSource.MouseInteraction: { +- if (d.id === -1) { ++ } else { ++ d.positions.forEach((p) => { ++ const action = { ++ doAction: () => { ++ this.moveAndHover(p.x, p.y, p.id, isSync, d); ++ }, ++ delay: p.timeOffset + e2.timestamp - this.service.state.context.baselineTime ++ }; ++ this.timer.addAction(action); ++ }); ++ this.timer.addAction({ ++ doAction() { ++ }, ++ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion ++ delay: e2.delay - ((_a2 = d.positions[0]) == null ? void 0 : _a2.timeOffset) ++ }); ++ } + break; +- } +- const event = new Event(toLowerCase(MouseInteractions[d.type])); +- const target = this.mirror.getNode(d.id); +- if (!target) { +- return this.debugNodeNotFound(d, d.id); +- } +- this.emitter.emit(ReplayerEvents.MouseInteraction, { +- type: d.type, +- target +- }); +- const { triggerFocus } = this.config; +- switch (d.type) { +- case MouseInteractions.Blur: +- if ("blur" in target) { +- target.blur(); +- } ++ case IncrementalSource.MouseInteraction: { ++ if (d.id === -1) { + break; +- case MouseInteractions.Focus: +- if (triggerFocus && target.focus) { +- target.focus({ +- preventScroll: true +- }); +- } +- break; +- case MouseInteractions.Click: +- case MouseInteractions.TouchStart: +- case MouseInteractions.TouchEnd: +- case MouseInteractions.MouseDown: +- case MouseInteractions.MouseUp: +- if (isSync) { +- if (d.type === MouseInteractions.TouchStart) { +- this.touchActive = true; +- } else if (d.type === MouseInteractions.TouchEnd) { +- this.touchActive = false; ++ } ++ const event = new Event(toLowerCase(MouseInteractions[d.type])); ++ const target = this.mirror.getNode(d.id); ++ if (!target) { ++ return this.debugNodeNotFound(d, d.id); ++ } ++ this.emitter.emit(ReplayerEvents.MouseInteraction, { ++ type: d.type, ++ target ++ }); ++ const { triggerFocus } = this.config; ++ switch (d.type) { ++ case MouseInteractions.Blur: ++ if ("blur" in target) { ++ target.blur(); + } +- if (d.type === MouseInteractions.MouseDown) { +- this.lastMouseDownEvent = [target, event]; +- } else if (d.type === MouseInteractions.MouseUp) { +- this.lastMouseDownEvent = null; ++ break; ++ case MouseInteractions.Focus: ++ if (triggerFocus && target.focus) { ++ target.focus({ ++ preventScroll: true ++ }); + } +- this.mousePos = { +- x: d.x || 0, +- y: d.y || 0, +- id: d.id, +- debugData: d +- }; +- } else { +- if (d.type === MouseInteractions.TouchStart) { +- this.tailPositions.length = 0; ++ break; ++ case MouseInteractions.Click: ++ case MouseInteractions.TouchStart: ++ case MouseInteractions.TouchEnd: ++ case MouseInteractions.MouseDown: ++ case MouseInteractions.MouseUp: ++ if (isSync) { ++ if (d.type === MouseInteractions.TouchStart) { ++ this.touchActive = true; ++ } else if (d.type === MouseInteractions.TouchEnd) { ++ this.touchActive = false; ++ } ++ if (d.type === MouseInteractions.MouseDown) { ++ this.lastMouseDownEvent = [target, event]; ++ } else if (d.type === MouseInteractions.MouseUp) { ++ this.lastMouseDownEvent = null; ++ } ++ this.mousePos = { ++ x: d.x || 0, ++ y: d.y || 0, ++ id: d.id, ++ debugData: d ++ }; ++ } else { ++ if (d.type === MouseInteractions.TouchStart) { ++ this.tailPositions.length = 0; ++ } ++ this.moveAndHover(d.x || 0, d.y || 0, d.id, isSync, d); ++ if (d.type === MouseInteractions.Click) { ++ this.mouse.classList.remove("active"); ++ void this.mouse.offsetWidth; ++ this.mouse.classList.add("active"); ++ } else if (d.type === MouseInteractions.TouchStart) { ++ void this.mouse.offsetWidth; ++ this.mouse.classList.add("touch-active"); ++ } else if (d.type === MouseInteractions.TouchEnd) { ++ this.mouse.classList.remove("touch-active"); ++ } else { ++ target.dispatchEvent(event); ++ } + } +- this.moveAndHover(d.x || 0, d.y || 0, d.id, isSync, d); +- if (d.type === MouseInteractions.Click) { +- this.mouse.classList.remove("active"); +- void this.mouse.offsetWidth; +- this.mouse.classList.add("active"); +- } else if (d.type === MouseInteractions.TouchStart) { +- void this.mouse.offsetWidth; +- this.mouse.classList.add("touch-active"); +- } else if (d.type === MouseInteractions.TouchEnd) { +- this.mouse.classList.remove("touch-active"); ++ break; ++ case MouseInteractions.TouchCancel: ++ if (isSync) { ++ this.touchActive = false; + } else { +- target.dispatchEvent(event); ++ this.mouse.classList.remove("touch-active"); + } +- } ++ break; ++ default: ++ target.dispatchEvent(event); ++ } ++ break; ++ } ++ case IncrementalSource.Scroll: { ++ if (d.id === -1) { + break; +- case MouseInteractions.TouchCancel: +- if (isSync) { +- this.touchActive = false; +- } else { +- this.mouse.classList.remove("touch-active"); ++ } ++ if (this.usingVirtualDom) { ++ const target = this.virtualDom.mirror.getNode(d.id); ++ if (!target) { ++ return this.debugNodeNotFound(d, d.id); + } ++ target.scrollData = d; + break; +- default: +- target.dispatchEvent(event); ++ } ++ this.applyScroll(d, isSync); ++ break; + } +- break; +- } +- case IncrementalSource.Scroll: { +- if (d.id === -1) { ++ case IncrementalSource.ViewportResize: ++ this.emitter.emit(ReplayerEvents.Resize, { ++ width: d.width, ++ height: d.height ++ }); ++ break; ++ case IncrementalSource.Input: { ++ if (d.id === -1) { ++ break; ++ } ++ if (this.usingVirtualDom) { ++ const target = this.virtualDom.mirror.getNode(d.id); ++ if (!target) { ++ return this.debugNodeNotFound(d, d.id); ++ } ++ target.inputData = d; ++ break; ++ } ++ 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.scrollData = d; ++ const mediaEl = target; ++ const { events } = this.service.state.context; ++ this.mediaManager.mediaMutation({ ++ target: mediaEl, ++ timeOffset: e2.timestamp - events[0].timestamp, ++ mutation: d ++ }); + break; + } +- this.applyScroll(d, isSync); +- break; +- } +- case IncrementalSource.ViewportResize: +- this.emitter.emit(ReplayerEvents.Resize, { +- width: d.width, +- height: d.height +- }); +- break; +- case IncrementalSource.Input: { +- if (d.id === -1) { ++ 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 ? void 0 : _b.rules.push(d); ++ } else this.applyStyleSheetMutation(d); + break; + } +- if (this.usingVirtualDom) { +- const target = this.virtualDom.mirror.getNode(d.id); +- if (!target) { +- return this.debugNodeNotFound(d, d.id); ++ 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: e2, ++ mutation: d ++ }); ++ } else { ++ const target = this.mirror.getNode(d.id); ++ if (!target) { ++ return this.debugNodeNotFound(d, d.id); ++ } ++ void canvasMutation({ ++ event: e2, ++ mutation: d, ++ target, ++ imageMap: this.imageMap, ++ canvasEventMap: this.canvasEventMap, ++ errorHandler: this.warnCanvasMutationFailed.bind(this) ++ }); + } +- target.inputData = d; + break; + } +- this.applyInput(d); +- break; +- } +- 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); +- } +- const mediaEl = target; +- const { events } = this.service.state.context; +- this.mediaManager.mediaMutation({ +- target: mediaEl, +- timeOffset: e2.timestamp - events[0].timestamp, +- mutation: d +- }); +- 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 ? void 0 : _b.rules.push(d); +- } else this.applyStyleSheetMutation(d); +- break; +- } +- 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: e2, +- mutation: d +- }); +- } else { +- const target = this.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 ? void 0 : _c.fonts.add(fontFace); ++ } catch (error) { ++ this.warn(error); + } +- void canvasMutation({ +- event: e2, +- mutation: d, +- target, +- imageMap: this.imageMap, +- canvasEventMap: this.canvasEventMap, +- errorHandler: this.warnCanvasMutationFailed.bind(this) +- }); ++ break; + } +- 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 ? void 0 : _c.fonts.add(fontFace); +- } catch (error) { +- this.warn(error); ++ case IncrementalSource.Selection: { ++ if (isSync) { ++ this.lastSelectionData = d; ++ break; ++ } ++ this.applySelection(d); ++ break; + } +- break; +- } +- case IncrementalSource.Selection: { +- if (isSync) { +- this.lastSelectionData = d; ++ case IncrementalSource.AdoptedStyleSheet: { ++ if (this.usingVirtualDom) this.adoptedStyleSheets.push(d); ++ else this.applyAdoptedStyleSheet(d); + break; + } +- this.applySelection(d); +- break; +- } +- case IncrementalSource.AdoptedStyleSheet: { +- if (this.usingVirtualDom) this.adoptedStyleSheets.push(d); +- else this.applyAdoptedStyleSheet(d); +- break; + } ++ } catch (error) { ++ this.config.onError(error); + } + } + /** diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e52e37d9ae5..246a2f9ec18 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,9 +14,9 @@ patchedDependencies: heatmap.js@2.0.5: hash: gydrxrztd4ruyhouu6tu7zh43e path: patches/heatmap.js@2.0.5.patch - rrweb@2.0.0-alpha.13: - hash: e2gmypqces37eklplr5o3rvywa - path: patches/rrweb@2.0.0-alpha.13.patch + rrweb@2.0.0-alpha.17: + hash: rasuulgucjqilfs2w4z4kcobfu + path: patches/rrweb@2.0.0-alpha.17.patch dependencies: '@babel/runtime': @@ -62,8 +62,8 @@ dependencies: specifier: ^2.1.2 version: 2.1.2(react@18.2.0) '@rrweb/types': - specifier: 2.0.0-alpha.13 - version: 2.0.0-alpha.13 + specifier: 2.0.0-alpha.17 + version: 2.0.0-alpha.17 '@sentry/react': specifier: 7.112.1 version: 7.112.1(react@18.2.0) @@ -365,8 +365,8 @@ dependencies: specifier: ^1.5.1 version: 1.5.1 rrweb: - specifier: 2.0.0-alpha.13 - version: 2.0.0-alpha.13(patch_hash=e2gmypqces37eklplr5o3rvywa) + specifier: 2.0.0-alpha.17 + version: 2.0.0-alpha.17(patch_hash=rasuulgucjqilfs2w4z4kcobfu) sass: specifier: ^1.26.2 version: 1.56.0 @@ -428,6 +428,9 @@ devDependencies: '@playwright/test': specifier: 1.45.0 version: 1.45.0 + '@rrweb/rrweb-plugin-console-record': + specifier: ^2.0.0-alpha.17 + version: 2.0.0-alpha.17(rrweb@2.0.0-alpha.17) '@sentry/types': specifier: 7.112.1 version: 7.112.1 @@ -6120,11 +6123,21 @@ packages: type-fest: 2.19.0 dev: false - /@rrweb/types@2.0.0-alpha.13: - resolution: {integrity: sha512-ytq+MeVm/vP2ybw+gTAN3Xvt7HN2yS+wlbfnwHpQMftxrwzq0kEZHdw+Jp5WUvvpONWzXriNAUU9dW0qLGkzNg==} + /@rrweb/rrweb-plugin-console-record@2.0.0-alpha.17(rrweb@2.0.0-alpha.17): + resolution: {integrity: sha512-tjNJ3wWUDMMf275xr4Rb5tVYF2UR+wXvSxnyS9tRKnRa574PQQvx7sGbqM/O9AytYjnbiTrAMqNR7OFysGCMwQ==} + peerDependencies: + rrweb: ^2.0.0-alpha.17 dependencies: - rrweb-snapshot: 2.0.0-alpha.13 - dev: false + rrweb: 2.0.0-alpha.17(patch_hash=rasuulgucjqilfs2w4z4kcobfu) + dev: true + + /@rrweb/types@2.0.0-alpha.17: + resolution: {integrity: sha512-AfDTVUuCyCaIG0lTSqYtrZqJX39ZEYzs4fYKnexhQ+id+kbZIpIJtaut5cto6dWZbB3SEe4fW0o90Po3LvTmfg==} + dependencies: + rrweb-snapshot: 2.0.0-alpha.17 + + /@rrweb/utils@2.0.0-alpha.17: + resolution: {integrity: sha512-HCsasPERBwOS9/LQeOytO2ETKTCqRj1wORBuxiy3t41hKhmi225DdrUPiWnyDdTQm1GdVbOymMRknJVPnZaSXw==} /@sentry-internal/feedback@7.112.1: resolution: {integrity: sha512-ejE4eRXLqv5emxVWudBkRQCv5Q7s21thei7gqSxGLBXe8AUrCjTiD0qA1ToJAKcleIyRRf/TQvGb/T7U6vwAAw==} @@ -8018,7 +8031,6 @@ packages: /@types/css-font-loading-module@0.0.7: resolution: {integrity: sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==} - dev: false /@types/d3-array@3.0.3: resolution: {integrity: sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==} @@ -9068,7 +9080,6 @@ packages: /@xstate/fsm@1.6.5: resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==} - dev: false /@xtuc/ieee754@1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} @@ -9865,7 +9876,6 @@ packages: /base64-arraybuffer@1.0.2: resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==} engines: {node: '>= 0.6.0'} - dev: false /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -16111,7 +16121,6 @@ packages: /mitt@3.0.0: resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==} - dev: false /mkdirp-classic@0.5.3: resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==} @@ -16245,6 +16254,11 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + /nanoid@3.3.7: + resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + /native-request@1.1.2: resolution: {integrity: sha512-/etjwrK0J4Ebbcnt35VMWnfiUX/B04uwGJxyJInagxDqf2z5drSt/lsOvEMWGYunz1kaLZAFrV4NDAbOoDKvAQ==} requiresBuild: true @@ -16863,6 +16877,9 @@ packages: /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} + /picocolors@1.1.1: + resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} @@ -17785,6 +17802,14 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 + /postcss@8.4.47: + resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.7 + picocolors: 1.1.1 + source-map-js: 1.2.1 + /posthog-js-lite@3.0.0: resolution: {integrity: sha512-dyajjnfzZD1tht4N7p7iwf7nBnR1MjVaVu+MKr+7gBgA39bn28wizCIJZztZPtHy4PY0YwtSGgwfBCuG/hnHgA==} dev: false @@ -19082,28 +19107,27 @@ packages: resolution: {integrity: sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==} dev: false - /rrdom@2.0.0-alpha.13: - resolution: {integrity: sha512-GJD3L2MPbIg3+VgCwwfujB4HRXyMfDdg8o3djPjSB9rMX2b52Hx2tBUmwmdnWfgWKtYGDJ2wVX9Dng3tZEBHVA==} + /rrdom@2.0.0-alpha.17: + resolution: {integrity: sha512-b6caDiNcFO96Opp7TGdcVd4OLGSXu5dJe+A0IDiAu8mk7OmhqZCSDlgQdTKmdO5wMf4zPsUTgb8H/aNvR3kDHA==} dependencies: - rrweb-snapshot: 2.0.0-alpha.13 - dev: false + rrweb-snapshot: 2.0.0-alpha.17 - /rrweb-snapshot@2.0.0-alpha.13: - resolution: {integrity: sha512-slbhNBCYjxLGCeH95a67ECCy5a22nloXp1F5wF7DCzUNw80FN7tF9Lef1sRGLNo32g3mNqTc2sWLATlKejMxYw==} - dev: false - - /rrweb@2.0.0-alpha.13(patch_hash=e2gmypqces37eklplr5o3rvywa): - resolution: {integrity: sha512-a8GXOCnzWHNaVZPa7hsrLZtNZ3CGjiL+YrkpLo0TfmxGLhjNZbWY2r7pE06p+FcjFNlgUVTmFrSJbK3kO7yxvw==} + /rrweb-snapshot@2.0.0-alpha.17: + resolution: {integrity: sha512-GBg5pV8LHOTbeVmH2VHLEFR0mc2QpQMzAvcoxEGfPNWgWHc8UvKCyq7pqN1vA+fDZ+yXXbixeO0kB2pzVvFCBw==} dependencies: - '@rrweb/types': 2.0.0-alpha.13 + postcss: 8.4.47 + + /rrweb@2.0.0-alpha.17(patch_hash=rasuulgucjqilfs2w4z4kcobfu): + resolution: {integrity: sha512-GQxBkCC4r9XL2bwSdv7iIS49M3cEA8OtObVq0rrQ4GUT4+h7omucGQ4x7m5YN5Vq1oalStBaBlYqF7yRnfG3JA==} + dependencies: + '@rrweb/types': 2.0.0-alpha.17 + '@rrweb/utils': 2.0.0-alpha.17 '@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.13 - rrweb-snapshot: 2.0.0-alpha.13 - dev: false + rrdom: 2.0.0-alpha.17 + rrweb-snapshot: 2.0.0-alpha.17 patched: true /run-async@2.4.1: @@ -19665,6 +19689,10 @@ packages: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} + /source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + /source-map-support@0.5.13: resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==} dependencies: