[Bug]: Error with window.CSSStyleSheet being undefined in iframes

[mydea]

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

v1.1.3 (also tried 2.x, with same outcome)

Expected Behavior

An error in rrweb setup (specifically, the monkey patching of window.CSSStyleSheet) should be caught.

Actual Behavior

Some users have reported getting these errors in their app:

TypeError: Cannot read properties of undefined (reading 'prototype')
  at styleSheetObserver(webpack://frontend/../node_modules/rrweb/es/rrweb/packages/rrweb/src/record/observer.js:382:27)
  at h(webpack://frontend/../node_modules/rrweb/es/rrweb/packages/rrweb/src/record/observer.js:657:9)
  at ? (webpack://frontend/../node_modules/rrweb/es/rrweb/packages/rrweb/src/record/index.js:348:54)
  at Array.forEach(<anonymous>)
  at stopRecording(webpack://frontend/../node_modules/rrweb/es/rrweb/packages/rrweb/src/record/index.js:348:24)

Which is triggered ~ here:

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

Line 540 in ad9bc3e

win.CSSStyleSheet.prototype.insertRule = function (

It seems quite weird to me why this is happening... After some playing around, I could pin it down to probably happening in some iframe.

I "forced" my local app via window.CSSStyleSheet = undefined to trigger this error, and found that in the main app it is actually handled by this code: https://github.com/rrweb-io/rrweb/blob/rrweb-snapshot%401.1.14/packages/rrweb/src/record/index.ts#L491

However, once I add an iframe to the page, it is not caught by this try-catch block, as it is actually happening somewhere in a callback (I guess e.g. https://github.com/rrweb-io/rrweb/blob/rrweb-snapshot%401.1.14/packages/rrweb/src/record/index.ts#L457)

Would it make sense to wrap all occurrences of observe() in such a try-catch? If that makes sense, I'd be happy to try to write up a PR as well.

Alternatively, I could also see value in an option to disable the parsing for (certain) iframes. As they can be a bit unpredictable and hard to control in some cases 😬

Steps to Reproduce

• Setup rrweb
• trigger error e.g. by adding a line win.CSSStyleSheet = undefined above this line:

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

  Line 539 in 2a80949

  const insertRule = win.CSSStyleSheet.prototype.insertRule;

• Get errors in console

Testcase Gist URL

No response

Additional Information

No response