-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
assets + stylesheet assets #1475
Open
eoghanmurray
wants to merge
183
commits into
rrweb-io:master
Choose a base branch
from
eoghanmurray:stylesheet-assets
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 1 commit
Commits
Show all changes
183 commits
Select commit
Hold shift + click to select a range
2b58e8d
Add Asset event type and capture assets
Juice10 7acc779
Add test to prove player works
Juice10 608ba0e
Rename `assetCaptureConfig` to `assetCapture`
Juice10 b20c8d5
Document `assetCapture` config
Juice10 ad775d8
Create asset event for assets that failed to load
Juice10 1294549
Move types from rrweb-snapshot to @rrweb/types
Juice10 0b18d21
WIP asset manager for replay
Juice10 2a92a9f
Add placeholder tests
Juice10 150396a
Fix image source attribute in rebuild function
Juice10 4a0dd26
Update path in tsconfig.json
Juice10 08114ee
Fix asset loading in Replayer
Juice10 bee80ed
Add todo tests
Juice10 c65dd0d
Add asset mutation events for replayer test
Juice10 9e5fb47
Add replay for cached asset on attribute changes
Juice10 d8ae854
Fix syntax error
Juice10 e2b181a
Move assetCapture params to @rrweb/types and add them to meta events
Juice10 a49cc54
Add asset capture config to meta events
Juice10 a5097a7
NodeType was moved to @rrweb/types
Juice10 f33f8ab
Upgrade jest and rollup in rrweb-snapshot
Juice10 dff274b
Add check types
Juice10 3802bd5
Update snapshots to include assetCapture settings
Juice10 5436839
Mark `inlineImages` as deprecated in favor of `assetCapture`
Juice10 60d1b42
Fix rrdom build
Juice10 561dcda
Fix deprecated test
Juice10 973222b
Rename `assetCapture` to `captureAssets`
Juice10 ee56ec5
Remove console.log statements from AssetManager
Juice10 e96793e
Rename assetCapture to captureAssets in rrweb test
Juice10 15eda9b
Check if url is of cacheable origin
Juice10 33030bc
Test: Add captureAssets config to meta event
Juice10 f21787b
object urls aren't stable so lets remove them
Juice10 69d0ade
inlineImages should work next to captureAssets for now
Juice10 b076708
Fix asset caching bug
Juice10 60b8bb1
captureAssets on live-stream by default
Juice10 20cd37e
Fix asset URLs in events file
Juice10 23f046c
Update deprecated inlineImages option to use
Juice10 a66e901
Deprecate inlineImage config
Juice10 ec55646
Update snapshot to reflect current captureAssets
Juice10 3bdc6c3
Make test less flaky
Juice10 3f45acb
Cache attribute support for BODY, TABLE,
Juice10 fa109af
Remove unused 'inlineImages' option
Juice10 dcb6d87
Refactor AssetManager constructor signature
Juice10 36dd426
Remove console.log statements in asset.test.ts
Juice10 2509e61
Refactor reset method signature to accept optional
Juice10 2d49f2a
Fix deserialized size comparison in deserializeArg
Juice10 40d0513
Apply formatting changes
Juice10 6201623
Fix asset manager to only load assets from
Juice10 4f2c30d
Update defaultPort in startServer function
Juice10 66a8438
Make test more reliable
Juice10 f723f72
Add failing test for src attribute
Juice10 0dc35d4
Remove failed asset event
Juice10 a75c8c6
Add support for asset manager in rrdom
Juice10 ffb6daf
Change asset manager path
Juice10 25184e7
Fix import path for AssetManager in asset-unit.test.ts
Juice10 83a3ed1
Move isAttributeCacheable tests to rrweb-snapshot
Juice10 be1b471
Make assetManager optional
Juice10 480f99c
upgrade rrdom-nodejs to jest 29
Juice10 ba20659
fixup! Upgrade jest and rollup in rrweb-snapshot
eoghanmurray 53f448b
Update Jest and ts-jest versions to 29 in rrvideo
Juice10 1491719
Following https://stackoverflow.com/a/64167731 on rebas
eoghanmurray f689be1
Following https://stackoverflow.com/a/64167731 on rebase #2
eoghanmurray 43d4256
Add esModuleInterop and allowSyntheticDefaultImports to tsconfig.json
Juice10 bf3e0fe
Add support for updating srcset attribute in
Juice10 9b27177
Add support for SVG elements in AssetManager
Juice10 0bd373c
Drop support for caching xlink:href attributes
Juice10 6ffcc67
Remove console.log statement in
Juice10 04d806e
Linux and Mac generate slightly different screenshots
Juice10 6b09ff3
Remove syntax error
Juice10 6b9353a
Add wait for RAF before evaluating snapshots
Juice10 7b8358e
Changeset: Added support for Asset Event and capturing many
Juice10 b45b5cf
fixup! Add support for updating srcset attribute in AssetManager
eoghanmurray ebe0d25
Update puppeteer version in package.json
Juice10 e678f46
Fix cross-origin iframe message forwarding test
Juice10 2181c25
Make test more robust
Juice10 548bd24
Deprecate `inlineImages` and introduce `captureAssets` option
Juice10 968f4fe
Docs: add examples to `getUrlsFromSrcset`
Juice10 6fd25a2
Revert accidental change to `backToNormal`
Juice10 3b8b974
Move @rrweb/types to devDependencies for rrweb-snapshot
Juice10 eb39d08
Remove console.log statements in asset-integration.test.ts
Juice10 68e7815
Update packages/rrweb/src/replay/asset-manager/index.ts
Juice10 4d3ba68
Delay call until all attributes are present on the new node, in case …
eoghanmurray 8ca75f8
Rename Cacheable -> Capturable
eoghanmurray 8de02d1
Apply formatting changes
Juice10 af547a3
Apply formatting changes
Juice10 f9c4f6c
Apply formatting changes
Juice10 00cd080
Trigger CI again
Juice10 c833878
Apply formatting changes
Juice10 c7eeb1e
Need to import NodeType directly, not working after some combination …
eoghanmurray 6f02664
Fix typo in deprecated test
eoghanmurray 1f55cee
Make test less flaky
Juice10 4d884d6
add @types/prettier dependency
Juice10 8fc8837
Indicate the presence of deferred assets using new `rr_captured_*` at…
eoghanmurray 9556922
Revert attributes in non-live mode and ensure this happens when we ca…
eoghanmurray 7c5beef
Only record certain iframes as assets as we don't want to override th…
eoghanmurray a561c33
Fixup: we don't need template strings here
eoghanmurray 134374f
Ensure we correctly distinguish between html <iframes> and other exot…
eoghanmurray ed0d5ab
Bump timeouts here as I was getting failures when running whole test …
eoghanmurray d3534be
Add an `asset` type which includes the element; a bit of prep work fo…
eoghanmurray 8a06c49
This function was replaced by getSourcesFromSrcset which ultimately d…
eoghanmurray bb33dba
Refactor and prepare for some changes: Deal with the difference betwe…
eoghanmurray cae9720
Create assetStatus type as per Justin's request
eoghanmurray e39ee96
Fix types as per suggestions from code review
Juice10 4429182
Update packages/rrweb/src/replay/canvas/2d.ts
Juice10 2ada9a1
Don't rename attrs of assets which will be refused according to initi…
eoghanmurray 7e17722
New config option inlineStylesheet='all' in order to fetch stylesheet…
eoghanmurray 77d8a83
Simplify onAssetDetected function signature
eoghanmurray 3254dec
Don't double capture blobs as _cssText and an asset. Fixes test 'capt…
eoghanmurray f4a88f5
Prefer to inlineStylesheets using Assets so that we can take advantag…
eoghanmurray 1c78feb
No need to search through document.styleSheets as the sheet property …
eoghanmurray bbec8e8
Improvements to comments on buildStyleNode (don't want to rebase as i…
eoghanmurray 50d4953
Capture <style> element css via an asset event to avoid main thread p…
eoghanmurray 578bcdf
Add a slight delay as per #1455
eoghanmurray 7bc516d
Allow certain assets to be captured synchronously during mutation
eoghanmurray d03a53c
Add setting to control how quickly stylesheet assets get emitted - so…
eoghanmurray 3fcbc79
Don't queue up asset callbacks twice; was happening after `replayer.p…
eoghanmurray 396dd0c
We can rebuild styles immediately without the async/promise delay tha…
eoghanmurray 84618b7
When we rebuild styles immediately from a snapshot, ensure we are cor…
eoghanmurray 91a1e1d
Didn't realize we can use the 'as' keyword to treat an rrdom element …
eoghanmurray d555c09
Fix up an issue with the assumption that origins applies only to images
eoghanmurray ada0769
Restore `inlineImages` as a first class config option which bypasses …
eoghanmurray 6554bf1
Remove tests that are duplicated minus the 'if inlineImages is on' pa…
eoghanmurray a6b520b
Don't emit style mutations if we haven't serialized the style sheet y…
eoghanmurray 8f3c65d
Replicate the 'removing style elements' test but with an asset
eoghanmurray eaa0f09
Catch and fix omission of absoluteToStylesheet processing on style te…
eoghanmurray a912e16
Add a try/catch here as we may not be reading anchor.href
eoghanmurray dea66b5
Explore how we capture assets that have disappeared from the DOM
eoghanmurray 2482503
Add some notes after considering changing these to use assets
eoghanmurray b1e7ab4
Add explanation as to why we are patching createObjectURL
eoghanmurray 61e5fba
Idea from Justin: Store cssText as an array rather than with the extr…
eoghanmurray a57bc5c
Allow usage of requestIdleCallback to be turned off altogether by set…
eoghanmurray 019b44e
requestIdleCallback: Process inline <style> elements before <link rel…
eoghanmurray 0a42bdc
Simplify by passing the inlineStylesheets config setting around as pa…
eoghanmurray cdb2363
These settings are not 'inlining' in the snapshot but rather producin…
eoghanmurray 9fa0289
Transfer the legacy default setting into a special 'without-fetch' in…
eoghanmurray 433e93c
Enable all capturing of stylesheets via assets to be turned off
eoghanmurray 703b7f9
Add a setting to enable turning off of assets for smaller stylesheets…
eoghanmurray 44542a3
Properly handle a loading CORS stylesheet as a mutation + asset rathe…
eoghanmurray 5ebe721
Rewrite of assets.md and move out of recipes into core docs
eoghanmurray 999cc32
Apply formatting changes
eoghanmurray 18c44eb
Satisfy eslint
eoghanmurray 92dbf7f
Satisfy typescript by creating an Interface to acknowledge the extra …
eoghanmurray 6911010
Don't just re-assert 'detected' in the explanatory comment
eoghanmurray ed4fb11
Prefer waitForRAF over timeout as the latter operates in puppeteer ra…
eoghanmurray e0327f0
Update assets.zh_CN.md
YunFeng0817 5e43f37
Remove doubly added prettier reference
eoghanmurray ad7ce45
Fixup expected server url; presumably this is a side effect of switch…
eoghanmurray 157a256
Fixup test: maybe vite doesn't incorrectly produce this dupe?
eoghanmurray 6763c08
Continue fixes from #1510
eoghanmurray 6bd9b47
Extra pause needed after switch from jest to vitest, when running tes…
eoghanmurray f3fa35d
Fixups to imports; I'm not sure where this all went wrong in the reba…
eoghanmurray ec60cef
fixup! Caught a case where a text mutation, which bypasses `_cssText`…
eoghanmurray 2d5afc4
This was removed in single-style-capture but 'reintroduced' in this h…
eoghanmurray 8aa7388
Fix that the `false` default on `shouldIgnoreAssets` should have been…
eoghanmurray c71393e
Fix that we would have tried to capture an asset with a malformed url…
eoghanmurray c12e649
Honour the 'omits css contents for asset managed stylesheet' test:
eoghanmurray 403313c
Improve consistency in terms of where in the test the asset appears
eoghanmurray d1ca7ac
Apply formatting changes
eoghanmurray 7f4aaca
Prior to this PR, we weren't previously storing blank _cssText; could…
eoghanmurray 3faa4de
Improve test reliability
eoghanmurray 084bf88
Think we need tighter processing for the tests to pass in the CI - pr…
eoghanmurray 9cad5cb
These tests were showing variation in CI
eoghanmurray b73ad96
fixup! Move types from rrweb-snapshot to @rrweb/types
eoghanmurray 30ffbfb
fixup! Add esModuleInterop and allowSyntheticDefaultImports to tsconf…
eoghanmurray 7a87075
fixup! Move types from rrweb-snapshot to @rrweb/types
eoghanmurray 27cab92
Unknown changes to yarn.lock
eoghanmurray f86f182
fixup! Move types from rrweb-snapshot to @rrweb/types
eoghanmurray c7edb29
Apply formatting changes
eoghanmurray faad2d5
Add a queueing mechanism so that in Live Mode we don't render full sn…
eoghanmurray 8aa60b6
assetCount would not suffice if multiple FullSnapshots were present i…
eoghanmurray 8f82519
Satisfy typings
eoghanmurray b42878b
Apply formatting changes
eoghanmurray ab90b43
Mark where I think the assetManager resets were supposed to happen as…
eoghanmurray ba28b86
More accurate setting of 'allAdded' based on how asset urls compare t…
eoghanmurray b130837
Allow duplicate assets to only be sent once per recording (e.g. in a …
eoghanmurray 08415f4
`buildNodeWithSN` still lives in rrweb-snapshot - correction for 'Mov…
eoghanmurray e41dd59
Fixup test: this test doesn't use the stylesheet assets so make sure …
eoghanmurray 274a575
Fixup test, there's no significance in asset ordering
eoghanmurray 557f5e5
Store the full URL for <style> assets as from a backend point of view…
eoghanmurray 7c219d8
The `allAdded` flag no longer made sense in the context of multiple f…
eoghanmurray e8a9b4a
Guard against scenarios where preloadAllAssets is not called (came up…
eoghanmurray 654e512
Fix for 'should list original url in non-live mode when asset never g…
eoghanmurray 8d01e6e
This was failing again, so have reverted
eoghanmurray 487b920
Don't capture small stylesheets as assets as timing issues are causin…
eoghanmurray 1647e05
Ensure blocking class is respected to prevent processing of assets
eoghanmurray File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
WIP asset manager for replay
- Loading branch information
commit 0b18d21ccbc1e9f15469b9f2f88d5ce13df591e8
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import type { RebuildAssetManagerInterface, assetEvent } from '@rrweb/types'; | ||
import { deserializeArg } from '../canvas/deserialize-args'; | ||
|
||
export default class AssetManager implements RebuildAssetManagerInterface { | ||
private originalToObjectURLMap: Map<string, string> = new Map(); | ||
private loadingURLs: Set<string> = new Set(); | ||
private failedURLs: Set<string> = new Set(); | ||
|
||
public async add(event: assetEvent) { | ||
const { data } = event; | ||
const { url, payload, failed } = { payload: false, failed: false, ...data }; | ||
if (failed) { | ||
this.failedURLs.add(url); | ||
return; | ||
} | ||
this.loadingURLs.add(url); | ||
|
||
// tracks if deserializing did anything, not really needed for AssetManager | ||
const status = { | ||
isUnchanged: true, | ||
}; | ||
|
||
// TODO: extract the logic only needed for assets from deserializeArg | ||
const result = (await deserializeArg(new Map(), null, status)(payload)) as | ||
| Blob | ||
| MediaSource; | ||
|
||
const objectURL = URL.createObjectURL(result); | ||
this.originalToObjectURLMap.set(url, objectURL); | ||
this.loadingURLs.delete(url); | ||
} | ||
|
||
public get( | ||
url: string, | ||
): | ||
| { status: 'loading' } | ||
| { status: 'loaded'; url: string } | ||
| { status: 'failed' } | ||
| { status: 'unknown' } { | ||
const result = this.originalToObjectURLMap.get(url); | ||
|
||
if (result) { | ||
return { | ||
status: 'loaded', | ||
url: result, | ||
}; | ||
} | ||
|
||
if (this.loadingURLs.has(url)) { | ||
return { | ||
status: 'loading', | ||
}; | ||
} | ||
|
||
if (this.failedURLs.has(url)) { | ||
return { | ||
status: 'failed', | ||
}; | ||
} | ||
|
||
return { | ||
status: 'unknown', | ||
}; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+10.5 KB
...ation-test-ts-replayer-asset-should-incorporate-assets-emitted-later-1-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
/** | ||
* @vitest-environment jsdom | ||
*/ | ||
|
||
import AssetManager from '../../src/replay/assets'; | ||
import { EventType, SerializedBlobArg, assetEvent } from '@rrweb/types'; | ||
import { vi } from 'vitest'; | ||
|
||
describe('AssetManager', () => { | ||
let assetManager: AssetManager; | ||
let useURLPolyfill = false; | ||
const examplePayload: SerializedBlobArg = { | ||
rr_type: 'Blob', | ||
type: 'image/png', | ||
data: [ | ||
{ | ||
rr_type: 'ArrayBuffer', | ||
base64: 'fake-base64-abcd', | ||
}, | ||
], | ||
}; | ||
|
||
beforeAll(() => { | ||
// https://github.com/jsdom/jsdom/issues/1721 | ||
if (typeof window.URL.createObjectURL === 'undefined') { | ||
useURLPolyfill = true; | ||
window.URL.createObjectURL = () => ''; | ||
} | ||
}); | ||
|
||
beforeEach(() => { | ||
assetManager = new AssetManager(); | ||
}); | ||
|
||
afterEach(() => { | ||
vi.restoreAllMocks(); | ||
}); | ||
|
||
afterAll(() => { | ||
if (useURLPolyfill) { | ||
delete (window.URL as any).createObjectURL; | ||
} | ||
}); | ||
|
||
it('should add an asset to the manager', async () => { | ||
const url = 'https://example.com/image.png'; | ||
|
||
const event: assetEvent = { | ||
type: EventType.Asset, | ||
data: { | ||
url, | ||
payload: examplePayload, | ||
}, | ||
}; | ||
const createObjectURLSpy = vi | ||
.spyOn(URL, 'createObjectURL') | ||
.mockReturnValue('objectURL'); | ||
|
||
await assetManager.add(event); | ||
|
||
expect(createObjectURLSpy).toHaveBeenCalledWith(expect.any(Blob)); | ||
expect(assetManager.get(url)).toEqual({ | ||
status: 'loaded', | ||
url: 'objectURL', | ||
}); | ||
}); | ||
|
||
it('should not add a failed asset to the manager', async () => { | ||
const url = 'https://example.com/image.png'; | ||
const event: assetEvent = { | ||
type: EventType.Asset, | ||
data: { url, failed: { message: 'failed to load file' } }, | ||
}; | ||
const createObjectURLSpy = vi.spyOn(URL, 'createObjectURL'); | ||
|
||
await assetManager.add(event); | ||
|
||
expect(createObjectURLSpy).not.toHaveBeenCalled(); | ||
expect(assetManager.get(url)).toEqual({ status: 'failed' }); | ||
}); | ||
|
||
it('should return the correct status for a loading asset', () => { | ||
const url = 'https://example.com/image.png'; | ||
const event: assetEvent = { | ||
type: EventType.Asset, | ||
data: { | ||
url, | ||
payload: examplePayload, | ||
}, | ||
}; | ||
void assetManager.add(event); | ||
|
||
expect(assetManager.get(url)).toEqual({ status: 'loading' }); | ||
}); | ||
|
||
it('should return the correct status for an unknown asset', () => { | ||
const url = 'https://example.com/image.png'; | ||
|
||
expect(assetManager.get(url)).toEqual({ status: 'unknown' }); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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