feat(replay): Allow to treeshake rrweb features - #9274

Merged
mydea merged 2 commits into
developfrom
fn/rrweb-build-flags
Oct 19, 2023
Merged

feat(replay): Allow to treeshake rrweb features#9274
mydea merged 2 commits into
developfrom
fn/rrweb-build-flags

Conversation

@mydea

@mydeamydea commented Oct 17, 2023

Copy link
Copy Markdown
Member

This depends on getsentry/rrweb#114 to be merged first, but allows to configure build time flags to shake out certain rrweb features that may not be used.

It also adds a size limit entry that shows the total bundle size with everything that can be shaken out removed, incl. debug stuff. Bundle size is about ~11kb gzipped less in this scenario, which is not bad.

@mydeamydea self-assigned this Oct 17, 2023
@mydeamydea mentioned this pull request Oct 17, 2023
Merged
Lms24
Lms24 approved these changes Oct 17, 2023
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.

11kb is impressive!

Comment thread.size-limit.js
Comment on lines +20 to +22
__SENTRY_DEBUG__: false,
__RRWEB_EXCLUDE_CANVAS__: true,
__RRWEB_EXCLUDE_SHADOW_DOM__: true,

@Lms24Lms24Oct 17, 2023

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.

Hmm kind of unfortunate that we have inverse semantics here to the __SENTRY_DEBUG__ flag but i actually prefer the verbose EXCLUDE naming pattern.

@mydeamydeaOct 17, 2023

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

yeah, I was/am also thinking about this - but IMHO for an opt-in behavior it's nicer to set this to true if I want to shake this out... 🤔 Maybe we can think about this for __SENTRY_DEBUG__ in v8 as well, make this __SENTRY_STRIP_DEBUG__: true or something like this..

@mydea
mydeaforce-pushed the fn/rrweb-build-flags branch from 9d7a3f2 to 3b40785CompareOctober 18, 2023 13:18
@mydea
mydea marked this pull request as ready for review October 18, 2023 13:18
mydea
mydea commented Oct 18, 2023
View reviewed changes
Comment threadrollup/bundleHelpers.js Outdated
const licensePlugin = makeLicensePlugin(licenseTitle);
const tsPlugin = makeTSPlugin('es5');
const rrwebBuildPlugin = makeRrwebBuildPlugin({
excludeCanvas: false,

@mydeamydeaOct 18, 2023

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

@billyvg should we exclude canvas right now for CDN bundles? 🤔

@billyvgbillyvgOct 18, 2023

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.

Yeah since we don't support playback. Makes sense to me

@mydeamydeaOct 18, 2023

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

👍

@mydea
mydea requested a review from billyvgOctober 18, 2023 13:26
@getsentrygetsentry deleted a comment from github-actionsBotOct 18, 2023
@github-actions

github-actionsBot commented Oct 18, 2023•
edited
Loading

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)82.51 KB (-1.79% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped)30.63 KB (-3.07% 🔽)
@sentry/browser - Webpack (gzipped)21.24 KB (-2.47% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)73.01 KB (-9.31% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)28.68 KB (-2.9% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped)21.07 KB (-2.94% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)233.76 KB (-4.85% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)87.08 KB (+1.7% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)62.71 KB (+1.9% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)31.44 KB (-3.72% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)82.97 KB (-1.31% 🔽)
@sentry/react - Webpack (gzipped)21.27 KB (-2.49% 🔽)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)99.38 KB (-2.77% 🔽)
@sentry/nextjs Client - Webpack (gzipped)47.54 KB (-4.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)71.66 KB (added)

@mydea
mydeaforce-pushed the fn/rrweb-build-flags branch from 77a96e5 to 26985d6CompareOctober 19, 2023 07:29
@mydea
mydea merged commit aea3905 into developOct 19, 2023
@mydea
mydea deleted the fn/rrweb-build-flags branch October 19, 2023 08:20
@rchl

rchl commented Oct 31, 2023•
edited
Loading

Copy link
Copy Markdown
Contributor

I've tried to see how big of a difference it will make in a nuxt module where I'm importing @sentry/vue and I don't see any. It looks like the Replay's package/code is not included in the built bundle if the Replay integration is not used (imported). So then is this supposed to only have effect when Replay integration is imported? But then I would imagine it would not work?

EDIT: Well, I'm not importing whole @sentry/vue but only specific exports that I'm using. And as far as @sentry/browser I'm importing only @sentry/browser/esm/sdk (a bit of a hack to get the esm bundle).

@mydea

mydea commented Nov 2, 2023

Copy link
Copy Markdown
MemberAuthor

So these flags will only impact the build output if replay is used. If replay is not used, all of it should already be shaken out!

@rchl

rchl commented Nov 2, 2023

Copy link
Copy Markdown
Contributor

Of course :) Thanks.

