diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index c862e1efd2..cfa271b5c8 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -36,7 +36,11 @@ import { IframeManager } from './iframe-manager'; import { ShadowDomManager } from './shadow-dom-manager'; import { CanvasManager } from './observers/canvas/canvas-manager'; import { StylesheetManager } from './stylesheet-manager'; -import { callbackWrapper, registerErrorHandler, unregisterErrorHandler } from './errorHandler'; +import { + callbackWrapper, + registerErrorHandler, + unregisterErrorHandler, +} from './errorHandler'; function wrapEvent(e: event): eventWithTime { return { diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index b81c5c0970..c91f576cc2 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -173,36 +173,38 @@ function initMoveObserver({ ), callbackThreshold, ); - const updatePosition = callbackWrapper(throttle( - callbackWrapper((evt) => { - const target = getEventTarget(evt); - const { clientX, clientY } = isTouchEvent(evt) - ? evt.changedTouches[0] - : evt; - if (!timeBaseline) { - timeBaseline = Date.now(); - } - positions.push({ - x: clientX, - y: clientY, - id: mirror.getId(target as Node), - timeOffset: Date.now() - timeBaseline, - }); - // it is possible DragEvent is undefined even on devices - // that support event 'drag' - wrappedCb( - typeof DragEvent !== 'undefined' && evt instanceof DragEvent - ? IncrementalSource.Drag - : evt instanceof MouseEvent - ? IncrementalSource.MouseMove - : IncrementalSource.TouchMove, - ); - }), - threshold, - { - trailing: false, - }, - )); + const updatePosition = callbackWrapper( + throttle( + callbackWrapper((evt) => { + const target = getEventTarget(evt); + const { clientX, clientY } = isTouchEvent(evt) + ? evt.changedTouches[0] + : evt; + if (!timeBaseline) { + timeBaseline = Date.now(); + } + positions.push({ + x: clientX, + y: clientY, + id: mirror.getId(target as Node), + timeOffset: Date.now() - timeBaseline, + }); + // it is possible DragEvent is undefined even on devices + // that support event 'drag' + wrappedCb( + typeof DragEvent !== 'undefined' && evt instanceof DragEvent + ? IncrementalSource.Drag + : evt instanceof MouseEvent + ? IncrementalSource.MouseMove + : IncrementalSource.TouchMove, + ); + }), + threshold, + { + trailing: false, + }, + ), + ); const handlers = [ on('mousemove', updatePosition, doc), on('touchmove', updatePosition, doc), @@ -281,33 +283,35 @@ export function initScrollObserver({ observerParam, 'scrollCb' | 'doc' | 'mirror' | 'blockClass' | 'blockSelector' | 'sampling' >): listenerHandler { - const updatePosition = callbackWrapper(throttle( - callbackWrapper((evt) => { - const target = getEventTarget(evt); - if ( - !target || - isBlocked(target as Node, blockClass, blockSelector, true) - ) { - return; - } - const id = mirror.getId(target as Node); - if (target === doc && doc.defaultView) { - const scrollLeftTop = getWindowScroll(doc.defaultView); - scrollCb({ - id, - x: scrollLeftTop.left, - y: scrollLeftTop.top, - }); - } else { - scrollCb({ - id, - x: (target as HTMLElement).scrollLeft, - y: (target as HTMLElement).scrollTop, - }); - } - }), - sampling.scroll || 100, - )); + const updatePosition = callbackWrapper( + throttle( + callbackWrapper((evt) => { + const target = getEventTarget(evt); + if ( + !target || + isBlocked(target as Node, blockClass, blockSelector, true) + ) { + return; + } + const id = mirror.getId(target as Node); + if (target === doc && doc.defaultView) { + const scrollLeftTop = getWindowScroll(doc.defaultView); + scrollCb({ + id, + x: scrollLeftTop.left, + y: scrollLeftTop.top, + }); + } else { + scrollCb({ + id, + x: (target as HTMLElement).scrollLeft, + y: (target as HTMLElement).scrollTop, + }); + } + }), + sampling.scroll || 100, + ), + ); return on('scroll', updatePosition, doc); } @@ -316,21 +320,23 @@ function initViewportResizeObserver({ }: observerParam): listenerHandler { let lastH = -1; let lastW = -1; - const updateDimension =callbackWrapper(throttle( - callbackWrapper(() => { - const height = getWindowHeight(); - const width = getWindowWidth(); - if (lastH !== height || lastW !== width) { - viewportResizeCb({ - width: Number(width), - height: Number(height), - }); - lastH = height; - lastW = width; - } - }), - 200, - )); + const updateDimension = callbackWrapper( + throttle( + callbackWrapper(() => { + const height = getWindowHeight(); + const width = getWindowWidth(); + if (lastH !== height || lastW !== width) { + viewportResizeCb({ + width: Number(width), + height: Number(height), + }); + lastH = height; + lastW = width; + } + }), + 200, + ), + ); return on('resize', updateDimension, window); } diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts index 5143f8a89b..6328b77f5f 100644 --- a/packages/rrweb/src/types.ts +++ b/packages/rrweb/src/types.ts @@ -207,4 +207,4 @@ export type CrossOriginIframeMessageEventContent = { }; export type CrossOriginIframeMessageEvent = MessageEvent; -export type ErrorHandler = (error: unknown) => void | boolean; \ No newline at end of file +export type ErrorHandler = (error: unknown) => void | boolean;