Prepare browser client for next release#1848
Draft
Juice10 wants to merge 9 commits into
Draft
Conversation
🦋 Changeset detectedLatest commit: a13c470 The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 packages
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 |
Juice10
force-pushed
the
codex/browser-client-next-readiness
branch
from
865f7af to
252e13c
Compare
Juice10
force-pushed
the
codex/browser-client-next-readiness
branch
from
fb91407 to
a13c470
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR prepares the repo (on the next prerelease branch) for the upcoming release by introducing end-to-end “asset capture” support across recording, snapshotting, replay, shared types, and the @rrweb/browser-client defaults/docs/tests.
Changes:
- Add
captureAssetsplumbing + types, emitAssetevents, and trackcapturedAssetStatusesonFullSnapshotfor stylesheet/asset-aware replay. - Implement replay-side asset rebuilding (including stylesheet rebuilding and captured-attribute handling) plus new rrweb/rrweb-snapshot test coverage and fixtures.
- Update
@rrweb/browser-clientdefaults, docs, and integration tests; plus build/release plumbing updates (Turbo env hashing, workspace refs, changeset).
Reviewed changes
Copilot reviewed 38 out of 52 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| turbo.json | Include commit hash env vars in Turbo global/task env hashing for reproducible metadata. |
| tsconfig.json | Add packages/browser-client as a TS project reference. |
| packages/types/src/index.ts | Introduce shared asset-capture types (captureAssetsParam, assetStatus, asset, replay asset manager interfaces). |
| packages/rrweb/src/types.ts | Wire captureAssets + legacy compatibility types into recorder/replayer internal params. |
| packages/rrweb/src/record/index.ts | Implement captureAssets defaults/mapping from legacy options; emit Asset events + capturedAssetStatuses on full snapshots. |
| packages/rrweb/src/record/mutation.ts | Capture assets during mutations; propagate captured stylesheet attrs; adjust style text handling during async processing. |
| packages/rrweb/src/record/observers/asset-manager.ts | New recorder-side AssetManager for capturing blobs/CSS and emitting asset events/statuses. |
| packages/rrweb/src/replay/machine.ts | Add live-mode buffering to delay full snapshot rendering until awaited stylesheet assets arrive (to avoid FOUC). |
| packages/rrweb/src/replay/index.ts | Integrate replay AssetManager: preload assets, rewrite captured attributes, and handle EventType.Asset. |
| packages/rrweb/src/replay/asset-manager/index.ts | New replay-side AssetManager to rebuild assets (object URLs + CSS text) and manage captured attributes. |
| packages/rrweb/src/replay/asset-manager/update-srcset.ts | Helper to update srcset entries as assets load. |
| packages/rrweb/test/replay/asset-unit.test.ts | New unit tests for replay AssetManager behavior (loading/failed/srcset/stylesheets/live mode). |
| packages/rrweb/test/replay/asset-integration.test.ts | New puppeteer-based integration tests validating asset application + stylesheet waiting behavior. |
| packages/rrweb/test/replay/fixtures/assets.ts | New replay fixture including captured assets/statuses + asset events. |
| packages/rrweb/test/replay/fixtures/assets-mutation.ts | New replay fixture for mutation-driven captured asset updates. |
| packages/rrweb/test/replay/fixtures/assets-src-changed-before-asset-loaded.ts | New replay fixture covering live-mode src changes while assets are loading. |
| packages/rrweb/test/replay/fixtures/assets-body-inline-style.ts | New replay fixture for inline <style> assets inside body. |
| packages/rrweb/test/record/asset.test.ts | Large new recorder integration suite for object URLs, origins, stylesheets, timestamps, failures, etc. |
| packages/rrweb/test/html/assets/subtitles.vtt | Add a VTT fixture for track/subtitle asset capture tests. |
| packages/rrweb/README.md | Link to the new asset capture recipe docs and clarify legacy compatibility. |
| packages/rrweb-snapshot/src/utils.ts | Add asset-capture utilities (shouldCaptureAsset, capturable attr map, stringifyCssRules, helpers). |
| packages/rrweb-snapshot/src/snapshot.ts | Detect capturable attributes, emit onAssetDetected, add stylesheet style-id tracking + iframe recursion adjustments. |
| packages/rrweb-snapshot/src/index.ts | Export new snapshot utilities (getHref, getSourcesFromSrcset). |
| packages/rrweb-snapshot/test/utils.test.ts | Add unit tests for shouldCaptureAsset. |
| packages/rrweb-snapshot/test/snapshot.test.ts | Add tests asserting correct onAssetDetected behavior + captured attribute serialization. |
| packages/browser-client/src/index.ts | Default to captureAssets.stylesheets: 'without-fetch' (unless caller overrides / legacy inlineStylesheet provided). |
| packages/browser-client/test/load-diagnostics.test.ts | Add coverage for browser-client asset-capture defaults and legacy mapping behavior. |
| packages/browser-client/test/integration.test.ts | Extend integration tests to verify asset events over WS + HTTP fallback and split public/read keys. |
| packages/browser-client/test/record.html | Update example script-tag config to strict JSON and safe placeholder keys. |
| packages/browser-client/test/autostart.html | Update autostart example to strict JSON format. |
| packages/browser-client/README.md | Document asset-capture defaults and test env key split. |
| packages/browser-client/.env.example | Add VITE_TEST_PUBLIC_API_KEY / VITE_TEST_READ_API_KEY examples + compatibility fallback. |
| guide.md | Document new captureAssets option and legacy mapping in the main guide. |
| guide.zh_CN.md | Document new captureAssets option and legacy mapping in the CN guide. |
| docs/recipes/index.md | Add an “Asset Capture” recipe entry. |
| docs/recipes/index.zh_CN.md | Add a CN “Asset Capture” recipe entry. |
| docs/recipes/assets.md | New asset capture recipe documentation (EN). |
| docs/recipes/assets.zh_CN.md | New asset capture recipe documentation (CN). |
| .changeset/brave-browsers-remember.md | Changeset for patch releases across affected packages. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+15
to
+21
| // from https://stackoverflow.com/a/6969486/543604 | ||
| const escapedUrlToReplace = urlToReplace.replace( | ||
| /[.*+?^${}()|[\]\\]/g, | ||
| '\\$&', | ||
| ); | ||
| const matcher = new RegExp(`(?<=^|[\\s,])${escapedUrlToReplace}(?=[\\s,]|$)`); | ||
| const newSrcset = expectedValue.replace(matcher, newURL); |
Comment on lines
+1100
to
+1106
| if (captureAssets.stylesheets === undefined) { | ||
| if (inlineStylesheet) { | ||
| captureAssets.stylesheets = 'without-fetch'; | ||
| } else { | ||
| captureAssets.stylesheets = false; | ||
| } | ||
| } |
Comment on lines
+296
to
+316
| const flushAddEventQueue = () => { | ||
| addEventQueueTimeout = -1; | ||
| while (addEventQueue.length) { | ||
| castOrScheduleEvent(addEventQueue.shift()!); | ||
| } | ||
| }; | ||
|
|
||
| if (event.type === EventType.Asset && addEventQueueTimeout) { | ||
| let matchUrl = event.data.url; | ||
| if (matchUrl.startsWith('rr_css_text')) { | ||
| matchUrl = `${awaitAssetsHref}#${matchUrl}`; | ||
| } | ||
| awaitAssets.delete(matchUrl); | ||
| } | ||
| if (addEventQueue.length) { | ||
| addEventQueue.push(event); | ||
| if (awaitAssets.size === 0) { | ||
| clearTimeout(addEventQueueTimeout); | ||
| flushAddEventQueue(); | ||
| } | ||
| } else { |
Comment on lines
+141
to
+143
| } else if (el.getAttribute('media') !== null) { | ||
| const linkAppliedQuery = matchMedia(el.getAttribute('media') as string); | ||
| if (!linkAppliedQuery.matches) { |
Comment on lines
+267
to
+269
| requestIdleCallback(processStylesheet, { | ||
| timeout, | ||
| }); |
Comment on lines
+981
to
+983
| // to fix: assets can be emitted in either order | ||
| expect(assetEvents).toMatchObject(expected); | ||
| }); |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
nextprerelease branch and the refreshed assets work.captureAssetssupport across rrweb recording, snapshotting, replay, and shared types.packages/browser-clientto release plumbing and Turbo build metadata env hashing so browser-client builds include fresh commit metadata.@rrweb/browser-clientfrom the temporaryinlineStylesheetshim tocaptureAssets.stylesheets: 'without-fetch'by default while preserving caller-providedcaptureAssetsand legacyinlineStylesheetcompatibility.Branch setup
next, notmaster.nextcarries.changeset/pre.jsonwithtag: "next"so this payload can release on the prerelease channel.master.Verification
Previously run before retargeting:
yarn workspace @rrweb/types check-typesyarn workspace rrweb-snapshot check-typesyarn workspace rrweb check-typesyarn workspace @rrweb/browser-client check-typesyarn workspace @rrweb/browser-client lintyarn workspace @rrweb/browser-client test(integration tests skipped locally because API keys were not set)yarn workspace rrweb vitest run test/record/asset.test.ts test/replay/asset-unit.test.ts test/replay/asset-integration.test.tsgit diff --checkRe-run after rebasing onto
next:yarn workspace @rrweb/browser-client check-typesyarn workspace @rrweb/browser-client lintyarn workspace @rrweb/browser-client vitest run test/load-diagnostics.test.tsgit diff --check