And I see that what those do exactly is documented at https://docs.sentry.io/platforms/javascript/configuration/tree-shaking/

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
+1 more reviewer
@AbhiPrasadAbhiPrasadAbhiPrasad approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@mydeamydea

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@mydea@rchl@billyvg@Lms24@AbhiPrasad
, '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
feat(replay): Allow to treeshake rrweb features - #9274
Merged
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Oct 19, 2023
Merged
feat(replay): Allow to treeshake rrweb features#9274
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Conversation
@mydea
@mydeamydea
commented
Oct 17, 2023

Copy link


Copy Markdown

Member
This depends on getsentry/rrweb#114 to be merged first, but allows to configure build time flags to shake out certain rrweb features that may not be used.
It also adds a size limit entry that shows the total bundle size with everything that can be shaken out removed, incl. debug stuff. Bundle size is about ~11kb gzipped less in this scenario, which is not bad.
@mydeamydea
self-assigned this
Oct 17, 2023
@mydeamydea
mentioned this pull request
Oct 17, 2023
 Merged

Lms24
Lms24
approved these changes
Oct 17, 2023
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.

11kb is impressive!
Comment thread.size-limit.js

Comment on lines

+20
 to 
+22

 __SENTRY_DEBUG__: false,
 __RRWEB_EXCLUDE_CANVAS__: true,
 __RRWEB_EXCLUDE_SHADOW_DOM__: true,
@Lms24Lms24Oct 17, 2023

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.

Hmm kind of unfortunate that we have inverse semantics here to the __SENTRY_DEBUG__ flag but i actually prefer the verbose EXCLUDE naming pattern.
@mydeamydeaOct 17, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

yeah, I was/am also thinking about this - but IMHO for an opt-in behavior it's nicer to set this to true if I want to shake this out... 🤔 Maybe we can think about this for __SENTRY_DEBUG__ in v8 as well, make this __SENTRY_STRIP_DEBUG__: true or something like this..
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
9d7a3f2 to
3b40785CompareOctober 18, 2023 13:18
@mydea
mydea
marked this pull request as ready for review
October 18, 2023 13:18
mydea
mydea
commented
Oct 18, 2023
View reviewed changes
Comment threadrollup/bundleHelpers.js
Outdated

 const licensePlugin = makeLicensePlugin(licenseTitle);
 const tsPlugin = makeTSPlugin('es5');
 const rrwebBuildPlugin = makeRrwebBuildPlugin({
 excludeCanvas: false,
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

@billyvg should we exclude canvas right now for CDN bundles? 🤔
@billyvgbillyvgOct 18, 2023

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.

Yeah since we don't support playback. Makes sense to me
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

👍
@mydea
mydea
requested a review
from billyvgOctober 18, 2023 13:26
@getsentrygetsentry
deleted a comment from github-actionsBotOct 18, 2023
@github-actions
github-actionsBot
commented
Oct 18, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)82.51 KB (-1.79% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped)30.63 KB (-3.07% 🔽)
@sentry/browser - Webpack (gzipped)21.24 KB (-2.47% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)73.01 KB (-9.31% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)28.68 KB (-2.9% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped)21.07 KB (-2.94% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)233.76 KB (-4.85% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)87.08 KB (+1.7% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)62.71 KB (+1.9% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)31.44 KB (-3.72% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)82.97 KB (-1.31% 🔽)
@sentry/react - Webpack (gzipped)21.27 KB (-2.49% 🔽)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)99.38 KB (-2.77% 🔽)
@sentry/nextjs Client - Webpack (gzipped)47.54 KB (-4.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)71.66 KB (added)
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
77a96e5 to
26985d6CompareOctober 19, 2023 07:29
@mydea
mydea
merged commit aea3905
into
developOct 19, 2023
@mydea
mydea
deleted the

fn/rrweb-build-flags

branch
October 19, 2023 08:20
@rchl
rchl
commented
Oct 31, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
I've tried to see how big of a difference it will make in a nuxt module where I'm importing @sentry/vue and I don't see any. It looks like the Replay's package/code is not included in the built bundle if the Replay integration is not used (imported). So then is this supposed to only have effect when Replay integration is imported? But then I would imagine it would not work?
EDIT: Well, I'm not importing whole @sentry/vue but only specific exports that I'm using. And as far as @sentry/browser I'm importing only @sentry/browser/esm/sdk (a bit of a hack to get the esm bundle).
@mydea
mydea
commented
Nov 2, 2023

Copy link


Copy Markdown

MemberAuthor
So these flags will only impact the build output if replay is used. If replay is not used, all of it should already be shaken out!
@rchl
rchl
commented
Nov 2, 2023

Copy link


Copy Markdown

Contributor
Of course :) Thanks.
And I see that what those do exactly is documented at https://docs.sentry.io/platforms/javascript/configuration/tree-shaking/
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

