[Bug]: `window.CSSStyleSheet` is undefined while stopping the recording

[Navaneeth D]

Preflight Checklist

• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb

Version

2.0.0-alpha.11

Expected Behavior

When stopping a recording with iframes no errors should be ideally thrown. Alternatively, these errors should be prevented with proper guards or properly handled using try-catch statements without sending them to the user's application.

Actual Behavior

Stopping a recording containing iframes, throws the following error:

As shown in the image, the error is getting triggered at:

rrweb/packages/rrweb/src/record/observer.ts

Line 862 in b2460a4

 win.CSSStyleSheet.prototype.insertRule = insertRule; 

This issue is a continuation of the previously defined issue: #1057

Actual cause of the issue has not been debugged yet. We don't know why win.CSSStyleSheet becomes undefined.

There were previous attempts to silence these errors:

• #1083 aims to catch the error.
• #1088 adds a guard to prevent the error from occurring.

However, no logic is in place to guard the error from occurring while unsubscribing, specifically, when the return function of the initStylesheetObserver is invoked:

rrweb/packages/rrweb/src/record/observer.ts

Lines 861 to 870 in b2460a4

 return callbackWrapper(() => { 
   win.CSSStyleSheet.prototype.insertRule = insertRule; 
   win.CSSStyleSheet.prototype.deleteRule = deleteRule; 
   replace && (win.CSSStyleSheet.prototype.replace = replace); 
   replaceSync && (win.CSSStyleSheet.prototype.replaceSync = replaceSync); 
   Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => { 
     type.prototype.insertRule = unmodifiedFunctions[typeKey].insertRule; 
     type.prototype.deleteRule = unmodifiedFunctions[typeKey].deleteRule; 
   }); 
 }); 

---

A similar situation can also take place over here:

rrweb/packages/rrweb/src/record/observer.ts

Lines 1021 to 1024 in b2460a4

 return callbackWrapper(() => { 
   win.CSSStyleDeclaration.prototype.setProperty = setProperty; 
   win.CSSStyleDeclaration.prototype.removeProperty = removeProperty; 
 }); 

Error associated with the above case:

Until the actual error is identified, we can simply add a guard to prevent them from occuring.

Steps to Reproduce

I will present the steps to reproduce the effect. However, I couldn't reproduce the cause.

1. Setup rrweb.
2. Trigger error e.g. by adding a line win.CSSStyleSheet = undefined above this line:
   

   rrweb/packages/rrweb/src/record/observer.ts

   Line 862 in b2460a4

    win.CSSStyleSheet.prototype.insertRule = insertRule; 

3. Get errors in console.

Testcase Gist URL

No response

Additional Information

No response

[Joseph Mathew]

@eoghanmurray Can you please take a look into this issue when you have some time?

[Eoghan Murray]

You could more easily submit a PR than me given the effort required in recreating any given issue (e.g. I don't generally use the regular replayer).
I imagine the win reference is defunct as iframe has been detached from the dom or something, but you'll only know if you check; a debugger breakpoint in the code at the point where the error is thrown or use the 'break on all errors' option in your browser dev tools. You should be able to figure out what bit is not defined; you'll be able to put together a PR with the right type of guard. Even better would be to include a test case in the PR, but that is probably overkill in this case.