fix(rrweb): Use unpatched requestAnimationFrame when possible - #150

Merged
mydea merged 2 commits into
sentry-v2from
fn/unpatchedRequestAnimationFrame
Jan 4, 2024
Merged

fix(rrweb): Use unpatched requestAnimationFrame when possible#150
mydea merged 2 commits into
sentry-v2from
fn/unpatchedRequestAnimationFrame

Conversation

@mydea

@mydeamydea commented Jan 4, 2024

Copy link
Copy Markdown
Member

As explained here: getsentry/sentry-javascript#6946 (comment) the usage of requestAnimationFrame can lead to issues when working with Zone.js.

With this fix, where possible we should now use the requestAnimationFrame implementation from an iframe, if possible, and else fall back on just using window.requestAnimationFrame as before.

We already do something similar in sentry-javascript to get an unpatched fetch: https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71 so this should hopefully work fine!

mydeaand others added 2 commits January 4, 2024 12:46
@mydea
fix(rrweb): Use unpatched requestAnimationFrame when possible
ceba64a
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of `requestAnimationFrame` can lead to issues when working with Zone.js.
@mydea@github-actions
Apply formatting changes
90f6631
@mydea
mydea requested review from billyvg and c298leeJanuary 4, 2024 11:48
@mydeamydea self-assigned this Jan 4, 2024
@mydea
mydea requested a review from Lms24January 4, 2024 11:48
@mydeamydea mentioned this pull request Jan 4, 2024
Closed
3 tasks
@github-actions

github-actionsBot commented Jan 4, 2024

Copy link
Copy Markdown

size-limit report 📦

PathSize
rrweb - record only (gzipped)16.67 KB (+0.64% 🔺)
rrweb - record & getCanvasManager only (gzipped)19.23 KB (+0.49% 🔺)
rrweb - record only (min)56.87 KB (+0.6% 🔺)
rrweb - record with treeshaking flags (gzipped)15.46 KB (+0.73% 🔺)

Lms24
Lms24 approved these changes Jan 4, 2024
View reviewed changes

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution! Thinking about it, we might run into some kind of trouble for no longer using a patched version of raf but let's worry about it if anyone complains 😅

Curious how much this is gonna improve perf on Angular!

@mydeamydea mentioned this pull request Jan 4, 2024
Open
1 task
billyvg
billyvg approved these changes Jan 4, 2024
View reviewed changes

@billyvgbillyvg left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browser JS is wild