+1 more reviewer

@AbhiPrasadAbhiPrasadAbhiPrasad approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

5 participants

@mydea@rchl@billyvg@Lms24@AbhiPrasad

, '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
feat(replay): Allow to treeshake rrweb features - #9274
Merged
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Oct 19, 2023
Merged
feat(replay): Allow to treeshake rrweb features#9274
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Conversation
@mydea
@mydeamydea
commented
Oct 17, 2023

Copy link


Copy Markdown

Member
This depends on getsentry/rrweb#114 to be merged first, but allows to configure build time flags to shake out certain rrweb features that may not be used.
It also adds a size limit entry that shows the total bundle size with everything that can be shaken out removed, incl. debug stuff. Bundle size is about ~11kb gzipped less in this scenario, which is not bad.
@mydeamydea
self-assigned this
Oct 17, 2023
@mydeamydea
mentioned this pull request
Oct 17, 2023
 Merged

Lms24
Lms24
approved these changes
Oct 17, 2023
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.

11kb is impressive!
Comment thread.size-limit.js

Comment on lines

+20
 to 
+22

 __SENTRY_DEBUG__: false,
 __RRWEB_EXCLUDE_CANVAS__: true,
 __RRWEB_EXCLUDE_SHADOW_DOM__: true,
@Lms24Lms24Oct 17, 2023

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.

Hmm kind of unfortunate that we have inverse semantics here to the __SENTRY_DEBUG__ flag but i actually prefer the verbose EXCLUDE naming pattern.
@mydeamydeaOct 17, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

yeah, I was/am also thinking about this - but IMHO for an opt-in behavior it's nicer to set this to true if I want to shake this out... 🤔 Maybe we can think about this for __SENTRY_DEBUG__ in v8 as well, make this __SENTRY_STRIP_DEBUG__: true or something like this..
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
9d7a3f2 to
3b40785CompareOctober 18, 2023 13:18
@mydea
mydea
marked this pull request as ready for review
October 18, 2023 13:18
mydea
mydea
commented
Oct 18, 2023
View reviewed changes
Comment threadrollup/bundleHelpers.js
Outdated

 const licensePlugin = makeLicensePlugin(licenseTitle);
 const tsPlugin = makeTSPlugin('es5');
 const rrwebBuildPlugin = makeRrwebBuildPlugin({
 excludeCanvas: false,
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

@billyvg should we exclude canvas right now for CDN bundles? 🤔
@billyvgbillyvgOct 18, 2023

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.

Yeah since we don't support playback. Makes sense to me
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

👍
@mydea
mydea
requested a review
from billyvgOctober 18, 2023 13:26
@getsentrygetsentry
deleted a comment from github-actionsBotOct 18, 2023
@github-actions
github-actionsBot
commented
Oct 18, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)82.51 KB (-1.79% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped)30.63 KB (-3.07% 🔽)
@sentry/browser - Webpack (gzipped)21.24 KB (-2.47% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)73.01 KB (-9.31% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)28.68 KB (-2.9% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped)21.07 KB (-2.94% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)233.76 KB (-4.85% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)87.08 KB (+1.7% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)62.71 KB (+1.9% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)31.44 KB (-3.72% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)82.97 KB (-1.31% 🔽)
@sentry/react - Webpack (gzipped)21.27 KB (-2.49% 🔽)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)99.38 KB (-2.77% 🔽)
@sentry/nextjs Client - Webpack (gzipped)47.54 KB (-4.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)71.66 KB (added)
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
77a96e5 to
26985d6CompareOctober 19, 2023 07:29
@mydea
mydea
merged commit aea3905
into
developOct 19, 2023
@mydea
mydea
deleted the

fn/rrweb-build-flags

branch
October 19, 2023 08:20
@rchl
rchl
commented
Oct 31, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
I've tried to see how big of a difference it will make in a nuxt module where I'm importing @sentry/vue and I don't see any. It looks like the Replay's package/code is not included in the built bundle if the Replay integration is not used (imported). So then is this supposed to only have effect when Replay integration is imported? But then I would imagine it would not work?
EDIT: Well, I'm not importing whole @sentry/vue but only specific exports that I'm using. And as far as @sentry/browser I'm importing only @sentry/browser/esm/sdk (a bit of a hack to get the esm bundle).
@mydea
mydea
commented
Nov 2, 2023

Copy link


Copy Markdown

MemberAuthor
So these flags will only impact the build output if replay is used. If replay is not used, all of it should already be shaken out!
@rchl
rchl
commented
Nov 2, 2023

Copy link


Copy Markdown

Contributor
Of course :) Thanks.
And I see that what those do exactly is documented at https://docs.sentry.io/platforms/javascript/configuration/tree-shaking/
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

+1 more reviewer

@AbhiPrasadAbhiPrasadAbhiPrasad approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

