diff --git a/src/record/index.ts b/src/record/index.ts index c769a4d4dd..696fcf017b 100644 --- a/src/record/index.ts +++ b/src/record/index.ts @@ -1,5 +1,5 @@ import { snapshot } from 'rrweb-snapshot'; -import initObservers from './observer'; +import initObservers, { observeStylesheet } from './observer'; import { mirror, on, @@ -80,9 +80,11 @@ function record(options: recordOptions = {}): listenerHandler | undefined { inlineStylesheet, maskAllInputs, ); + if (!node) { return console.warn('Failed to snapshot the document'); } + mirror.map = idNodeMap; wrappedEmit( wrapEvent({ @@ -181,6 +183,13 @@ function record(options: recordOptions = {}): listenerHandler | undefined { inlineStylesheet, }), ); + + for (var i in mirror.map) { + const node = mirror.map[i]; + if ((node as any).tagName == 'STYLE') { + observeStylesheet(node as any); + } + } }; if ( document.readyState === 'interactive' || diff --git a/src/record/observer.ts b/src/record/observer.ts index 24cfa71ae4..08eb0715b6 100644 --- a/src/record/observer.ts +++ b/src/record/observer.ts @@ -506,6 +506,26 @@ function initInputObserver( }; } +export function observeStylesheet(styleRoot: HTMLLinkElement) { + const handler: ProxyHandler = { + apply: function apply(target, thisArg, argumentsList) { + const result = target.apply(thisArg, argumentsList); + styleRoot.innerHTML = Array.from(thisArg.rules, x => x.cssText).join( + '\n', + ); + + const sheet = styleRoot.sheet as CSSStyleSheet; + sheet.insertRule = new Proxy(sheet.insertRule, handler); + return result; + }, + }; + + const sheet = styleRoot.sheet as CSSStyleSheet; + const proxy = new Proxy(sheet.insertRule, handler); + sheet.insertRule = proxy; + sheet.insertRule('.rr_track_on {}'); +} + export default function initObservers(o: observerParam): listenerHandler { const mutationObserver = initMutationObserver( o.mutationCb,