From 5eef4f8840edaee272ad2e335be5662ce80c0d19 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Fri, 19 Apr 2024 12:50:06 +0100 Subject: [PATCH 1/2] perf: Avoid an extra function call and object clone during event emission (#1441) performance: remove a nested function call and an object clone during event emission - rename `event` to `eventWithoutTime`, but maintain backwards compatibility - `eventWithTime` (with time) could be renamed to `event` in a future version This is an extension of PR #1339 authored by: mydea --- .changeset/event-single-wrap.md | 5 + packages/rrweb/src/record/iframe-manager.ts | 5 +- packages/rrweb/src/record/index.ts | 310 +++++++++----------- packages/rrweb/test/utils.ts | 4 +- packages/types/src/index.ts | 10 +- 5 files changed, 153 insertions(+), 181 deletions(-) create mode 100644 .changeset/event-single-wrap.md diff --git a/.changeset/event-single-wrap.md b/.changeset/event-single-wrap.md new file mode 100644 index 0000000000..c659c015ef --- /dev/null +++ b/.changeset/event-single-wrap.md @@ -0,0 +1,5 @@ +--- +'rrweb': patch +--- + +perf: Avoid an extra function call and object clone during event emission diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts index d3c81d2a85..04f3d7fe7d 100644 --- a/packages/rrweb/src/record/iframe-manager.ts +++ b/packages/rrweb/src/record/iframe-manager.ts @@ -8,6 +8,7 @@ import CrossOriginIframeMirror from './cross-origin-iframe-mirror'; import { EventType, IncrementalSource } from '@sentry-internal/rrweb-types'; import type { eventWithTime, + eventWithoutTime, mutationCallBack, } from '@sentry-internal/rrweb-types'; import type { StylesheetManager } from './stylesheet-manager'; @@ -52,7 +53,7 @@ export class IframeManager implements IframeManagerInterface { new WeakMap(); private mirror: Mirror; private mutationCb: mutationCallBack; - private wrappedEmit: (e: eventWithTime, isCheckout?: boolean) => void; + private wrappedEmit: (e: eventWithoutTime, isCheckout?: boolean) => void; private loadListener?: (iframeEl: HTMLIFrameElement) => unknown; private stylesheetManager: StylesheetManager; private recordCrossOriginIframes: boolean; @@ -62,7 +63,7 @@ export class IframeManager implements IframeManagerInterface { mutationCb: mutationCallBack; stylesheetManager: StylesheetManager; recordCrossOriginIframes: boolean; - wrappedEmit: (e: eventWithTime, isCheckout?: boolean) => void; + wrappedEmit: (e: eventWithoutTime, isCheckout?: boolean) => void; }) { this.mutationCb = options.mutationCb; this.wrappedEmit = options.wrappedEmit; diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 910b4bf2c8..a88cc49bbb 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -19,7 +19,7 @@ import { import type { recordOptions } from '../types'; import { EventType, - event, + eventWithoutTime, eventWithTime, IncrementalSource, listenerHandler, @@ -54,17 +54,13 @@ import { } from './error-handler'; export type { CanvasManagerConstructorOptions } from './observers/canvas/canvas-manager'; -function wrapEvent(e: event): eventWithTime { - const eWithTime = e as eventWithTime; - eWithTime.timestamp = nowTimestamp(); - return eWithTime; -} - declare global { const __RRWEB_EXCLUDE_SHADOW_DOM__: boolean; const __RRWEB_EXCLUDE_IFRAME__: boolean; } +let wrappedEmit!: (e: eventWithoutTime, isCheckout?: boolean) => void; + // These are stored in module scope because we access them in other exported methods let _wrappedEmit: | undefined @@ -213,7 +209,9 @@ function record( } return e as unknown as T; }; - const wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => { + wrappedEmit = (r: eventWithoutTime, isCheckout?: boolean) => { + const e = r as eventWithTime; + e.timestamp = nowTimestamp(); if ( mutationBuffers[0]?.isFrozen() && e.type !== EventType.FullSnapshot && @@ -266,47 +264,39 @@ function record( _wrappedEmit = wrappedEmit; const wrappedMutationEmit = (m: mutationCallbackParam) => { - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.Mutation, - ...m, - }, - }), - ); + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Mutation, + ...m, + }, + }); }; const wrappedScrollEmit: scrollCallback = (p) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.Scroll, - ...p, - }, - }), - ); + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Scroll, + ...p, + }, + }); const wrappedCanvasMutationEmit = (p: canvasMutationParam) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.CanvasMutation, - ...p, - }, - }), - ); + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.CanvasMutation, + ...p, + }, + }); const wrappedAdoptedStyleSheetEmit = (a: adoptedStyleSheetParam) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.AdoptedStyleSheet, - ...a, - }, - }), - ); + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.AdoptedStyleSheet, + ...a, + }, + }); const stylesheetManager = new StylesheetManager({ mutationCb: wrappedMutationEmit, @@ -403,14 +393,14 @@ function record( const takeFullSnapshot = (isCheckout = false) => { wrappedEmit( - wrapEvent({ + { type: EventType.Meta, data: { href: window.location.href, width: getWindowWidth(), height: getWindowHeight(), }, - }), + }, isCheckout, ); @@ -464,15 +454,13 @@ function record( return console.warn('Failed to snapshot the document'); } - wrappedEmit( - wrapEvent({ - type: EventType.FullSnapshot, - data: { - node, - initialOffset: getWindowScroll(window), - }, - }), - ); + wrappedEmit({ + type: EventType.FullSnapshot, + data: { + node, + initialOffset: getWindowScroll(window), + }, + }); mutationBuffers.forEach((buf) => buf.unlock()); // generate & emit any mutations that happened during snapshotting, as can now apply against the newly built mirror // Some old browsers don't support adoptedStyleSheets. @@ -493,108 +481,88 @@ function record( onMutation, mutationCb: wrappedMutationEmit, mousemoveCb: (positions, source) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source, - positions, - }, - }), - ), + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source, + positions, + }, + }), mouseInteractionCb: (d) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.MouseInteraction, - ...d, - }, - }), - ), + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.MouseInteraction, + ...d, + }, + }), scrollCb: wrappedScrollEmit, viewportResizeCb: (d) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.ViewportResize, - ...d, - }, - }), - ), + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.ViewportResize, + ...d, + }, + }), inputCb: (v) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.Input, - ...v, - }, - }), - ), + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Input, + ...v, + }, + }), mediaInteractionCb: (p) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.MediaInteraction, - ...p, - }, - }), - ), + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.MediaInteraction, + ...p, + }, + }), styleSheetRuleCb: (r) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.StyleSheetRule, - ...r, - }, - }), - ), + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.StyleSheetRule, + ...r, + }, + }), styleDeclarationCb: (r) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.StyleDeclaration, - ...r, - }, - }), - ), + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.StyleDeclaration, + ...r, + }, + }), canvasMutationCb: wrappedCanvasMutationEmit, fontCb: (p) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.Font, - ...p, - }, - }), - ), + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Font, + ...p, + }, + }), selectionCb: (p) => { - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.Selection, - ...p, - }, - }), - ); + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Selection, + ...p, + }, + }); }, customElementCb: (c) => { - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.CustomElement, - ...c, - }, - }), - ); + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.CustomElement, + ...c, + }, + }); }, blockClass, ignoreClass, @@ -634,15 +602,13 @@ function record( observer: p.observer!, options: p.options, callback: (payload: object) => - wrappedEmit( - wrapEvent({ - type: EventType.Plugin, - data: { - plugin: p.name, - payload, - }, - }), - ), + wrappedEmit({ + type: EventType.Plugin, + data: { + plugin: p.name, + payload, + }, + }), })) || [], }, {}, @@ -670,12 +636,10 @@ function record( } else { handlers.push( on('DOMContentLoaded', () => { - wrappedEmit( - wrapEvent({ - type: EventType.DomContentLoaded, - data: {}, - }), - ); + wrappedEmit({ + type: EventType.DomContentLoaded, + data: {}, + }); if (recordAfter === 'DOMContentLoaded') init(); }), ); @@ -683,12 +647,10 @@ function record( on( 'load', () => { - wrappedEmit( - wrapEvent({ - type: EventType.Load, - data: {}, - }), - ); + wrappedEmit({ + type: EventType.Load, + data: {}, + }); if (recordAfter === 'load') init(); }, window, @@ -711,15 +673,13 @@ export function addCustomEvent(tag: string, payload: T) { if (!_wrappedEmit) { throw new Error('please add custom event after start recording'); } - _wrappedEmit( - wrapEvent({ - type: EventType.Custom, - data: { - tag, - payload, - }, - }), - ); + wrappedEmit({ + type: EventType.Custom, + data: { + tag, + payload, + }, + }); } export function freezePage() { diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index 7f406ad239..00a7f344d1 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -3,10 +3,10 @@ import { EventType, IncrementalSource, eventWithTime, + eventWithoutTime, MouseInteractions, Optional, mouseInteractionData, - event, pluginEvent, } from '@sentry-internal/rrweb-types'; import type { recordOptions } from '../src/types'; @@ -230,7 +230,7 @@ function stringifySnapshots( } } delete (s as Optional).timestamp; - return s as event; + return s as eventWithoutTime; }), null, 2, diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index b724559207..f81aa7688a 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -163,7 +163,7 @@ export type incrementalData = | adoptedStyleSheetData | customElementData; -export type event = +export type eventWithoutTime = | domContentLoadedEvent | loadedEvent | fullSnapshotEvent @@ -172,7 +172,13 @@ export type event = | customEvent | pluginEvent; -export type eventWithTime = event & { +/** + * @deprecated intended for internal use + * a synonym for eventWithoutTime + */ +export type event = eventWithoutTime; + +export type eventWithTime = eventWithoutTime & { timestamp: number; delay?: number; }; From cb5608b8457c10c0b0fa87129ff3fe749460832c Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 19 Apr 2024 12:36:25 -0400 Subject: [PATCH 2/2] sentry fix --- packages/rrweb/src/record/index.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index a88cc49bbb..dafcb32061 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -335,15 +335,13 @@ function record( mirror, win: window, mutationCb: (p: canvasMutationParam) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.CanvasMutation, - ...p, - }, - }), - ), + wrappedEmit({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.CanvasMutation, + ...p, + }, + }), recordCanvas, blockClass, blockSelector,