5 participants

@mydea@rchl@billyvg@Lms24@AbhiPrasad

, '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
feat(replay): Allow to treeshake rrweb features - #9274
Merged
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Oct 19, 2023
Merged
feat(replay): Allow to treeshake rrweb features#9274
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Conversation
@mydea
@mydeamydea
commented
Oct 17, 2023

Copy link


Copy Markdown

Member
This depends on getsentry/rrweb#114 to be merged first, but allows to configure build time flags to shake out certain rrweb features that may not be used.
It also adds a size limit entry that shows the total bundle size with everything that can be shaken out removed, incl. debug stuff. Bundle size is about ~11kb gzipped less in this scenario, which is not bad.
@mydeamydea
self-assigned this
Oct 17, 2023
@mydeamydea
mentioned this pull request
Oct 17, 2023
 Merged

Lms24
Lms24
approved these changes
Oct 17, 2023
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.

11kb is impressive!
Comment thread.size-limit.js

Comment on lines

+20
 to 
+22

 __SENTRY_DEBUG__: false,
 __RRWEB_EXCLUDE_CANVAS__: true,
 __RRWEB_EXCLUDE_SHADOW_DOM__: true,
@Lms24Lms24Oct 17, 2023

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.

Hmm kind of unfortunate that we have inverse semantics here to the __SENTRY_DEBUG__ flag but i actually prefer the verbose EXCLUDE naming pattern.
@mydeamydeaOct 17, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

yeah, I was/am also thinking about this - but IMHO for an opt-in behavior it's nicer to set this to true if I want to shake this out... 🤔 Maybe we can think about this for __SENTRY_DEBUG__ in v8 as well, make this __SENTRY_STRIP_DEBUG__: true or something like this..
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
9d7a3f2 to
3b40785CompareOctober 18, 2023 13:18
@mydea
mydea
marked this pull request as ready for review
October 18, 2023 13:18
mydea
mydea
commented
Oct 18, 2023
View reviewed changes
Comment threadrollup/bundleHelpers.js
Outdated

 const licensePlugin = makeLicensePlugin(licenseTitle);
 const tsPlugin = makeTSPlugin('es5');
 const rrwebBuildPlugin = makeRrwebBuildPlugin({
 excludeCanvas: false,
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

@billyvg should we exclude canvas right now for CDN bundles? 🤔
@billyvgbillyvgOct 18, 2023

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.

Yeah since we don't support playback. Makes sense to me
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

👍
@mydea
mydea
requested a review
from billyvgOctober 18, 2023 13:26
@getsentrygetsentry
deleted a comment from github-actionsBotOct 18, 2023
@github-actions
github-actionsBot
commented
Oct 18, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)82.51 KB (-1.79% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped)30.63 KB (-3.07% 🔽)
@sentry/browser - Webpack (gzipped)21.24 KB (-2.47% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)73.01 KB (-9.31% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)28.68 KB (-2.9% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped)21.07 KB (-2.94% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)233.76 KB (-4.85% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)87.08 KB (+1.7% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)62.71 KB (+1.9% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)31.44 KB (-3.72% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)82.97 KB (-1.31% 🔽)
@sentry/react - Webpack (gzipped)21.27 KB (-2.49% 🔽)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)99.38 KB (-2.77% 🔽)
@sentry/nextjs Client - Webpack (gzipped)47.54 KB (-4.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)71.66 KB (added)
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
77a96e5 to
26985d6CompareOctober 19, 2023 07:29
@mydea
mydea
merged commit aea3905
into
developOct 19, 2023
@mydea
mydea
deleted the

fn/rrweb-build-flags

branch
October 19, 2023 08:20
@rchl
rchl
commented
Oct 31, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
I've tried to see how big of a difference it will make in a nuxt module where I'm importing @sentry/vue and I don't see any. It looks like the Replay's package/code is not included in the built bundle if the Replay integration is not used (imported). So then is this supposed to only have effect when Replay integration is imported? But then I would imagine it would not work?
EDIT: Well, I'm not importing whole @sentry/vue but only specific exports that I'm using. And as far as @sentry/browser I'm importing only @sentry/browser/esm/sdk (a bit of a hack to get the esm bundle).
@mydea
mydea
commented
Nov 2, 2023

Copy link


Copy Markdown

MemberAuthor
So these flags will only impact the build output if replay is used. If replay is not used, all of it should already be shaken out!
@rchl
rchl
commented
Nov 2, 2023

Copy link


Copy Markdown

Contributor
Of course :) Thanks.
And I see that what those do exactly is documented at https://docs.sentry.io/platforms/javascript/configuration/tree-shaking/
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

+1 more reviewer

@AbhiPrasadAbhiPrasadAbhiPrasad approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

5 participants

@mydea@rchl@billyvg@Lms24@AbhiPrasad