@mydea
mydea merged commit fd9dc42 into sentry-v2Jan 4, 2024
@mydea
mydea deleted the fn/unpatchedRequestAnimationFrame branch January 4, 2024 15:13
mydea added a commit to getsentry/sentry-javascript that referenced this pull request Jan 5, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
7a84e27
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
@mydeamydea mentioned this pull request Jan 5, 2024
Merged
mydea added a commit to getsentry/sentry-javascript that referenced this pull request Jan 8, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
02239ee
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
mydea added a commit to getsentry/sentry-javascript that referenced this pull request Jan 10, 2024
@mydea
feat(replay): Update rrweb to 2.7.3 (#10072)
a157d98
This bump contains the following changes:
- fix(rrweb): Use unpatched requestAnimationFrame when possible
[#150](getsentry/rrweb#150)
- ref: Avoid async in canvas
[#143](getsentry/rrweb#143)
- feat: Bundle canvas worker manually
[#144](getsentry/rrweb#144)
- build: Build for ES2020
[#142](getsentry/rrweb#142)
Extracted out from
#9826Closes#6946
billyvg pushed a commit that referenced this pull request Apr 26, 2024
@mydea@billyvg
fix(rrweb): Use unpatchedrequestAnimationFramewhen possible (#150)
e8ff315
As explained here:
getsentry/sentry-javascript#6946 (comment)
the usage of `requestAnimationFrame` can lead to issues when working
with Zone.js.
With this fix, where possible we should now use the
`requestAnimationFrame` implementation from an iframe, if possible, and
else fall back on just using `window.requestAnimationFrame` as before.
We already do something similar in sentry-javascript to get an unpatched
`fetch`:
https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71
so this should hopefully work fine!
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes
@Lms24Lms24Lms24 approved these changes
@c298leec298leeAwaiting requested review from c298lee

Assignees

@mydeamydea

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mydea@billyvg@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(rrweb): Use unpatched requestAnimationFrame when possible - #150
Merged
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Jan 4, 2024
Merged
fix(rrweb): Use unpatched requestAnimationFrame when possible#150
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Conversation
@mydea
@mydeamydea
commented
Jan 4, 2024

Copy link


Copy Markdown

Member
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of requestAnimationFrame can lead to issues when working with Zone.js.
With this fix, where possible we should now use the requestAnimationFrame implementation from an iframe, if possible, and else fall back on just using window.requestAnimationFrame as before.
We already do something similar in sentry-javascript to get an unpatched fetch: https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71 so this should hopefully work fine!
mydeaand others
added 2 commits
January 4, 2024 12:46
@mydea
fix(rrweb): Use unpatched requestAnimationFrame when possible
ceba64a
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of `requestAnimationFrame` can lead to issues when working with Zone.js.
@mydea@github-actions
Apply formatting changes
90f6631
@mydea
mydea
requested review from
billyvg and c298leeJanuary 4, 2024 11:48
@mydeamydea
self-assigned this
Jan 4, 2024
@mydea
mydea
requested a review
from Lms24January 4, 2024 11:48
@mydeamydea
mentioned this pull request
Jan 4, 2024

Closed

3 tasks
@github-actions
github-actionsBot
commented
Jan 4, 2024

Copy link


Copy Markdown

size-limit report 📦
PathSize
rrweb - record only (gzipped)16.67 KB (+0.64% 🔺)
rrweb - record & getCanvasManager only (gzipped)19.23 KB (+0.49% 🔺)
rrweb - record only (min)56.87 KB (+0.6% 🔺)
rrweb - record with treeshaking flags (gzipped)15.46 KB (+0.73% 🔺)
Lms24
Lms24
approved these changes
Jan 4, 2024
View reviewed changes
@Lms24Lms24
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution! Thinking about it, we might run into some kind of trouble for no longer using a patched version of raf but let's worry about it if anyone complains 😅
Curious how much this is gonna improve perf on Angular!
@mydeamydea
mentioned this pull request
Jan 4, 2024

Open

1 task
billyvg
billyvg
approved these changes
Jan 4, 2024
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browser JS is wild
@mydea
mydea
merged commit fd9dc42
into
sentry-v2Jan 4, 2024
@mydea
mydea
deleted the

fn/unpatchedRequestAnimationFrame

branch
January 4, 2024 15:13
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 5, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
7a84e27
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
@mydeamydea
mentioned this pull request
Jan 5, 2024
 Merged

mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 8, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
02239ee
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 10, 2024
@mydea
feat(replay): Update rrweb to 2.7.3 (#10072)
a157d98
This bump contains the following changes:
- fix(rrweb): Use unpatched requestAnimationFrame when possible
[#150](getsentry/rrweb#150)
- ref: Avoid async in canvas
[#143](getsentry/rrweb#143)
- feat: Bundle canvas worker manually
[#144](getsentry/rrweb#144)
- build: Build for ES2020
[#142](getsentry/rrweb#142)
Extracted out from
#9826Closes#6946
billyvg pushed a commit
that referenced
this pull request
Apr 26, 2024
@mydea@billyvg
fix(rrweb): Use unpatchedrequestAnimationFramewhen possible (#150)
e8ff315
As explained here:
getsentry/sentry-javascript#6946 (comment)
the usage of `requestAnimationFrame` can lead to issues when working
with Zone.js.
With this fix, where possible we should now use the
`requestAnimationFrame` implementation from an iframe, if possible, and
else fall back on just using `window.requestAnimationFrame` as before.
We already do something similar in sentry-javascript to get an unpatched
`fetch`:
https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71
so this should hopefully work fine!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes
@Lms24Lms24Lms24 approved these changes
@c298leec298leeAwaiting requested review from c298lee

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@mydea@billyvg@Lms24

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(rrweb): Use unpatched requestAnimationFrame when possible - #150
Merged
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Jan 4, 2024
Merged
fix(rrweb): Use unpatched requestAnimationFrame when possible#150
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Conversation
@mydea
@mydeamydea
commented
Jan 4, 2024

Copy link


Copy Markdown

Member
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of requestAnimationFrame can lead to issues when working with Zone.js.
With this fix, where possible we should now use the requestAnimationFrame implementation from an iframe, if possible, and else fall back on just using window.requestAnimationFrame as before.
We already do something similar in sentry-javascript to get an unpatched fetch: https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71 so this should hopefully work fine!
mydeaand others
added 2 commits
January 4, 2024 12:46
@mydea
fix(rrweb): Use unpatched requestAnimationFrame when possible
ceba64a
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of `requestAnimationFrame` can lead to issues when working with Zone.js.
@mydea@github-actions
Apply formatting changes
90f6631
@mydea
mydea
requested review from
billyvg and c298leeJanuary 4, 2024 11:48
@mydeamydea
self-assigned this
Jan 4, 2024
@mydea
mydea
requested a review
from Lms24January 4, 2024 11:48
@mydeamydea
mentioned this pull request
Jan 4, 2024

Closed

3 tasks
@github-actions
github-actionsBot
commented
Jan 4, 2024

Copy link


Copy Markdown

size-limit report 📦
PathSize
rrweb - record only (gzipped)16.67 KB (+0.64% 🔺)
rrweb - record & getCanvasManager only (gzipped)19.23 KB (+0.49% 🔺)
rrweb - record only (min)56.87 KB (+0.6% 🔺)
rrweb - record with treeshaking flags (gzipped)15.46 KB (+0.73% 🔺)
Lms24
Lms24
approved these changes
Jan 4, 2024
View reviewed changes
@Lms24Lms24
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution! Thinking about it, we might run into some kind of trouble for no longer using a patched version of raf but let's worry about it if anyone complains 😅
Curious how much this is gonna improve perf on Angular!
@mydeamydea
mentioned this pull request
Jan 4, 2024

Open

1 task
billyvg
billyvg
approved these changes
Jan 4, 2024
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browser JS is wild
@mydea
mydea
merged commit fd9dc42
into
sentry-v2Jan 4, 2024
@mydea
mydea
deleted the

fn/unpatchedRequestAnimationFrame

branch
January 4, 2024 15:13
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 5, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
7a84e27
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
@mydeamydea
mentioned this pull request
Jan 5, 2024
 Merged

mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 8, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
02239ee
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 10, 2024
@mydea
feat(replay): Update rrweb to 2.7.3 (#10072)
a157d98
This bump contains the following changes:
- fix(rrweb): Use unpatched requestAnimationFrame when possible
[#150](getsentry/rrweb#150)
- ref: Avoid async in canvas
[#143](getsentry/rrweb#143)
- feat: Bundle canvas worker manually
[#144](getsentry/rrweb#144)
- build: Build for ES2020
[#142](getsentry/rrweb#142)
Extracted out from
#9826Closes#6946
billyvg pushed a commit
that referenced
this pull request
Apr 26, 2024
@mydea@billyvg
fix(rrweb): Use unpatchedrequestAnimationFramewhen possible (#150)
e8ff315
As explained here:
getsentry/sentry-javascript#6946 (comment)
the usage of `requestAnimationFrame` can lead to issues when working
with Zone.js.
With this fix, where possible we should now use the
`requestAnimationFrame` implementation from an iframe, if possible, and
else fall back on just using `window.requestAnimationFrame` as before.
We already do something similar in sentry-javascript to get an unpatched
`fetch`:
https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71
so this should hopefully work fine!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes
@Lms24Lms24Lms24 approved these changes
@c298leec298leeAwaiting requested review from c298lee

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@mydea@billyvg@Lms24

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(rrweb): Use unpatched requestAnimationFrame when possible - #150
Merged
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Jan 4, 2024
Merged
fix(rrweb): Use unpatched requestAnimationFrame when possible#150
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Conversation
@mydea
@mydeamydea
commented
Jan 4, 2024

Copy link


Copy Markdown

Member
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of requestAnimationFrame can lead to issues when working with Zone.js.
With this fix, where possible we should now use the requestAnimationFrame implementation from an iframe, if possible, and else fall back on just using window.requestAnimationFrame as before.
We already do something similar in sentry-javascript to get an unpatched fetch: https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71 so this should hopefully work fine!
mydeaand others
added 2 commits
January 4, 2024 12:46
@mydea
fix(rrweb): Use unpatched requestAnimationFrame when possible
ceba64a
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of `requestAnimationFrame` can lead to issues when working with Zone.js.
@mydea@github-actions
Apply formatting changes
90f6631
@mydea
mydea
requested review from
billyvg and c298leeJanuary 4, 2024 11:48
@mydeamydea
self-assigned this
Jan 4, 2024
@mydea
mydea
requested a review
from Lms24January 4, 2024 11:48
@mydeamydea
mentioned this pull request
Jan 4, 2024

Closed

3 tasks
@github-actions
github-actionsBot
commented
Jan 4, 2024

Copy link


Copy Markdown

size-limit report 📦
PathSize
rrweb - record only (gzipped)16.67 KB (+0.64% 🔺)
rrweb - record & getCanvasManager only (gzipped)19.23 KB (+0.49% 🔺)
rrweb - record only (min)56.87 KB (+0.6% 🔺)
rrweb - record with treeshaking flags (gzipped)15.46 KB (+0.73% 🔺)
Lms24
Lms24
approved these changes
Jan 4, 2024
View reviewed changes
@Lms24Lms24
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution! Thinking about it, we might run into some kind of trouble for no longer using a patched version of raf but let's worry about it if anyone complains 😅
Curious how much this is gonna improve perf on Angular!
@mydeamydea
mentioned this pull request
Jan 4, 2024

Open

1 task
billyvg
billyvg
approved these changes
Jan 4, 2024
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browser JS is wild
@mydea
mydea
merged commit fd9dc42
into
sentry-v2Jan 4, 2024
@mydea
mydea
deleted the

fn/unpatchedRequestAnimationFrame

branch
January 4, 2024 15:13
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 5, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
7a84e27
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
@mydeamydea
mentioned this pull request
Jan 5, 2024
 Merged

mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 8, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
02239ee
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 10, 2024
@mydea
feat(replay): Update rrweb to 2.7.3 (#10072)
a157d98
This bump contains the following changes:
- fix(rrweb): Use unpatched requestAnimationFrame when possible
[#150](getsentry/rrweb#150)
- ref: Avoid async in canvas
[#143](getsentry/rrweb#143)
- feat: Bundle canvas worker manually
[#144](getsentry/rrweb#144)
- build: Build for ES2020
[#142](getsentry/rrweb#142)
Extracted out from
#9826Closes#6946
billyvg pushed a commit
that referenced
this pull request
Apr 26, 2024
@mydea@billyvg
fix(rrweb): Use unpatchedrequestAnimationFramewhen possible (#150)
e8ff315
As explained here:
getsentry/sentry-javascript#6946 (comment)
the usage of `requestAnimationFrame` can lead to issues when working
with Zone.js.
With this fix, where possible we should now use the
`requestAnimationFrame` implementation from an iframe, if possible, and
else fall back on just using `window.requestAnimationFrame` as before.
We already do something similar in sentry-javascript to get an unpatched
`fetch`:
https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71
so this should hopefully work fine!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes
@Lms24Lms24Lms24 approved these changes
@c298leec298leeAwaiting requested review from c298lee

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@mydea@billyvg@Lms24

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(rrweb): Use unpatched requestAnimationFrame when possible - #150
Merged
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Jan 4, 2024
Merged
fix(rrweb): Use unpatched requestAnimationFrame when possible#150
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Conversation
@mydea
@mydeamydea
commented
Jan 4, 2024

Copy link


Copy Markdown

Member
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of requestAnimationFrame can lead to issues when working with Zone.js.
With this fix, where possible we should now use the requestAnimationFrame implementation from an iframe, if possible, and else fall back on just using window.requestAnimationFrame as before.
We already do something similar in sentry-javascript to get an unpatched fetch: https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71 so this should hopefully work fine!
mydeaand others
added 2 commits
January 4, 2024 12:46
@mydea
fix(rrweb): Use unpatched requestAnimationFrame when possible
ceba64a
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of `requestAnimationFrame` can lead to issues when working with Zone.js.
@mydea@github-actions
Apply formatting changes
90f6631
@mydea
mydea
requested review from
billyvg and c298leeJanuary 4, 2024 11:48
@mydeamydea
self-assigned this
Jan 4, 2024
@mydea
mydea
requested a review
from Lms24January 4, 2024 11:48
@mydeamydea
mentioned this pull request
Jan 4, 2024

Closed

3 tasks
@github-actions
github-actionsBot
commented
Jan 4, 2024

Copy link


Copy Markdown

size-limit report 📦
PathSize
rrweb - record only (gzipped)16.67 KB (+0.64% 🔺)
rrweb - record & getCanvasManager only (gzipped)19.23 KB (+0.49% 🔺)
rrweb - record only (min)56.87 KB (+0.6% 🔺)
rrweb - record with treeshaking flags (gzipped)15.46 KB (+0.73% 🔺)
Lms24
Lms24
approved these changes
Jan 4, 2024
View reviewed changes
@Lms24Lms24
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution! Thinking about it, we might run into some kind of trouble for no longer using a patched version of raf but let's worry about it if anyone complains 😅
Curious how much this is gonna improve perf on Angular!
@mydeamydea
mentioned this pull request
Jan 4, 2024

Open

1 task
billyvg
billyvg
approved these changes
Jan 4, 2024
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browser JS is wild
@mydea
mydea
merged commit fd9dc42
into
sentry-v2Jan 4, 2024
@mydea
mydea
deleted the

fn/unpatchedRequestAnimationFrame

branch
January 4, 2024 15:13
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 5, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
7a84e27
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
@mydeamydea
mentioned this pull request
Jan 5, 2024
 Merged

mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 8, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
02239ee
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 10, 2024
@mydea
feat(replay): Update rrweb to 2.7.3 (#10072)
a157d98
This bump contains the following changes:
- fix(rrweb): Use unpatched requestAnimationFrame when possible
[#150](getsentry/rrweb#150)
- ref: Avoid async in canvas
[#143](getsentry/rrweb#143)
- feat: Bundle canvas worker manually
[#144](getsentry/rrweb#144)
- build: Build for ES2020
[#142](getsentry/rrweb#142)
Extracted out from
#9826Closes#6946
billyvg pushed a commit
that referenced
this pull request
Apr 26, 2024
@mydea@billyvg
fix(rrweb): Use unpatchedrequestAnimationFramewhen possible (#150)
e8ff315
As explained here:
getsentry/sentry-javascript#6946 (comment)
the usage of `requestAnimationFrame` can lead to issues when working
with Zone.js.
With this fix, where possible we should now use the
`requestAnimationFrame` implementation from an iframe, if possible, and
else fall back on just using `window.requestAnimationFrame` as before.
We already do something similar in sentry-javascript to get an unpatched
`fetch`:
https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71
so this should hopefully work fine!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes
@Lms24Lms24Lms24 approved these changes
@c298leec298leeAwaiting requested review from c298lee

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@mydea@billyvg@Lms24

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(rrweb): Use unpatched requestAnimationFrame when possible - #150
Merged
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Jan 4, 2024
Merged
fix(rrweb): Use unpatched requestAnimationFrame when possible#150
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Conversation
@mydea
@mydeamydea
commented
Jan 4, 2024

Copy link


Copy Markdown

Member
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of requestAnimationFrame can lead to issues when working with Zone.js.
With this fix, where possible we should now use the requestAnimationFrame implementation from an iframe, if possible, and else fall back on just using window.requestAnimationFrame as before.
We already do something similar in sentry-javascript to get an unpatched fetch: https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71 so this should hopefully work fine!
mydeaand others
added 2 commits
January 4, 2024 12:46
@mydea
fix(rrweb): Use unpatched requestAnimationFrame when possible
ceba64a
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of `requestAnimationFrame` can lead to issues when working with Zone.js.
@mydea@github-actions
Apply formatting changes
90f6631
@mydea
mydea
requested review from
billyvg and c298leeJanuary 4, 2024 11:48
@mydeamydea
self-assigned this
Jan 4, 2024
@mydea
mydea
requested a review
from Lms24January 4, 2024 11:48
@mydeamydea
mentioned this pull request
Jan 4, 2024

Closed

3 tasks
@github-actions
github-actionsBot
commented
Jan 4, 2024

Copy link


Copy Markdown

size-limit report 📦
PathSize
rrweb - record only (gzipped)16.67 KB (+0.64% 🔺)
rrweb - record & getCanvasManager only (gzipped)19.23 KB (+0.49% 🔺)
rrweb - record only (min)56.87 KB (+0.6% 🔺)
rrweb - record with treeshaking flags (gzipped)15.46 KB (+0.73% 🔺)
Lms24
Lms24
approved these changes
Jan 4, 2024
View reviewed changes
@Lms24Lms24
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution! Thinking about it, we might run into some kind of trouble for no longer using a patched version of raf but let's worry about it if anyone complains 😅
Curious how much this is gonna improve perf on Angular!
@mydeamydea
mentioned this pull request
Jan 4, 2024

Open

1 task
billyvg
billyvg
approved these changes
Jan 4, 2024
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browser JS is wild
@mydea
mydea
merged commit fd9dc42
into
sentry-v2Jan 4, 2024
@mydea
mydea
deleted the

fn/unpatchedRequestAnimationFrame

branch
January 4, 2024 15:13
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 5, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
7a84e27
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
@mydeamydea
mentioned this pull request
Jan 5, 2024
 Merged

mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 8, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
02239ee
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 10, 2024
@mydea
feat(replay): Update rrweb to 2.7.3 (#10072)
a157d98
This bump contains the following changes:
- fix(rrweb): Use unpatched requestAnimationFrame when possible
[#150](getsentry/rrweb#150)
- ref: Avoid async in canvas
[#143](getsentry/rrweb#143)
- feat: Bundle canvas worker manually
[#144](getsentry/rrweb#144)
- build: Build for ES2020
[#142](getsentry/rrweb#142)
Extracted out from
#9826Closes#6946
billyvg pushed a commit
that referenced
this pull request
Apr 26, 2024
@mydea@billyvg
fix(rrweb): Use unpatchedrequestAnimationFramewhen possible (#150)
e8ff315
As explained here:
getsentry/sentry-javascript#6946 (comment)
the usage of `requestAnimationFrame` can lead to issues when working
with Zone.js.
With this fix, where possible we should now use the
`requestAnimationFrame` implementation from an iframe, if possible, and
else fall back on just using `window.requestAnimationFrame` as before.
We already do something similar in sentry-javascript to get an unpatched
`fetch`:
https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71
so this should hopefully work fine!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes
@Lms24Lms24Lms24 approved these changes
@c298leec298leeAwaiting requested review from c298lee

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@mydea@billyvg@Lms24

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(rrweb): Use unpatched requestAnimationFrame when possible - #150
Merged
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Jan 4, 2024
Merged
fix(rrweb): Use unpatched requestAnimationFrame when possible#150
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Conversation
@mydea
@mydeamydea
commented
Jan 4, 2024

Copy link


Copy Markdown

Member
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of requestAnimationFrame can lead to issues when working with Zone.js.
With this fix, where possible we should now use the requestAnimationFrame implementation from an iframe, if possible, and else fall back on just using window.requestAnimationFrame as before.
We already do something similar in sentry-javascript to get an unpatched fetch: https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71 so this should hopefully work fine!
mydeaand others
added 2 commits
January 4, 2024 12:46
@mydea
fix(rrweb): Use unpatched requestAnimationFrame when possible
ceba64a
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of `requestAnimationFrame` can lead to issues when working with Zone.js.
@mydea@github-actions
Apply formatting changes
90f6631
@mydea
mydea
requested review from
billyvg and c298leeJanuary 4, 2024 11:48
@mydeamydea
self-assigned this
Jan 4, 2024
@mydea
mydea
requested a review
from Lms24January 4, 2024 11:48
@mydeamydea
mentioned this pull request
Jan 4, 2024

Closed

3 tasks
@github-actions
github-actionsBot
commented
Jan 4, 2024

Copy link


Copy Markdown

size-limit report 📦
PathSize
rrweb - record only (gzipped)16.67 KB (+0.64% 🔺)
rrweb - record & getCanvasManager only (gzipped)19.23 KB (+0.49% 🔺)
rrweb - record only (min)56.87 KB (+0.6% 🔺)
rrweb - record with treeshaking flags (gzipped)15.46 KB (+0.73% 🔺)
Lms24
Lms24
approved these changes
Jan 4, 2024
View reviewed changes
@Lms24Lms24
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution! Thinking about it, we might run into some kind of trouble for no longer using a patched version of raf but let's worry about it if anyone complains 😅
Curious how much this is gonna improve perf on Angular!
@mydeamydea
mentioned this pull request
Jan 4, 2024

Open

1 task
billyvg
billyvg
approved these changes
Jan 4, 2024
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browser JS is wild
@mydea
mydea
merged commit fd9dc42
into
sentry-v2Jan 4, 2024
@mydea
mydea
deleted the

fn/unpatchedRequestAnimationFrame

branch
January 4, 2024 15:13
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 5, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
7a84e27
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
@mydeamydea
mentioned this pull request
Jan 5, 2024
 Merged

mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 8, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
02239ee
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 10, 2024
@mydea
feat(replay): Update rrweb to 2.7.3 (#10072)
a157d98
This bump contains the following changes:
- fix(rrweb): Use unpatched requestAnimationFrame when possible
[#150](getsentry/rrweb#150)
- ref: Avoid async in canvas
[#143](getsentry/rrweb#143)
- feat: Bundle canvas worker manually
[#144](getsentry/rrweb#144)
- build: Build for ES2020
[#142](getsentry/rrweb#142)
Extracted out from
#9826Closes#6946
billyvg pushed a commit
that referenced
this pull request
Apr 26, 2024
@mydea@billyvg
fix(rrweb): Use unpatchedrequestAnimationFramewhen possible (#150)
e8ff315
As explained here:
getsentry/sentry-javascript#6946 (comment)
the usage of `requestAnimationFrame` can lead to issues when working
with Zone.js.
With this fix, where possible we should now use the
`requestAnimationFrame` implementation from an iframe, if possible, and
else fall back on just using `window.requestAnimationFrame` as before.
We already do something similar in sentry-javascript to get an unpatched
`fetch`:
https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71
so this should hopefully work fine!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes
@Lms24Lms24Lms24 approved these changes
@c298leec298leeAwaiting requested review from c298lee

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@mydea@billyvg@Lms24

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(rrweb): Use unpatched requestAnimationFrame when possible - #150
Merged
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Jan 4, 2024
Merged
fix(rrweb): Use unpatched requestAnimationFrame when possible#150
mydea merged 2 commits into
sentry-v2from 
fn/unpatchedRequestAnimationFrame
Conversation
@mydea
@mydeamydea
commented
Jan 4, 2024

Copy link


Copy Markdown

Member
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of requestAnimationFrame can lead to issues when working with Zone.js.
With this fix, where possible we should now use the requestAnimationFrame implementation from an iframe, if possible, and else fall back on just using window.requestAnimationFrame as before.
We already do something similar in sentry-javascript to get an unpatched fetch: https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71 so this should hopefully work fine!
mydeaand others
added 2 commits
January 4, 2024 12:46
@mydea
fix(rrweb): Use unpatched requestAnimationFrame when possible
ceba64a
As explained here: getsentry/sentry-javascript#6946 (comment) the usage of `requestAnimationFrame` can lead to issues when working with Zone.js.
@mydea@github-actions
Apply formatting changes
90f6631
@mydea
mydea
requested review from
billyvg and c298leeJanuary 4, 2024 11:48
@mydeamydea
self-assigned this
Jan 4, 2024
@mydea
mydea
requested a review
from Lms24January 4, 2024 11:48
@mydeamydea
mentioned this pull request
Jan 4, 2024

Closed

3 tasks
@github-actions
github-actionsBot
commented
Jan 4, 2024

Copy link


Copy Markdown

size-limit report 📦
PathSize
rrweb - record only (gzipped)16.67 KB (+0.64% 🔺)
rrweb - record & getCanvasManager only (gzipped)19.23 KB (+0.49% 🔺)
rrweb - record only (min)56.87 KB (+0.6% 🔺)
rrweb - record with treeshaking flags (gzipped)15.46 KB (+0.73% 🔺)
Lms24
Lms24
approved these changes
Jan 4, 2024
View reviewed changes
@Lms24Lms24
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this solution! Thinking about it, we might run into some kind of trouble for no longer using a patched version of raf but let's worry about it if anyone complains 😅
Curious how much this is gonna improve perf on Angular!
@mydeamydea
mentioned this pull request
Jan 4, 2024

Open

1 task
billyvg
billyvg
approved these changes
Jan 4, 2024
View reviewed changes
@billyvgbillyvg
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browser JS is wild
@mydea
mydea
merged commit fd9dc42
into
sentry-v2Jan 4, 2024
@mydea
mydea
deleted the

fn/unpatchedRequestAnimationFrame

branch
January 4, 2024 15:13
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 5, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
7a84e27
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
@mydeamydea
mentioned this pull request
Jan 5, 2024
 Merged

mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 8, 2024
@mydea
feat(replay): Update rrweb to 2.7.3
02239ee
- fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150)
- ref: Avoid async in canvas (#143)
- feat: Bundle canvas worker manually (#144)
- build: Build for ES2020 (#142)
mydea added a commit
to getsentry/sentry-javascript
that referenced
this pull request
Jan 10, 2024
@mydea
feat(replay): Update rrweb to 2.7.3 (#10072)
a157d98
This bump contains the following changes:
- fix(rrweb): Use unpatched requestAnimationFrame when possible
[#150](getsentry/rrweb#150)
- ref: Avoid async in canvas
[#143](getsentry/rrweb#143)
- feat: Bundle canvas worker manually
[#144](getsentry/rrweb#144)
- build: Build for ES2020
[#142](getsentry/rrweb#142)
Extracted out from
#9826Closes#6946
billyvg pushed a commit
that referenced
this pull request
Apr 26, 2024
@mydea@billyvg
fix(rrweb): Use unpatchedrequestAnimationFramewhen possible (#150)
e8ff315
As explained here:
getsentry/sentry-javascript#6946 (comment)
the usage of `requestAnimationFrame` can lead to issues when working
with Zone.js.
With this fix, where possible we should now use the
`requestAnimationFrame` implementation from an iframe, if possible, and
else fall back on just using `window.requestAnimationFrame` as before.
We already do something similar in sentry-javascript to get an unpatched
`fetch`:
https://github.com/getsentry/sentry-javascript/blob/23ef22b115c8868861896cc9003bd4bb6afb0690/packages/browser/src/transports/utils.ts#L65-L71
so this should hopefully work fine!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@billyvgbillyvgbillyvg approved these changes
@Lms24Lms24Lms24 approved these changes
@c298leec298leeAwaiting requested review from c298lee

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@mydea@billyvg@Lms24