assets + stylesheet assets

[eoghanmurray]

Medium to large enhancement to rrweb, building upon #1239

Please review #1437 first as this also builds upon that PR (which can be merged before #1239)

---

Asset Events

Assets are a new type of event that embody a serialized version of a http resource captured during snapshotting. Some examples are images, media files and stylesheets. Resources can be fetched externally (from cache) in the case of a href, or internally for blob: urls and same-origin stylesheets. Asset events are emitted subsequent to either a FullSnapshot or an IncrementalSnapshot (mutation), and although they may have a later timestamp, during replay they are rebuilt as part of the snapshot that they are associated with. In the case where e.g. a stylesheet is referenced at the time of a FullSnapshot, but hasn't been downloaded yet, there can be a subsequent mutation event with a later timestamp which, along with the asset event, can recreate the experience of a network-delayed load of the stylesheet.

Assets to mitigate stylesheet processing cost

In the case of stylesheets, rrweb does some record-time processing in order to serialize the css rules which had a negative effect on the initial page loading times and how quickly the FullSnapshot was taken (see https://pagespeed.web.dev/). These are now taken out of the main thread and processed asynchronously to be emitted (up to processStylesheetsWithin ms) later. There is no corresponding delay on the replay side so long as the stylesheet has been successfully emitted.

Asset Capture Configuration

The captureAssets configuration option allows you to customize the asset capture process. It is an object with the following properties:

• objectURLs (default: true): This property specifies whether to capture same-origin blob: assets using object URLs. Object URLs are created using the URL.createObjectURL() method. Setting objectURLs to true enables the capture of object URLs.

• origins (default: false): This property determines which origins to capture assets from. It can have the following values:

  • false or []: Disables capturing any assets apart from object URLs, stylesheets (unless set to false) and images (if that setting is turned on).
  • true: Captures assets from all origins.
  • [origin1, origin2, ...]: Captures assets only from the specified origins. For example, origins: ['https://s3.example.com/'] captures all assets from the origin https://s3.example.com/.

• images (default: false or true if inlineImages is true in rrweb.record config): When set, this option turns on asset capturing for all images irrespective of their origin. Unless this configuration option is explicitly set to false, images may still be captured if their src url matches the origins setting above.

• stylesheets (default: 'without-fetch'): When set to true, this turns on capturing of all stylesheets and style elements via the asset system irrespective of origin. The default of 'without-fetch' is designed to match with the previous inlineStylesheet behaviour, whereas the true value allows capturing of stylesheets which are otherwise inaccessible due to CORS restrictions to be captured via a fetch call, which will normally use the browser cache. Unless this is explicitly set to false, a stylesheet will be captured if it matches via the origins config above.

• stylesheetsRuleThreshold (default: 0): only invoke the asset system for stylesheets with more than this number of rules. Defaults to zero (rather than say 100) as it only looks at the 'outer' rules (e.g. could have a single media rule which nests 1000s of sub rules). This default may be increased based on feedback.

• processStylesheetsWithin (default: 2000): This property defines the maximum time in milliseconds that the browser should delay before processing stylesheets. Inline <style> elements will be processed within half this value. Lower this value if you wish to improve the odds that short 'bounce' visits will emit the asset before visitor unloads page. Set to zero or a negative number to process stylesheets synchronously, which can cause poor scores on e.g. https://pagespeed.web.dev/ ("Third-party code blocked the main thread").

[changeset-bot]

🦋 Changeset detected

Latest commit: 1647e05

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
rrweb-snapshot	Major
rrweb	Major
rrdom	Major
@rrweb/types	Major
@rrweb/rrweb-plugin-canvas-webrtc-record	Major
@rrweb/rrweb-plugin-canvas-webrtc-replay	Major
@rrweb/rrweb-plugin-console-record	Major
@rrweb/rrweb-plugin-console-replay	Major
@rrweb/rrweb-plugin-sequential-id-record	Major
@rrweb/rrweb-plugin-sequential-id-replay	Major
rrdom-nodejs	Major
rrweb-player	Major
@rrweb/all	Major
@rrweb/replay	Major
@rrweb/record	Major
@rrweb/packer	Major
@rrweb/utils	Major
@rrweb/web-extension	Major
rrvideo	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jeffdnguyen]

For a style tag that imports a stylesheet that has a import rule. The href here would be incorrect for any urls imported in the nested stylesheet.

In the example below I would expect absoluteToStylesheet to return something like url(\"https://local.pendo.io:8081/browser-tests/temp-resources/Vorname.otf\")

but instead I get something like url(\"https://local.pendo.io:8081/browser-tests/guides/Vorname.ttf\")

[eoghanmurray]

Oh that's a great catch; would it be possible to port over a simplified version of that test?

I can't quite figure out whether this was an issue before (and I haven't come across the code to import nested stylesheets during this PR — if you know where that is, please let me know!)

[jeffdnguyen]

Digging a little more, I honestly think this is an existing issue. From my understanding when we call absoluteToStylesheet we make the assumption that any URLs inside of a style tag must share the same filepath as the document the style tag is on. sheetBaseHref in the PR here, getHref() on master.

Unless you'd like to handle it here, I would be more than happy to open up a bug to continue digging into this and possibly even take a crack at fixing this.

[jeffdnguyen]

Ah I apologize, I misspoke. I still think the issue has been around for awhile, but is surfaced here because we started checking all style tags instead of just empty ones. Just wanted to clarify!

[eoghanmurray]

We've always been inlining <style> tags, just that previously the serialization happened in serializeTextNode, whereas this PR consolidates all the logic up to the serializeElementNode level.

OK so I believe this all happens because we can recurse into rule.styleSheet when we encounter an @import rule ... but we call absoluteToStylesheet with a single outer href after the stringification.

I reckon this is a long standing issue, so best to open a new issue, or submit a test case as a new PR independently of this one to see if it fails on current master.

It'd be easier (for me) to fix it after merging this PR due to the changes to the code (e.g. stringifyStylesheet has been renamed to stringifyCssRules) however we can do the fix in both branches if this one takes too long to merge.

If I've identified the problem correctly, the fix would be to pass down a current baseHref to stringifyCssRules, so that it does the url() rewrite during stringification, and also so that we can change the href as we recurse through the tree.

[jeffdnguyen]

I think you nailed and that we're on the same page here. Making that change I'm getting the correct expected response. I've opened up a PR, but still need to create a proper test case.

[Juice10]

Note to self, we should pull these type changes into their own PR, to ease the release & maintenance of this PR. Especially where things have been moved from rrweb-snapshot to @rrweb/types