, '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
feat(replay): Allow to treeshake rrweb features - #9274
Merged
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Oct 19, 2023
Merged
feat(replay): Allow to treeshake rrweb features#9274
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Conversation
@mydea
@mydeamydea
commented
Oct 17, 2023

Copy link


Copy Markdown

Member
This depends on getsentry/rrweb#114 to be merged first, but allows to configure build time flags to shake out certain rrweb features that may not be used.
It also adds a size limit entry that shows the total bundle size with everything that can be shaken out removed, incl. debug stuff. Bundle size is about ~11kb gzipped less in this scenario, which is not bad.
@mydeamydea
self-assigned this
Oct 17, 2023
@mydeamydea
mentioned this pull request
Oct 17, 2023
 Merged

Lms24
Lms24
approved these changes
Oct 17, 2023
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.

11kb is impressive!
Comment thread.size-limit.js

Comment on lines

+20
 to 
+22

 __SENTRY_DEBUG__: false,
 __RRWEB_EXCLUDE_CANVAS__: true,
 __RRWEB_EXCLUDE_SHADOW_DOM__: true,
@Lms24Lms24Oct 17, 2023

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.

Hmm kind of unfortunate that we have inverse semantics here to the __SENTRY_DEBUG__ flag but i actually prefer the verbose EXCLUDE naming pattern.
@mydeamydeaOct 17, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

yeah, I was/am also thinking about this - but IMHO for an opt-in behavior it's nicer to set this to true if I want to shake this out... 🤔 Maybe we can think about this for __SENTRY_DEBUG__ in v8 as well, make this __SENTRY_STRIP_DEBUG__: true or something like this..
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
9d7a3f2 to
3b40785CompareOctober 18, 2023 13:18
@mydea
mydea
marked this pull request as ready for review
October 18, 2023 13:18
mydea
mydea
commented
Oct 18, 2023
View reviewed changes
Comment threadrollup/bundleHelpers.js
Outdated

 const licensePlugin = makeLicensePlugin(licenseTitle);
 const tsPlugin = makeTSPlugin('es5');
 const rrwebBuildPlugin = makeRrwebBuildPlugin({
 excludeCanvas: false,
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

@billyvg should we exclude canvas right now for CDN bundles? 🤔
@billyvgbillyvgOct 18, 2023

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.

Yeah since we don't support playback. Makes sense to me
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

👍
@mydea
mydea
requested a review
from billyvgOctober 18, 2023 13:26
@getsentrygetsentry
deleted a comment from github-actionsBotOct 18, 2023
@github-actions
github-actionsBot
commented
Oct 18, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)82.51 KB (-1.79% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped)30.63 KB (-3.07% 🔽)
@sentry/browser - Webpack (gzipped)21.24 KB (-2.47% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)73.01 KB (-9.31% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)28.68 KB (-2.9% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped)21.07 KB (-2.94% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)233.76 KB (-4.85% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)87.08 KB (+1.7% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)62.71 KB (+1.9% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)31.44 KB (-3.72% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)82.97 KB (-1.31% 🔽)
@sentry/react - Webpack (gzipped)21.27 KB (-2.49% 🔽)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)99.38 KB (-2.77% 🔽)
@sentry/nextjs Client - Webpack (gzipped)47.54 KB (-4.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)71.66 KB (added)
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
77a96e5 to
26985d6CompareOctober 19, 2023 07:29
@mydea
mydea
merged commit aea3905
into
developOct 19, 2023
@mydea
mydea
deleted the

fn/rrweb-build-flags

branch
October 19, 2023 08:20
@rchl
rchl
commented
Oct 31, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
I've tried to see how big of a difference it will make in a nuxt module where I'm importing @sentry/vue and I don't see any. It looks like the Replay's package/code is not included in the built bundle if the Replay integration is not used (imported). So then is this supposed to only have effect when Replay integration is imported? But then I would imagine it would not work?
EDIT: Well, I'm not importing whole @sentry/vue but only specific exports that I'm using. And as far as @sentry/browser I'm importing only @sentry/browser/esm/sdk (a bit of a hack to get the esm bundle).
@mydea
mydea
commented
Nov 2, 2023

Copy link


Copy Markdown

MemberAuthor
So these flags will only impact the build output if replay is used. If replay is not used, all of it should already be shaken out!
@rchl
rchl
commented
Nov 2, 2023

Copy link


Copy Markdown

Contributor
Of course :) Thanks.
And I see that what those do exactly is documented at https://docs.sentry.io/platforms/javascript/configuration/tree-shaking/
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

+1 more reviewer

@AbhiPrasadAbhiPrasadAbhiPrasad approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

5 participants

@mydea@rchl@billyvg@Lms24@AbhiPrasad

