Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
197 commits
Select commit Hold shift + click to select a range
5353a89
fix typing issue
daibhin Nov 1, 2024
1775a5c
typed node
daibhin Nov 1, 2024
38877fe
Add Asset event type and capture assets
Juice10 Jun 8, 2023
5b994a7
Add test to prove player works
Juice10 Jun 8, 2023
78df5b0
Rename `assetCaptureConfig` to `assetCapture`
Juice10 Jun 9, 2023
171236d
Document `assetCapture` config
Juice10 Jun 9, 2023
7432ee6
Create asset event for assets that failed to load
Juice10 Jun 13, 2023
b8d6231
Move types from rrweb-snapshot to @rrweb/types
Juice10 Jun 13, 2023
8338c53
WIP asset manager for replay
Juice10 Jun 13, 2023
e78804c
Add placeholder tests
Juice10 Nov 23, 2023
fd512fe
Fix image source attribute in rebuild function
Juice10 Nov 23, 2023
6616f59
Update path in tsconfig.json
Juice10 Nov 23, 2023
32181e5
Fix asset loading in Replayer
Juice10 Nov 23, 2023
ae6c6c1
Add todo tests
Juice10 Nov 23, 2023
6c20cb5
Add asset mutation events for replayer test
Juice10 Nov 24, 2023
8e31b64
Add replay for cached asset on attribute changes
Juice10 Nov 24, 2023
2a841fa
Fix syntax error
Juice10 Nov 27, 2023
2b61f8b
Move assetCapture params to @rrweb/types and add them to meta events
Juice10 Nov 27, 2023
875d826
Add asset capture config to meta events
Juice10 Nov 27, 2023
1fef818
NodeType was moved to @rrweb/types
Juice10 Nov 27, 2023
1d5737d
Upgrade jest and rollup in rrweb-snapshot
Juice10 Nov 27, 2023
27c3823
Add check types
Juice10 Nov 27, 2023
48570a8
Update snapshots to include assetCapture settings
Juice10 Nov 28, 2023
26c14b9
Mark `inlineImages` as deprecated in favor of `assetCapture`
Juice10 Nov 28, 2023
ffffdde
Fix rrdom build
Juice10 Nov 28, 2023
95e7969
Fix deprecated test
Juice10 Nov 28, 2023
3dfb353
Rename `assetCapture` to `captureAssets`
Juice10 Nov 28, 2023
5199c54
Remove console.log statements from AssetManager
Juice10 Nov 28, 2023
69e053d
Rename assetCapture to captureAssets in rrweb test
Juice10 Nov 28, 2023
5703103
Check if url is of cacheable origin
Juice10 Nov 30, 2023
07864ac
Test: Add captureAssets config to meta event
Juice10 Nov 30, 2023
8d50cd9
object urls aren't stable so lets remove them
Juice10 Nov 30, 2023
0038b3f
inlineImages should work next to captureAssets for now
Juice10 Nov 30, 2023
8ac642b
Fix asset caching bug
Juice10 Dec 1, 2023
d5f62ee
captureAssets on live-stream by default
Juice10 Dec 1, 2023
7a8ae52
Fix asset URLs in events file
Juice10 Dec 1, 2023
c1cde07
Update deprecated inlineImages option to use
Juice10 Dec 4, 2023
6ffa2a8
Deprecate inlineImage config
Juice10 Dec 4, 2023
490b85f
Update snapshot to reflect current captureAssets
Juice10 Dec 4, 2023
f4194ce
Make test less flaky
Juice10 Dec 4, 2023
700910a
Cache attribute support for BODY, TABLE,
Juice10 Dec 4, 2023
e22fd68
Remove unused 'inlineImages' option
Juice10 Dec 4, 2023
b8809eb
Refactor AssetManager constructor signature
Juice10 Dec 4, 2023
0194b15
Remove console.log statements in asset.test.ts
Juice10 Dec 4, 2023
193aeaf
Refactor reset method signature to accept optional
Juice10 Dec 4, 2023
e27ff8c
Fix deserialized size comparison in deserializeArg
Juice10 Dec 4, 2023
b482eef
Apply formatting changes
Juice10 Dec 4, 2023
fc3d9ab
Fix asset manager to only load assets from
Juice10 Dec 4, 2023
aeeb59d
Update defaultPort in startServer function
Juice10 Dec 4, 2023
2ff2cc5
Make test more reliable
Juice10 Dec 4, 2023
5ebed82
Add failing test for src attribute
Juice10 Dec 11, 2023
7fe1892
Remove failed asset event
Juice10 Dec 11, 2023
82a0505
Add support for asset manager in rrdom
Juice10 Dec 12, 2023
fdb3459
Change asset manager path
Juice10 Dec 14, 2023
d231d3d
Fix import path for AssetManager in asset-unit.test.ts
Juice10 Dec 14, 2023
3a319e6
Move isAttributeCacheable tests to rrweb-snapshot
Juice10 Dec 14, 2023
58b236d
Make assetManager optional
Juice10 Dec 14, 2023
ca3963c
upgrade rrdom-nodejs to jest 29
Juice10 Dec 14, 2023
6e431f1
fixup! Upgrade jest and rollup in rrweb-snapshot
eoghanmurray Aug 6, 2024
5a5f508
Update Jest and ts-jest versions to 29 in rrvideo
Juice10 Dec 14, 2023
3d5c0c0
Following https://stackoverflow.com/a/64167731 on rebas
eoghanmurray Aug 6, 2024
413d6e3
Following https://stackoverflow.com/a/64167731 on rebase #2
eoghanmurray Aug 6, 2024
ed0e061
Add esModuleInterop and allowSyntheticDefaultImports to tsconfig.json
Juice10 Dec 14, 2023
4974abe
Add support for updating srcset attribute in
Juice10 Dec 15, 2023
d06763a
Add support for SVG elements in AssetManager
Juice10 Dec 15, 2023
ea14748
Drop support for caching xlink:href attributes
Juice10 Dec 15, 2023
1bb6698
Remove console.log statement in
Juice10 Dec 15, 2023
e65fe7b
Linux and Mac generate slightly different screenshots
Juice10 Dec 15, 2023
ab3c957
Remove syntax error
Juice10 Dec 15, 2023
31f3463
Add wait for RAF before evaluating snapshots
Juice10 Dec 15, 2023
1cd646c
Changeset: Added support for Asset Event and capturing many
Juice10 Dec 15, 2023
0443bea
Update puppeteer version in package.json
Juice10 Jan 16, 2024
08d70d4
Fix cross-origin iframe message forwarding test
Juice10 Jan 16, 2024
61e0436
Deprecate `inlineImages` and introduce `captureAssets` option
Juice10 Feb 5, 2024
57011ac
Docs: add examples to `getUrlsFromSrcset`
Juice10 Feb 5, 2024
58d031d
Revert accidental change to `backToNormal`
Juice10 Feb 5, 2024
3f5dd2a
Move @rrweb/types to devDependencies for rrweb-snapshot
Juice10 Feb 6, 2024
920200d
Remove console.log statements in asset-integration.test.ts
Juice10 Mar 18, 2024
7f9c7ee
Update packages/rrweb/src/replay/asset-manager/index.ts
Juice10 Mar 20, 2024
f89b2f3
Delay call until all attributes are present on the new node, in case …
eoghanmurray Mar 25, 2024
f7b86f9
Rename Cacheable -> Capturable
eoghanmurray Mar 25, 2024
9be5d61
Apply formatting changes
Juice10 May 22, 2024
19b3ffa
Apply formatting changes
Juice10 Jun 9, 2024
90c1dcf
Apply formatting changes
Juice10 Jun 9, 2024
5c7d763
Trigger CI again
Juice10 Jun 9, 2024
4d838b6
Apply formatting changes
Juice10 Jun 9, 2024
a4601d3
Fix typo in deprecated test
eoghanmurray Jun 18, 2024
fdbb986
Make test less flaky
Juice10 Dec 4, 2023
0ec4f68
add @types/prettier dependency
Juice10 Dec 14, 2023
1b44bda
Indicate the presence of deferred assets using new `rr_captured_*` at…
eoghanmurray Mar 25, 2024
bbad29d
Revert attributes in non-live mode and ensure this happens when we ca…
eoghanmurray Mar 27, 2024
27b4fa8
Only record certain iframes as assets as we don't want to override th…
eoghanmurray Mar 27, 2024
ad9dd5e
Fixup: we don't need template strings here
eoghanmurray Mar 28, 2024
964e39f
Ensure we correctly distinguish between html <iframes> and other exot…
eoghanmurray Mar 28, 2024
9d6855f
Bump timeouts here as I was getting failures when running whole test …
eoghanmurray Mar 28, 2024
baddf3a
Add an `asset` type which includes the element; a bit of prep work fo…
eoghanmurray Mar 28, 2024
8644442
This function was replaced by getSourcesFromSrcset which ultimately d…
eoghanmurray Apr 2, 2024
167d9eb
Refactor and prepare for some changes: Deal with the difference betwe…
eoghanmurray Apr 3, 2024
40fd1ca
Create assetStatus type as per Justin's request
eoghanmurray Apr 3, 2024
27bc896
Fix types as per suggestions from code review
Juice10 Apr 5, 2024
1b24c73
Update packages/rrweb/src/replay/canvas/2d.ts
Juice10 Apr 5, 2024
90a08f5
Don't rename attrs of assets which will be refused according to initi…
eoghanmurray Apr 22, 2024
3a9686a
New config option inlineStylesheet='all' in order to fetch stylesheet…
eoghanmurray Apr 24, 2024
00f8bba
Simplify onAssetDetected function signature
eoghanmurray Apr 25, 2024
5f25504
Don't double capture blobs as _cssText and an asset. Fixes test 'capt…
eoghanmurray Apr 25, 2024
d22e3e7
Prefer to inlineStylesheets using Assets so that we can take advantag…
eoghanmurray Apr 25, 2024
1049a29
No need to search through document.styleSheets as the sheet property …
eoghanmurray Apr 26, 2024
14ca4a8
Improvements to comments on buildStyleNode (don't want to rebase as i…
eoghanmurray May 1, 2024
cace913
Capture <style> element css via an asset event to avoid main thread p…
eoghanmurray May 2, 2024
e08f2eb
Add a slight delay as per #1455
eoghanmurray Apr 30, 2024
7396d9f
Allow certain assets to be captured synchronously during mutation
eoghanmurray Apr 30, 2024
1f9c791
Add setting to control how quickly stylesheet assets get emitted - so…
eoghanmurray May 1, 2024
7307d13
Don't queue up asset callbacks twice; was happening after `replayer.p…
eoghanmurray May 1, 2024
0fda9e4
We can rebuild styles immediately without the async/promise delay tha…
eoghanmurray May 1, 2024
de331ec
When we rebuild styles immediately from a snapshot, ensure we are cor…
eoghanmurray May 1, 2024
f135673
Didn't realize we can use the 'as' keyword to treat an rrdom element …
eoghanmurray May 1, 2024
9fec0e8
Fix up an issue with the assumption that origins applies only to images
eoghanmurray May 1, 2024
a5a6413
Restore `inlineImages` as a first class config option which bypasses …
eoghanmurray May 9, 2024
268ed1f
Remove tests that are duplicated minus the 'if inlineImages is on' pa…
eoghanmurray May 1, 2024
a392f06
Don't emit style mutations if we haven't serialized the style sheet y…
eoghanmurray May 1, 2024
902e315
Replicate the 'removing style elements' test but with an asset
eoghanmurray May 2, 2024
105de8e
Catch and fix omission of absoluteToStylesheet processing on style te…
eoghanmurray May 2, 2024
0f07e70
Add a try/catch here as we may not be reading anchor.href
eoghanmurray May 2, 2024
d9eadad
Explore how we capture assets that have disappeared from the DOM
eoghanmurray May 2, 2024
eb9a1d9
Add some notes after considering changing these to use assets
eoghanmurray May 3, 2024
04aa93f
Add explanation as to why we are patching createObjectURL
eoghanmurray May 3, 2024
09237e0
Idea from Justin: Store cssText as an array rather than with the extr…
eoghanmurray May 8, 2024
b4bfe48
Allow usage of requestIdleCallback to be turned off altogether by set…
eoghanmurray May 8, 2024
60f21c7
requestIdleCallback: Process inline <style> elements before <link rel…
eoghanmurray May 8, 2024
b504e84
Simplify by passing the inlineStylesheets config setting around as pa…
eoghanmurray May 9, 2024
f54f98c
These settings are not 'inlining' in the snapshot but rather producin…
eoghanmurray May 9, 2024
24a8ddc
Transfer the legacy default setting into a special 'without-fetch' in…
eoghanmurray May 9, 2024
305c02a
Enable all capturing of stylesheets via assets to be turned off
eoghanmurray May 9, 2024
21c64c5
Add a setting to enable turning off of assets for smaller stylesheets…
eoghanmurray May 13, 2024
39af6f6
Properly handle a loading CORS stylesheet as a mutation + asset rathe…
eoghanmurray May 13, 2024
2f0e1d1
Rewrite of assets.md and move out of recipes into core docs
eoghanmurray May 14, 2024
7a73944
Apply formatting changes
eoghanmurray May 14, 2024
d169821
Satisfy eslint
eoghanmurray May 15, 2024
90417b7
Satisfy typescript by creating an Interface to acknowledge the extra …
eoghanmurray May 16, 2024
87838ca
Don't just re-assert 'detected' in the explanatory comment
eoghanmurray May 20, 2024
b880204
Prefer waitForRAF over timeout as the latter operates in puppeteer ra…
eoghanmurray May 22, 2024
0c6a429
Update assets.zh_CN.md
YunFeng0817 May 22, 2024
5ac1433
Remove doubly added prettier reference
eoghanmurray Jun 18, 2024
36282e4
Fixup expected server url; presumably this is a side effect of switch…
eoghanmurray Jun 18, 2024
a1e412d
Fixup test: maybe vite doesn't incorrectly produce this dupe?
eoghanmurray Jun 18, 2024
92a7e66
Continue fixes from #1510
eoghanmurray Jun 18, 2024
2914573
Extra pause needed after switch from jest to vitest, when running tes…
eoghanmurray Jun 21, 2024
1316ce3
Fixups to imports; I'm not sure where this all went wrong in the reba…
eoghanmurray Jul 4, 2024
f747b54
fixup! Caught a case where a text mutation, which bypasses `_cssText`…
eoghanmurray Jul 10, 2024
216a1c5
This was removed in single-style-capture but 'reintroduced' in this h…
eoghanmurray Jul 10, 2024
5bb954b
Fix that the `false` default on `shouldIgnoreAssets` should have been…
eoghanmurray Jul 10, 2024
2a22b53
Fix that we would have tried to capture an asset with a malformed url…
eoghanmurray Jul 10, 2024
9940cbd
Honour the 'omits css contents for asset managed stylesheet' test:
eoghanmurray Jul 10, 2024
42a30d7
Improve consistency in terms of where in the test the asset appears
eoghanmurray Jul 10, 2024
7e231a2
Apply formatting changes
eoghanmurray Jul 10, 2024
1ae3827
Prior to this PR, we weren't previously storing blank _cssText; could…
eoghanmurray Jul 10, 2024
8851c22
Improve test reliability
eoghanmurray Jul 10, 2024
5a1ea62
Think we need tighter processing for the tests to pass in the CI - pr…
eoghanmurray Jul 10, 2024
756689f
These tests were showing variation in CI
eoghanmurray Jul 12, 2024
97ba6a6
fixup! Move types from rrweb-snapshot to @rrweb/types
eoghanmurray Aug 15, 2024
4c4385f
Unknown changes to yarn.lock
eoghanmurray Aug 15, 2024
57bc03a
Apply formatting changes
eoghanmurray Aug 20, 2024
3b837a3
Add a queueing mechanism so that in Live Mode we don't render full sn…
eoghanmurray Aug 20, 2024
c555fcb
assetCount would not suffice if multiple FullSnapshots were present i…
eoghanmurray Oct 11, 2024
1281598
Satisfy typings
eoghanmurray Oct 14, 2024
08bda2e
Apply formatting changes
eoghanmurray Oct 14, 2024
7f4f1c6
Mark where I think the assetManager resets were supposed to happen as…
eoghanmurray Oct 18, 2024
acd38a4
More accurate setting of 'allAdded' based on how asset urls compare t…
eoghanmurray Oct 18, 2024
df1e299
Allow duplicate assets to only be sent once per recording (e.g. in a …
eoghanmurray Oct 23, 2024
f2c82d2
Fixup test: this test doesn't use the stylesheet assets so make sure …
eoghanmurray Oct 25, 2024
3c93dde
Fixup test, there's no significance in asset ordering
eoghanmurray Oct 25, 2024
bceac9e
Store the full URL for <style> assets as from a backend point of view…
eoghanmurray Nov 8, 2024
ce01023
The `allAdded` flag no longer made sense in the context of multiple f…
eoghanmurray Nov 8, 2024
d68ccdf
Guard against scenarios where preloadAllAssets is not called (came up…
eoghanmurray Nov 13, 2024
e9bcf46
Fix for 'should list original url in non-live mode when asset never g…
eoghanmurray Nov 29, 2024
56b6eed
This was failing again, so have reverted
eoghanmurray Nov 29, 2024
a09acf3
Don't capture small stylesheets as assets as timing issues are causin…
eoghanmurray Nov 29, 2024
de94403
Ensure blocking class is respected to prevent processing of assets
eoghanmurray Dec 2, 2024
02dd546
Add settings for explicit control of whether to record video and audi…
eoghanmurray Dec 3, 2024
35950e9
Strip out base64 from asset events also so that they don't show up in…
eoghanmurray Feb 17, 2025
cfd968c
Allow video/audio/images to be explicitly turned off in order to over…
eoghanmurray Feb 20, 2025
d9342bd
Fix patch import
eoghanmurray Feb 20, 2025
7de0c3c
'callback' name was no longer obvious to me
eoghanmurray Feb 20, 2025
96db010
Add a test to check whether video blobs don't get captured by default
eoghanmurray Feb 20, 2025
5df2654
Fix that we were overriding the defaults with the empty object, and f…
eoghanmurray Feb 20, 2025
19c17cd
Fix camelCase error
eoghanmurray Feb 20, 2025
e1ef528
Refactor to avoid an eslint error and an extra call to parentNode
eoghanmurray Feb 20, 2025
19850f9
Fix some linting errors
eoghanmurray Feb 20, 2025
918c53f
Avoid a typescript 'Unsafe member access' error (even though it was a…
eoghanmurray Feb 24, 2025
71839d3
Try to fix: error TS7053: Element implicitly has an 'any' type becaus…
eoghanmurray Feb 25, 2025
3b129d5
Another attempt to placate eslint; there is no failure on my local co…
eoghanmurray Feb 25, 2025
6a77168
`.attributes` are no longer populated when an element is blocked afte…
eoghanmurray Feb 25, 2025
f8eeb63
Lack of requestIdleCallback on iOS was causing unexpected event emiss…
eoghanmurray Feb 27, 2025
dfe2e3b
Don't capture stylesheet Assets if they have a media attribute which …
eoghanmurray Mar 28, 2025
25927ee
As per #1657
eoghanmurray Aug 21, 2025
f6e6155
Fix bug where delayed <style> elements were not getting built
eoghanmurray Aug 21, 2025
a8e414e
Set AssetEvent timestamps such that they match the FullSnapshot or In…
eoghanmurray Apr 9, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/pretty-candles-chew.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"rrweb-snapshot": minor
"rrweb": minor
"rrdom": patch
"@rrweb/types": patch
---

Added support for Asset Event and capturing many different types of assets (not just img#src)
8 changes: 8 additions & 0 deletions .changeset/yellow-vans-protect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"rrweb-snapshot": major
"@rrweb/types": patch
---

`NodeType` enum was moved from rrweb-snapshot to @rrweb/types
The following types where moved from rrweb-snapshot to @rrweb/types: `documentNode`, `documentTypeNode`, `attributes`, `legacyAttributes`, `elementNode`, `textNode`, `cdataNode`, `commentNode`, `serializedNode`, `serializedNodeWithId` and `DataURLOptions`
`inlineImage` config option is deprecated and in `rrweb` is an alias for `captureAssets` config option
4 changes: 2 additions & 2 deletions .github/workflows/style-check.yml
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,12 @@ jobs:
contents: write
name: Format Code
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
with:
repository: ${{ github.event.pull_request.head.repo.full_name }}
ref: ${{ github.head_ref }}
- name: Setup Node
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: 'yarn'
Expand Down
70 changes: 70 additions & 0 deletions docs/assets.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# Asset Capture Methods & Configuration in rrweb

[rrweb](https://rrweb.io/) is a JavaScript library that allows you to record and replay user interactions on your website. It provides various configuration options for capturing assets (such as images) during the recording process. In this document, we will explore the different asset capture methods and their configuration options in rrweb.

## 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: `true` if `inlineImages` is true in rrweb.record config): When set to true, this option turns on asset capturing for all images irrespective of their origin. When set to false, no images will be captured even if the origin matches. By default images will be captured if their src url matches the `origins` setting above, including if the `origins` is set to `true`.

- `video` When set to true, this option turns on asset capturing for videos irrespective of their origin. When set to false, no videos will be captured even if the origin matches. By default videos will be captured if their src url matches the `origins` setting above, including if the `origins` is set to `true`.

- `audio` When set to true, this option turns on asset capturing for audio files irrespective of their origin. When set to false, no audio files will be captured even if the origin matches. By default audio files will be captured if their src url matches the `origins` setting above, including if the `origins` is set to `true`.

- `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. If a stylesheet matches via the `origins` config above, it will be captured irrespective of this config setting (either directly or via fetch).

- `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"), and also cause assets to be emitted with an earlier timestamp than the snapshot they are associated with.

## TypeScript Type Definition

Here is the TypeScript type definition for the `recordOptions` object, which includes the asset capture configuration options:

```typescript
export type recordOptions<T> = {
// Other configuration options...
captureAssets?: {
objectURLs: boolean;
origins: string[] | true | false;
images: boolean;
stylesheets: boolean | 'without-fetch';
processStylesheetsWithin: number;
stylesheetsRuleThreshold: number;
};
inlineImages?: boolean;
inlineStylesheet?: boolean;
// Other configuration options...
};
```

This type definition shows that `captureAssets` is an optional property of the `recordOptions` object. It contains the `objectURLs` and `origins` properties, which have the same meanings as described above.

## Inline Images

When set in rrweb.record, the previous `inlineImages` configuration option has been changed so that images are now captured using the asset system instead of being inlined into the snapshot. The previous implementation had a problem in that the snapshot was modified asynchronously after images were loaded/processed. hadn't loaded yet, and the snapshot may have already been emitted. When using rrwebSnapshot.snapshot directly, the previous inlining behaviour is still preserved.

## Inline Stylesheets

In rrweb.record the `inlineStylesheet` configuration option has been updated to use the asset system. When it is `true` (the default), stylesheets whose rules are accessible from a CORS point of view are captured as an asset instead of being inlined. There is also now an `inlineStylesheet: 'all'` option which is equivalent to `captureAssets.stylesheets: true`. When using rrwebSnapshot.snapshot directly, the previous inlining behaviour is still preserved.

## Conclusion

By configuring the `captureAssets` option in rrweb, you can control how assets like images are captured during the recording process. This allows you to customize which assets are included in the recorded interactions on your website.
40 changes: 40 additions & 0 deletions docs/assets.zh_CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# rrweb 中的录制静态资源的方法和配置

[rrweb](https://rrweb.io/) 是一个 JavaScript 库,允许您录制并回放您网页上的用户操作。它为录制静态资源(如图像)提供了各种配置选项。在本文档中,我们将探讨 rrweb 中不同的录制静态资源的方法及其配置选项。

## 内联图像(已弃用)

`inlineImages` 配置选项已被弃用,不应再使用。它存在一些问题,即重写已经发出的事件,这可能使您错过已发送到服务器的内联图像。相反,请使用 `captureAssets` 选项来配置静态资源录制。

## 录制静态资源配置

`captureAssets` 配置选项允许您自定义录制静态资源的过程。它是一个具有以下属性的对象:

- `objectURLs`(默认值:`true`):此属性指定是否使用 object URL 录制同源 `blob:` 资源。Object URL 是使用 `URL.createObjectURL()` 方法创建的。将 `objectURLs` 设置为 `true` 可以启用对象 URL 的录制。

- `origins`(默认值:`false`):此属性确定录制哪些域名的资源。它可以有以下值:
- `false` 或 `[]`:除了 Object URL 之外,不录制任何静态资源。
- `true`:从所有来源获取资源。
- `[origin1, origin2, ...]`:仅从指定的来源获取资源。例如,`origins: ['https://s3.example.com/']` 表示录制来自 `https://s3.example.com/` 的所有静态资源。

## TypeScript 类型定义

这是 `recordOptions` 对象的 TypeScript 类型定义,其中包括录制静态资源的配置选项:

```typescript
export type recordOptions<T> = {
// 其他配置选项...
captureAssets?: {
objectURLs: boolean;
origins: string[] | true | false;
};
inlineImages?: boolean; // 已弃用
// 其他配置选项...
};
```

这种类型定义表明 captureAssets 是 recordOptions 对象的一个可选属性。它包含 objectURLs 和 origins 属性,其含义与上述相同。

## 结论

通过在 rrweb 中配置 captureAssets 选项,您可以控制在记录过程中如何录制比如图像这样的静态资源。这允许你自定义在网页上录制的交互中包含哪些静态资源。
Loading
Loading