diff --git a/src/record/index.ts b/src/record/index.ts index e62e95ea..3d1dd7fa 100644 --- a/src/record/index.ts +++ b/src/record/index.ts @@ -1,6 +1,12 @@ import { snapshot } from 'rrweb-snapshot'; import initObservers from './observer'; -import { mirror, on, getWindowWidth, getWindowHeight } from '../utils'; +import { + mirror, + on, + getWindowWidth, + getWindowHeight, + polyfill, +} from '../utils'; import { EventType, event, @@ -49,6 +55,8 @@ function record(options: recordOptions = {}): listenerHandler | undefined { throw new Error('emit function is required'); } + polyfill(); + let lastFullSnapshotEvent: eventWithTime; let incrementalSnapshotCount = 0; wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => { diff --git a/src/replay/index.ts b/src/replay/index.ts index 09200f7f..2701f083 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -21,8 +21,8 @@ import { Handler, Emitter, } from '../types'; -import { mirror } from '../utils'; -import getInjectStyleRules from './styles/inject-style'; +import { mirror, polyfill } from '../utils'; +import getInjectStyleRules from './styles/inject-style'; import './styles/style.css'; const SKIP_TIME_THRESHOLD = 10 * 1000; @@ -78,6 +78,7 @@ export class Replayer { this.timer = new Timer(this.config); smoothscroll.polyfill(); + polyfill(); this.setupDom(); this.emitter.on('resize', this.handleResize as Handler); } @@ -288,7 +289,9 @@ export class Replayer { const styleEl = document.createElement('style'); const { documentElement, head } = this.iframe.contentDocument!; documentElement!.insertBefore(styleEl, head); - const injectStylesRules = getInjectStyleRules(this.config.blockClass).concat(this.config.insertStyleRules); + const injectStylesRules = getInjectStyleRules( + this.config.blockClass, + ).concat(this.config.insertStyleRules); for (let idx = 0; idx < injectStylesRules.length; idx++) { (styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx); } diff --git a/src/utils.ts b/src/utils.ts index 11b8daf5..fa96524e 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -163,3 +163,10 @@ export function isTouchEvent( ): event is TouchEvent { return Boolean((event as TouchEvent).changedTouches); } + +export function polyfill() { + if ('NodeList' in window && !NodeList.prototype.forEach) { + NodeList.prototype.forEach = (Array.prototype + .forEach as unknown) as NodeList['forEach']; + } +}