, '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
feat(replay): Allow to treeshake rrweb features - #9274
Merged
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Oct 19, 2023
Merged
feat(replay): Allow to treeshake rrweb features#9274
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Conversation
@mydea
@mydeamydea
commented
Oct 17, 2023

Copy link


Copy Markdown

Member
This depends on getsentry/rrweb#114 to be merged first, but allows to configure build time flags to shake out certain rrweb features that may not be used.
It also adds a size limit entry that shows the total bundle size with everything that can be shaken out removed, incl. debug stuff. Bundle size is about ~11kb gzipped less in this scenario, which is not bad.
@mydeamydea
self-assigned this
Oct 17, 2023
@mydeamydea
mentioned this pull request
Oct 17, 2023
 Merged

Lms24
Lms24
approved these changes
Oct 17, 2023
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.

11kb is impressive!
Comment thread.size-limit.js

Comment on lines

+20
 to 
+22

 __SENTRY_DEBUG__: false,
 __RRWEB_EXCLUDE_CANVAS__: true,
 __RRWEB_EXCLUDE_SHADOW_DOM__: true,
@Lms24Lms24Oct 17, 2023

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.

Hmm kind of unfortunate that we have inverse semantics here to the __SENTRY_DEBUG__ flag but i actually prefer the verbose EXCLUDE naming pattern.
@mydeamydeaOct 17, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

yeah, I was/am also thinking about this - but IMHO for an opt-in behavior it's nicer to set this to true if I want to shake this out... 🤔 Maybe we can think about this for __SENTRY_DEBUG__ in v8 as well, make this __SENTRY_STRIP_DEBUG__: true or something like this..
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
9d7a3f2 to
3b40785CompareOctober 18, 2023 13:18
@mydea
mydea
marked this pull request as ready for review
October 18, 2023 13:18
mydea
mydea
commented
Oct 18, 2023
View reviewed changes
Comment threadrollup/bundleHelpers.js
Outdated

 const licensePlugin = makeLicensePlugin(licenseTitle);
 const tsPlugin = makeTSPlugin('es5');
 const rrwebBuildPlugin = makeRrwebBuildPlugin({
 excludeCanvas: false,
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

@billyvg should we exclude canvas right now for CDN bundles? 🤔
@billyvgbillyvgOct 18, 2023

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.

Yeah since we don't support playback. Makes sense to me
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

👍
@mydea
mydea
requested a review
from billyvgOctober 18, 2023 13:26
@getsentrygetsentry
deleted a comment from github-actionsBotOct 18, 2023
@github-actions
github-actionsBot
commented
Oct 18, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)82.51 KB (-1.79% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped)30.63 KB (-3.07% 🔽)
@sentry/browser - Webpack (gzipped)21.24 KB (-2.47% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)73.01 KB (-9.31% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)28.68 KB (-2.9% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped)21.07 KB (-2.94% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)233.76 KB (-4.85% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)87.08 KB (+1.7% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)62.71 KB (+1.9% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)31.44 KB (-3.72% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)82.97 KB (-1.31% 🔽)
@sentry/react - Webpack (gzipped)21.27 KB (-2.49% 🔽)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)99.38 KB (-2.77% 🔽)
@sentry/nextjs Client - Webpack (gzipped)47.54 KB (-4.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)71.66 KB (added)
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
77a96e5 to
26985d6CompareOctober 19, 2023 07:29
@mydea
mydea
merged commit aea3905
into
developOct 19, 2023
@mydea
mydea
deleted the

fn/rrweb-build-flags

branch
October 19, 2023 08:20
@rchl
rchl
commented
Oct 31, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
I've tried to see how big of a difference it will make in a nuxt module where I'm importing @sentry/vue and I don't see any. It looks like the Replay's package/code is not included in the built bundle if the Replay integration is not used (imported). So then is this supposed to only have effect when Replay integration is imported? But then I would imagine it would not work?
EDIT: Well, I'm not importing whole @sentry/vue but only specific exports that I'm using. And as far as @sentry/browser I'm importing only @sentry/browser/esm/sdk (a bit of a hack to get the esm bundle).
@mydea
mydea
commented
Nov 2, 2023

Copy link


Copy Markdown

MemberAuthor
So these flags will only impact the build output if replay is used. If replay is not used, all of it should already be shaken out!
@rchl
rchl
commented
Nov 2, 2023

Copy link


Copy Markdown

Contributor
Of course :) Thanks.
And I see that what those do exactly is documented at https://docs.sentry.io/platforms/javascript/configuration/tree-shaking/
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

+1 more reviewer

@AbhiPrasadAbhiPrasadAbhiPrasad approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

5 participants

@mydea@rchl@billyvg@Lms24@AbhiPrasad

, '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
feat(replay): Allow to treeshake rrweb features - #9274
Merged
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Oct 19, 2023
Merged
feat(replay): Allow to treeshake rrweb features#9274
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Conversation
@mydea
@mydeamydea
commented
Oct 17, 2023

Copy link


Copy Markdown

Member
This depends on getsentry/rrweb#114 to be merged first, but allows to configure build time flags to shake out certain rrweb features that may not be used.
It also adds a size limit entry that shows the total bundle size with everything that can be shaken out removed, incl. debug stuff. Bundle size is about ~11kb gzipped less in this scenario, which is not bad.
@mydeamydea
self-assigned this
Oct 17, 2023
@mydeamydea
mentioned this pull request
Oct 17, 2023
 Merged

Lms24
Lms24
approved these changes
Oct 17, 2023
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.

11kb is impressive!
Comment thread.size-limit.js

Comment on lines

+20
 to 
+22

 __SENTRY_DEBUG__: false,
 __RRWEB_EXCLUDE_CANVAS__: true,
 __RRWEB_EXCLUDE_SHADOW_DOM__: true,
@Lms24Lms24Oct 17, 2023

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.

Hmm kind of unfortunate that we have inverse semantics here to the __SENTRY_DEBUG__ flag but i actually prefer the verbose EXCLUDE naming pattern.
@mydeamydeaOct 17, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

yeah, I was/am also thinking about this - but IMHO for an opt-in behavior it's nicer to set this to true if I want to shake this out... 🤔 Maybe we can think about this for __SENTRY_DEBUG__ in v8 as well, make this __SENTRY_STRIP_DEBUG__: true or something like this..
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
9d7a3f2 to
3b40785CompareOctober 18, 2023 13:18
@mydea
mydea
marked this pull request as ready for review
October 18, 2023 13:18
mydea
mydea
commented
Oct 18, 2023
View reviewed changes
Comment threadrollup/bundleHelpers.js
Outdated

 const licensePlugin = makeLicensePlugin(licenseTitle);
 const tsPlugin = makeTSPlugin('es5');
 const rrwebBuildPlugin = makeRrwebBuildPlugin({
 excludeCanvas: false,
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

@billyvg should we exclude canvas right now for CDN bundles? 🤔
@billyvgbillyvgOct 18, 2023

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.

Yeah since we don't support playback. Makes sense to me
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

👍
@mydea
mydea
requested a review
from billyvgOctober 18, 2023 13:26
@getsentrygetsentry
deleted a comment from github-actionsBotOct 18, 2023
@github-actions
github-actionsBot
commented
Oct 18, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)82.51 KB (-1.79% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped)30.63 KB (-3.07% 🔽)
@sentry/browser - Webpack (gzipped)21.24 KB (-2.47% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)73.01 KB (-9.31% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)28.68 KB (-2.9% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped)21.07 KB (-2.94% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)233.76 KB (-4.85% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)87.08 KB (+1.7% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)62.71 KB (+1.9% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)31.44 KB (-3.72% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)82.97 KB (-1.31% 🔽)
@sentry/react - Webpack (gzipped)21.27 KB (-2.49% 🔽)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)99.38 KB (-2.77% 🔽)
@sentry/nextjs Client - Webpack (gzipped)47.54 KB (-4.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)71.66 KB (added)
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
77a96e5 to
26985d6CompareOctober 19, 2023 07:29
@mydea
mydea
merged commit aea3905
into
developOct 19, 2023
@mydea
mydea
deleted the

fn/rrweb-build-flags

branch
October 19, 2023 08:20
@rchl
rchl
commented
Oct 31, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
I've tried to see how big of a difference it will make in a nuxt module where I'm importing @sentry/vue and I don't see any. It looks like the Replay's package/code is not included in the built bundle if the Replay integration is not used (imported). So then is this supposed to only have effect when Replay integration is imported? But then I would imagine it would not work?
EDIT: Well, I'm not importing whole @sentry/vue but only specific exports that I'm using. And as far as @sentry/browser I'm importing only @sentry/browser/esm/sdk (a bit of a hack to get the esm bundle).
@mydea
mydea
commented
Nov 2, 2023

Copy link


Copy Markdown

MemberAuthor
So these flags will only impact the build output if replay is used. If replay is not used, all of it should already be shaken out!
@rchl
rchl
commented
Nov 2, 2023

Copy link


Copy Markdown

Contributor
Of course :) Thanks.
And I see that what those do exactly is documented at https://docs.sentry.io/platforms/javascript/configuration/tree-shaking/
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

+1 more reviewer

@AbhiPrasadAbhiPrasadAbhiPrasad approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

5 participants

@mydea@rchl@billyvg@Lms24@AbhiPrasad

, '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
feat(replay): Allow to treeshake rrweb features - #9274
Merged
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Oct 19, 2023
Merged
feat(replay): Allow to treeshake rrweb features#9274
mydea merged 2 commits into
developfrom 
fn/rrweb-build-flags
Conversation
@mydea
@mydeamydea
commented
Oct 17, 2023

Copy link


Copy Markdown

Member
This depends on getsentry/rrweb#114 to be merged first, but allows to configure build time flags to shake out certain rrweb features that may not be used.
It also adds a size limit entry that shows the total bundle size with everything that can be shaken out removed, incl. debug stuff. Bundle size is about ~11kb gzipped less in this scenario, which is not bad.
@mydeamydea
self-assigned this
Oct 17, 2023
@mydeamydea
mentioned this pull request
Oct 17, 2023
 Merged

Lms24
Lms24
approved these changes
Oct 17, 2023
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.

11kb is impressive!
Comment thread.size-limit.js

Comment on lines

+20
 to 
+22

 __SENTRY_DEBUG__: false,
 __RRWEB_EXCLUDE_CANVAS__: true,
 __RRWEB_EXCLUDE_SHADOW_DOM__: true,
@Lms24Lms24Oct 17, 2023

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.

Hmm kind of unfortunate that we have inverse semantics here to the __SENTRY_DEBUG__ flag but i actually prefer the verbose EXCLUDE naming pattern.
@mydeamydeaOct 17, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

yeah, I was/am also thinking about this - but IMHO for an opt-in behavior it's nicer to set this to true if I want to shake this out... 🤔 Maybe we can think about this for __SENTRY_DEBUG__ in v8 as well, make this __SENTRY_STRIP_DEBUG__: true or something like this..
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
9d7a3f2 to
3b40785CompareOctober 18, 2023 13:18
@mydea
mydea
marked this pull request as ready for review
October 18, 2023 13:18
mydea
mydea
commented
Oct 18, 2023
View reviewed changes
Comment threadrollup/bundleHelpers.js
Outdated

 const licensePlugin = makeLicensePlugin(licenseTitle);
 const tsPlugin = makeTSPlugin('es5');
 const rrwebBuildPlugin = makeRrwebBuildPlugin({
 excludeCanvas: false,
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

@billyvg should we exclude canvas right now for CDN bundles? 🤔
@billyvgbillyvgOct 18, 2023

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.

Yeah since we don't support playback. Makes sense to me
@mydeamydeaOct 18, 2023

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

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

👍
@mydea
mydea
requested a review
from billyvgOctober 18, 2023 13:26
@getsentrygetsentry
deleted a comment from github-actionsBotOct 18, 2023
@github-actions
github-actionsBot
commented
Oct 18, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
size-limit report 📦
PathSize
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)82.51 KB (-1.79% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped)30.63 KB (-3.07% 🔽)
@sentry/browser - Webpack (gzipped)21.24 KB (-2.47% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)73.01 KB (-9.31% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)28.68 KB (-2.9% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped)21.07 KB (-2.94% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)233.76 KB (-4.85% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)87.08 KB (+1.7% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)62.71 KB (+1.9% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)31.44 KB (-3.72% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)82.97 KB (-1.31% 🔽)
@sentry/react - Webpack (gzipped)21.27 KB (-2.49% 🔽)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)99.38 KB (-2.77% 🔽)
@sentry/nextjs Client - Webpack (gzipped)47.54 KB (-4.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)71.66 KB (added)
@mydea
mydeaforce-pushed
the
fn/rrweb-build-flags
branch
from
77a96e5 to
26985d6CompareOctober 19, 2023 07:29
@mydea
mydea
merged commit aea3905
into
developOct 19, 2023
@mydea
mydea
deleted the

fn/rrweb-build-flags

branch
October 19, 2023 08:20
@rchl
rchl
commented
Oct 31, 2023•

edited

Loading

Copy link


Copy Markdown

Contributor
I've tried to see how big of a difference it will make in a nuxt module where I'm importing @sentry/vue and I don't see any. It looks like the Replay's package/code is not included in the built bundle if the Replay integration is not used (imported). So then is this supposed to only have effect when Replay integration is imported? But then I would imagine it would not work?
EDIT: Well, I'm not importing whole @sentry/vue but only specific exports that I'm using. And as far as @sentry/browser I'm importing only @sentry/browser/esm/sdk (a bit of a hack to get the esm bundle).
@mydea
mydea
commented
Nov 2, 2023

Copy link


Copy Markdown

MemberAuthor
So these flags will only impact the build output if replay is used. If replay is not used, all of it should already be shaken out!
@rchl
rchl
commented
Nov 2, 2023

Copy link


Copy Markdown

Contributor
Of course :) Thanks.
And I see that what those do exactly is documented at https://docs.sentry.io/platforms/javascript/configuration/tree-shaking/
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

+1 more reviewer

@AbhiPrasadAbhiPrasadAbhiPrasad approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@mydeamydea

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

5 participants

@mydea@rchl@billyvg@Lms24@AbhiPrasad