Skip to content
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

support recording canvas in iframe and shadow dom #1428

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

p-mazhnik
Copy link

@p-mazhnik p-mazhnik commented Mar 15, 2024

Resolves #1412, resolves #1081

Before

Red square is on the main page;
Green is inside the shadow dom on the main page;
Blue one is within the iframe;
Pink is inside the shadow dom within the iframe.

canvas-iframe-before.mov
After
canvas-iframe-after.mov

Key differences from existing PRs:

  • support for sampling: 'all' mode
  • ShadowDomManager is utilized for obtaining information about the shadow DOMs, rather than looping through all the elements on the page
  • support for exiting takeCanvasSnapshots loop on reset
  • tests

Copy link

changeset-bot bot commented Mar 15, 2024

🦋 Changeset detected

Latest commit: db60778

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

This PR includes changesets to release 8 packages
Name Type
rrweb Patch
rrweb-snapshot Patch
rrdom Patch
rrdom-nodejs Patch
rrweb-player Patch
@rrweb/types Patch
@rrweb/web-extension Patch
rrvideo Patch

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

# Conflicts:
#	packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@Juice10 Juice10 self-requested a review April 5, 2024 13:12
@Juice10 Juice10 self-assigned this Apr 5, 2024
billyvg added a commit to getsentry/rrweb that referenced this pull request May 29, 2024
Resolves getsentry/sentry-javascript#10758

rrweb PR: rrweb-io#1428

<details>
<summary>
Before
</summary>
<p>
Red square is on the main page;<br>
Green is inside the shadow dom on the main page;<br>
Blue one is within the iframe;<br>
Pink is inside the shadow dom within the iframe.
</p>
<video
src="https://github.com/rrweb-io/rrweb/assets/25964451/110f1e36-0a74-4d1c-9cd7-d28eba95af05"/>
</details>

<details>
<summary>
After
</summary>
<video
src="https://github.com/rrweb-io/rrweb/assets/25964451/902495b5-e1b3-40d0-85af-6aeff58a5628"/>
</details>
@EnzoPortela
Copy link

It still working?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants