feat(nuxt): Add Rollup plugin to wrap server entry with import() - #13945

Merged
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin
Oct 14, 2024
Merged

feat(nuxt): Add Rollup plugin to wrap server entry with import()#13945
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin

Conversation

@s1gr1d

@s1gr1ds1gr1d commented Oct 10, 2024

Copy link
Copy Markdown
Member

Feature Issue: #13943

Adds a Rollup plugin to wrap the server entry with import() to load it after Sentry was initialized.

The plugin is not yet in use (will do this in another PR - see linked issue above)

@lforstlforst left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

First pass. Generally looks good to me!

);
}

function wrapEntryWithDynamicImport(resolvedSentryConfigPath: string): InputPluginOption {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: If a function is only called in one place, and the calling function is already not that big, I always consider inlining it.

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.

I considered this function as the rollup plugin so I didn't want to inline it in the push(). However, I could add a JSDoc here for the plugin.

Comment on lines +162 to +169
if (source === 'import-in-the-middle/hook.mjs') {
return { id: source, moduleSideEffects: true, external: true };
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did this end up working? If so, we should probably add a comment what this is doing here. Somebody coming across this is probably like "what the hell is this?".

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.

Yes, that prevented the "Cannot find module" error in Netlify. I added a comment


moduleInfo.moduleSideEffects = true;

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

l: Quick comment what the '.' is about?

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.

According to the rollup docs it's the "path of from". As the . entry includes the exports from the file I figured the dot means exactly that: The exports from this file 🤔

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Yup, I know but I think we should add a comment about that 😄

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

// checks are needed to prevent multiple attachment of the suffix
return containsSuffix(source) || containsSuffix(resolution.id)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Aren't we already checking for containsSuffix(source) at the top of the hook?

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.

Yes, for the source. I changed the code a bit so there is only the check for resolution.id at this point.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
Comment on lines +72 to +79
`export function ${currFunctionName}(...args) {\n` +
` return import(${JSON.stringify(entryId)}).then((res) => res.${currFunctionName}(...args));\n` +
'}\n',
),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would gravitate woards making this function async, awaiting the import, and calling it with .call(this, args), just so that the this is preserved in case it is passed. This is usually important when monkepatching.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
*
* Only exported for testing.
*/
export function stripQueryPart(url: string): string {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: Maybe we can make this function name a bit more representative of what it does.

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.

Renamed it to removeSentryQueryFromPath

.split(',')
.filter(param => param !== '' && param !== 'default')
// sanitize
.map((str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What cases are we sanitizing for here?

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.

This function gets the functions from a file to re-export them. Theoretically, another rollup plugin could inject code here. As discussed in person, this is code a user can control so it is unlikely to be used by attackers but I'll keep it with a small comment - just to be safe.

@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from b5d568c to 0a7cd3cCompareOctober 14, 2024 10:52
@s1gr1d
s1gr1d requested a review from lforstOctober 14, 2024 10:53
@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from 0a7cd3c to 5f4c53dCompareOctober 14, 2024 11:50
@s1gr1d
s1gr1d merged commit 8249a5e into developOct 14, 2024
@s1gr1d
s1gr1d deleted the sig/server-entry-wrap-plugin branch October 14, 2024 14:52
s1gr1d added a commit that referenced this pull request Oct 17, 2024
BREAKING CHANGE: The `--import` flag must not be added anymore. If it is
still set, the server-side will be initialized twice and this leads to
unexpected errors.
---
First merge this:
#13945
Part of this:
#13943
This PR makes it the default to include a rollup plugin that wraps the
server entry file with a dynamic import (`import()`). This is a
replacement for the node `--import` CLI flag.
If you still want to manually add the CLI flag you can use this option
in the `nuxt.config.ts` file:
```js
sentry: {
dynamicImportForServerEntry: false,
}
```
(option name is up for discussion)
billyvg pushed a commit that referenced this pull request Oct 17, 2024
…13945)
Feature Issue:
#13943
Adds a Rollup plugin to wrap the server entry with `import()` to load it
after Sentry was initialized.
The plugin is not yet in use (will do this in another PR - see linked
issue above)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@s1gr1d@lforst
, '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(nuxt): Add Rollup plugin to wrap server entry with import() - #13945

Merged
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin
Oct 14, 2024
Merged

feat(nuxt): Add Rollup plugin to wrap server entry with import()#13945
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin

Conversation

@s1gr1d

@s1gr1ds1gr1d commented Oct 10, 2024

Copy link
Copy Markdown
Member

Feature Issue: #13943

Adds a Rollup plugin to wrap the server entry with import() to load it after Sentry was initialized.

The plugin is not yet in use (will do this in another PR - see linked issue above)

@lforstlforst left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

First pass. Generally looks good to me!

);
}

function wrapEntryWithDynamicImport(resolvedSentryConfigPath: string): InputPluginOption {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: If a function is only called in one place, and the calling function is already not that big, I always consider inlining it.

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.

I considered this function as the rollup plugin so I didn't want to inline it in the push(). However, I could add a JSDoc here for the plugin.

Comment on lines +162 to +169
if (source === 'import-in-the-middle/hook.mjs') {
return { id: source, moduleSideEffects: true, external: true };
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did this end up working? If so, we should probably add a comment what this is doing here. Somebody coming across this is probably like "what the hell is this?".

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.

Yes, that prevented the "Cannot find module" error in Netlify. I added a comment


moduleInfo.moduleSideEffects = true;

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

l: Quick comment what the '.' is about?

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.

According to the rollup docs it's the "path of from". As the . entry includes the exports from the file I figured the dot means exactly that: The exports from this file 🤔

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Yup, I know but I think we should add a comment about that 😄

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

// checks are needed to prevent multiple attachment of the suffix
return containsSuffix(source) || containsSuffix(resolution.id)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Aren't we already checking for containsSuffix(source) at the top of the hook?

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.

Yes, for the source. I changed the code a bit so there is only the check for resolution.id at this point.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
Comment on lines +72 to +79
`export function ${currFunctionName}(...args) {\n` +
` return import(${JSON.stringify(entryId)}).then((res) => res.${currFunctionName}(...args));\n` +
'}\n',
),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would gravitate woards making this function async, awaiting the import, and calling it with .call(this, args), just so that the this is preserved in case it is passed. This is usually important when monkepatching.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
*
* Only exported for testing.
*/
export function stripQueryPart(url: string): string {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: Maybe we can make this function name a bit more representative of what it does.

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.

Renamed it to removeSentryQueryFromPath

.split(',')
.filter(param => param !== '' && param !== 'default')
// sanitize
.map((str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What cases are we sanitizing for here?

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.

This function gets the functions from a file to re-export them. Theoretically, another rollup plugin could inject code here. As discussed in person, this is code a user can control so it is unlikely to be used by attackers but I'll keep it with a small comment - just to be safe.

@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from b5d568c to 0a7cd3cCompareOctober 14, 2024 10:52
@s1gr1d
s1gr1d requested a review from lforstOctober 14, 2024 10:53
@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from 0a7cd3c to 5f4c53dCompareOctober 14, 2024 11:50
@s1gr1d
s1gr1d merged commit 8249a5e into developOct 14, 2024
@s1gr1d
s1gr1d deleted the sig/server-entry-wrap-plugin branch October 14, 2024 14:52
s1gr1d added a commit that referenced this pull request Oct 17, 2024
BREAKING CHANGE: The `--import` flag must not be added anymore. If it is
still set, the server-side will be initialized twice and this leads to
unexpected errors.
---
First merge this:
#13945
Part of this:
#13943
This PR makes it the default to include a rollup plugin that wraps the
server entry file with a dynamic import (`import()`). This is a
replacement for the node `--import` CLI flag.
If you still want to manually add the CLI flag you can use this option
in the `nuxt.config.ts` file:
```js
sentry: {
dynamicImportForServerEntry: false,
}
```
(option name is up for discussion)
billyvg pushed a commit that referenced this pull request Oct 17, 2024
…13945)
Feature Issue:
#13943
Adds a Rollup plugin to wrap the server entry with `import()` to load it
after Sentry was initialized.
The plugin is not yet in use (will do this in another PR - see linked
issue above)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@s1gr1d@lforst
, '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(nuxt): Add Rollup plugin to wrap server entry with import() - #13945

Merged
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin
Oct 14, 2024
Merged

feat(nuxt): Add Rollup plugin to wrap server entry with import()#13945
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin

Conversation

@s1gr1d

@s1gr1ds1gr1d commented Oct 10, 2024

Copy link
Copy Markdown
Member

Feature Issue: #13943

Adds a Rollup plugin to wrap the server entry with import() to load it after Sentry was initialized.

The plugin is not yet in use (will do this in another PR - see linked issue above)

@lforstlforst left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

First pass. Generally looks good to me!

);
}

function wrapEntryWithDynamicImport(resolvedSentryConfigPath: string): InputPluginOption {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: If a function is only called in one place, and the calling function is already not that big, I always consider inlining it.

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.

I considered this function as the rollup plugin so I didn't want to inline it in the push(). However, I could add a JSDoc here for the plugin.

Comment on lines +162 to +169
if (source === 'import-in-the-middle/hook.mjs') {
return { id: source, moduleSideEffects: true, external: true };
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did this end up working? If so, we should probably add a comment what this is doing here. Somebody coming across this is probably like "what the hell is this?".

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.

Yes, that prevented the "Cannot find module" error in Netlify. I added a comment


moduleInfo.moduleSideEffects = true;

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

l: Quick comment what the '.' is about?

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.

According to the rollup docs it's the "path of from". As the . entry includes the exports from the file I figured the dot means exactly that: The exports from this file 🤔

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Yup, I know but I think we should add a comment about that 😄

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

// checks are needed to prevent multiple attachment of the suffix
return containsSuffix(source) || containsSuffix(resolution.id)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Aren't we already checking for containsSuffix(source) at the top of the hook?

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.

Yes, for the source. I changed the code a bit so there is only the check for resolution.id at this point.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
Comment on lines +72 to +79
`export function ${currFunctionName}(...args) {\n` +
` return import(${JSON.stringify(entryId)}).then((res) => res.${currFunctionName}(...args));\n` +
'}\n',
),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would gravitate woards making this function async, awaiting the import, and calling it with .call(this, args), just so that the this is preserved in case it is passed. This is usually important when monkepatching.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
*
* Only exported for testing.
*/
export function stripQueryPart(url: string): string {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: Maybe we can make this function name a bit more representative of what it does.

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.

Renamed it to removeSentryQueryFromPath

.split(',')
.filter(param => param !== '' && param !== 'default')
// sanitize
.map((str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What cases are we sanitizing for here?

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.

This function gets the functions from a file to re-export them. Theoretically, another rollup plugin could inject code here. As discussed in person, this is code a user can control so it is unlikely to be used by attackers but I'll keep it with a small comment - just to be safe.

@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from b5d568c to 0a7cd3cCompareOctober 14, 2024 10:52
@s1gr1d
s1gr1d requested a review from lforstOctober 14, 2024 10:53
@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from 0a7cd3c to 5f4c53dCompareOctober 14, 2024 11:50
@s1gr1d
s1gr1d merged commit 8249a5e into developOct 14, 2024
@s1gr1d
s1gr1d deleted the sig/server-entry-wrap-plugin branch October 14, 2024 14:52
s1gr1d added a commit that referenced this pull request Oct 17, 2024
BREAKING CHANGE: The `--import` flag must not be added anymore. If it is
still set, the server-side will be initialized twice and this leads to
unexpected errors.
---
First merge this:
#13945
Part of this:
#13943
This PR makes it the default to include a rollup plugin that wraps the
server entry file with a dynamic import (`import()`). This is a
replacement for the node `--import` CLI flag.
If you still want to manually add the CLI flag you can use this option
in the `nuxt.config.ts` file:
```js
sentry: {
dynamicImportForServerEntry: false,
}
```
(option name is up for discussion)
billyvg pushed a commit that referenced this pull request Oct 17, 2024
…13945)
Feature Issue:
#13943
Adds a Rollup plugin to wrap the server entry with `import()` to load it
after Sentry was initialized.
The plugin is not yet in use (will do this in another PR - see linked
issue above)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@s1gr1d@lforst
, '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(nuxt): Add Rollup plugin to wrap server entry with import() - #13945

Merged
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin
Oct 14, 2024
Merged

feat(nuxt): Add Rollup plugin to wrap server entry with import()#13945
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin

Conversation

@s1gr1d

@s1gr1ds1gr1d commented Oct 10, 2024

Copy link
Copy Markdown
Member

Feature Issue: #13943

Adds a Rollup plugin to wrap the server entry with import() to load it after Sentry was initialized.

The plugin is not yet in use (will do this in another PR - see linked issue above)

@lforstlforst left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

First pass. Generally looks good to me!

);
}

function wrapEntryWithDynamicImport(resolvedSentryConfigPath: string): InputPluginOption {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: If a function is only called in one place, and the calling function is already not that big, I always consider inlining it.

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.

I considered this function as the rollup plugin so I didn't want to inline it in the push(). However, I could add a JSDoc here for the plugin.

Comment on lines +162 to +169
if (source === 'import-in-the-middle/hook.mjs') {
return { id: source, moduleSideEffects: true, external: true };
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did this end up working? If so, we should probably add a comment what this is doing here. Somebody coming across this is probably like "what the hell is this?".

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.

Yes, that prevented the "Cannot find module" error in Netlify. I added a comment


moduleInfo.moduleSideEffects = true;

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

l: Quick comment what the '.' is about?

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.

According to the rollup docs it's the "path of from". As the . entry includes the exports from the file I figured the dot means exactly that: The exports from this file 🤔

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Yup, I know but I think we should add a comment about that 😄

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

// checks are needed to prevent multiple attachment of the suffix
return containsSuffix(source) || containsSuffix(resolution.id)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Aren't we already checking for containsSuffix(source) at the top of the hook?

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.

Yes, for the source. I changed the code a bit so there is only the check for resolution.id at this point.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
Comment on lines +72 to +79
`export function ${currFunctionName}(...args) {\n` +
` return import(${JSON.stringify(entryId)}).then((res) => res.${currFunctionName}(...args));\n` +
'}\n',
),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would gravitate woards making this function async, awaiting the import, and calling it with .call(this, args), just so that the this is preserved in case it is passed. This is usually important when monkepatching.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
*
* Only exported for testing.
*/
export function stripQueryPart(url: string): string {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: Maybe we can make this function name a bit more representative of what it does.

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.

Renamed it to removeSentryQueryFromPath

.split(',')
.filter(param => param !== '' && param !== 'default')
// sanitize
.map((str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What cases are we sanitizing for here?

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.

This function gets the functions from a file to re-export them. Theoretically, another rollup plugin could inject code here. As discussed in person, this is code a user can control so it is unlikely to be used by attackers but I'll keep it with a small comment - just to be safe.

@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from b5d568c to 0a7cd3cCompareOctober 14, 2024 10:52
@s1gr1d
s1gr1d requested a review from lforstOctober 14, 2024 10:53
@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from 0a7cd3c to 5f4c53dCompareOctober 14, 2024 11:50
@s1gr1d
s1gr1d merged commit 8249a5e into developOct 14, 2024
@s1gr1d
s1gr1d deleted the sig/server-entry-wrap-plugin branch October 14, 2024 14:52
s1gr1d added a commit that referenced this pull request Oct 17, 2024
BREAKING CHANGE: The `--import` flag must not be added anymore. If it is
still set, the server-side will be initialized twice and this leads to
unexpected errors.
---
First merge this:
#13945
Part of this:
#13943
This PR makes it the default to include a rollup plugin that wraps the
server entry file with a dynamic import (`import()`). This is a
replacement for the node `--import` CLI flag.
If you still want to manually add the CLI flag you can use this option
in the `nuxt.config.ts` file:
```js
sentry: {
dynamicImportForServerEntry: false,
}
```
(option name is up for discussion)
billyvg pushed a commit that referenced this pull request Oct 17, 2024
…13945)
Feature Issue:
#13943
Adds a Rollup plugin to wrap the server entry with `import()` to load it
after Sentry was initialized.
The plugin is not yet in use (will do this in another PR - see linked
issue above)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@s1gr1d@lforst
, '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(nuxt): Add Rollup plugin to wrap server entry with import() - #13945

Merged
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin
Oct 14, 2024
Merged

feat(nuxt): Add Rollup plugin to wrap server entry with import()#13945
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin

Conversation

@s1gr1d

@s1gr1ds1gr1d commented Oct 10, 2024

Copy link
Copy Markdown
Member

Feature Issue: #13943

Adds a Rollup plugin to wrap the server entry with import() to load it after Sentry was initialized.

The plugin is not yet in use (will do this in another PR - see linked issue above)

@lforstlforst left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

First pass. Generally looks good to me!

);
}

function wrapEntryWithDynamicImport(resolvedSentryConfigPath: string): InputPluginOption {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: If a function is only called in one place, and the calling function is already not that big, I always consider inlining it.

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.

I considered this function as the rollup plugin so I didn't want to inline it in the push(). However, I could add a JSDoc here for the plugin.

Comment on lines +162 to +169
if (source === 'import-in-the-middle/hook.mjs') {
return { id: source, moduleSideEffects: true, external: true };
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did this end up working? If so, we should probably add a comment what this is doing here. Somebody coming across this is probably like "what the hell is this?".

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.

Yes, that prevented the "Cannot find module" error in Netlify. I added a comment


moduleInfo.moduleSideEffects = true;

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

l: Quick comment what the '.' is about?

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.

According to the rollup docs it's the "path of from". As the . entry includes the exports from the file I figured the dot means exactly that: The exports from this file 🤔

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Yup, I know but I think we should add a comment about that 😄

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

// checks are needed to prevent multiple attachment of the suffix
return containsSuffix(source) || containsSuffix(resolution.id)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Aren't we already checking for containsSuffix(source) at the top of the hook?

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.

Yes, for the source. I changed the code a bit so there is only the check for resolution.id at this point.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
Comment on lines +72 to +79
`export function ${currFunctionName}(...args) {\n` +
` return import(${JSON.stringify(entryId)}).then((res) => res.${currFunctionName}(...args));\n` +
'}\n',
),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would gravitate woards making this function async, awaiting the import, and calling it with .call(this, args), just so that the this is preserved in case it is passed. This is usually important when monkepatching.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
*
* Only exported for testing.
*/
export function stripQueryPart(url: string): string {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: Maybe we can make this function name a bit more representative of what it does.

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.

Renamed it to removeSentryQueryFromPath

.split(',')
.filter(param => param !== '' && param !== 'default')
// sanitize
.map((str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What cases are we sanitizing for here?

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.

This function gets the functions from a file to re-export them. Theoretically, another rollup plugin could inject code here. As discussed in person, this is code a user can control so it is unlikely to be used by attackers but I'll keep it with a small comment - just to be safe.

@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from b5d568c to 0a7cd3cCompareOctober 14, 2024 10:52
@s1gr1d
s1gr1d requested a review from lforstOctober 14, 2024 10:53
@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from 0a7cd3c to 5f4c53dCompareOctober 14, 2024 11:50
@s1gr1d
s1gr1d merged commit 8249a5e into developOct 14, 2024
@s1gr1d
s1gr1d deleted the sig/server-entry-wrap-plugin branch October 14, 2024 14:52
s1gr1d added a commit that referenced this pull request Oct 17, 2024
BREAKING CHANGE: The `--import` flag must not be added anymore. If it is
still set, the server-side will be initialized twice and this leads to
unexpected errors.
---
First merge this:
#13945
Part of this:
#13943
This PR makes it the default to include a rollup plugin that wraps the
server entry file with a dynamic import (`import()`). This is a
replacement for the node `--import` CLI flag.
If you still want to manually add the CLI flag you can use this option
in the `nuxt.config.ts` file:
```js
sentry: {
dynamicImportForServerEntry: false,
}
```
(option name is up for discussion)
billyvg pushed a commit that referenced this pull request Oct 17, 2024
…13945)
Feature Issue:
#13943
Adds a Rollup plugin to wrap the server entry with `import()` to load it
after Sentry was initialized.
The plugin is not yet in use (will do this in another PR - see linked
issue above)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@s1gr1d@lforst
, '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(nuxt): Add Rollup plugin to wrap server entry with import() - #13945

Merged
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin
Oct 14, 2024
Merged

feat(nuxt): Add Rollup plugin to wrap server entry with import()#13945
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin

Conversation

@s1gr1d

@s1gr1ds1gr1d commented Oct 10, 2024

Copy link
Copy Markdown
Member

Feature Issue: #13943

Adds a Rollup plugin to wrap the server entry with import() to load it after Sentry was initialized.

The plugin is not yet in use (will do this in another PR - see linked issue above)

@lforstlforst left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

First pass. Generally looks good to me!

);
}

function wrapEntryWithDynamicImport(resolvedSentryConfigPath: string): InputPluginOption {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: If a function is only called in one place, and the calling function is already not that big, I always consider inlining it.

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.

I considered this function as the rollup plugin so I didn't want to inline it in the push(). However, I could add a JSDoc here for the plugin.

Comment on lines +162 to +169
if (source === 'import-in-the-middle/hook.mjs') {
return { id: source, moduleSideEffects: true, external: true };
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did this end up working? If so, we should probably add a comment what this is doing here. Somebody coming across this is probably like "what the hell is this?".

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.

Yes, that prevented the "Cannot find module" error in Netlify. I added a comment


moduleInfo.moduleSideEffects = true;

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

l: Quick comment what the '.' is about?

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.

According to the rollup docs it's the "path of from". As the . entry includes the exports from the file I figured the dot means exactly that: The exports from this file 🤔

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Yup, I know but I think we should add a comment about that 😄

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

// checks are needed to prevent multiple attachment of the suffix
return containsSuffix(source) || containsSuffix(resolution.id)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Aren't we already checking for containsSuffix(source) at the top of the hook?

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.

Yes, for the source. I changed the code a bit so there is only the check for resolution.id at this point.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
Comment on lines +72 to +79
`export function ${currFunctionName}(...args) {\n` +
` return import(${JSON.stringify(entryId)}).then((res) => res.${currFunctionName}(...args));\n` +
'}\n',
),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would gravitate woards making this function async, awaiting the import, and calling it with .call(this, args), just so that the this is preserved in case it is passed. This is usually important when monkepatching.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
*
* Only exported for testing.
*/
export function stripQueryPart(url: string): string {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: Maybe we can make this function name a bit more representative of what it does.

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.

Renamed it to removeSentryQueryFromPath

.split(',')
.filter(param => param !== '' && param !== 'default')
// sanitize
.map((str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What cases are we sanitizing for here?

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.

This function gets the functions from a file to re-export them. Theoretically, another rollup plugin could inject code here. As discussed in person, this is code a user can control so it is unlikely to be used by attackers but I'll keep it with a small comment - just to be safe.

@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from b5d568c to 0a7cd3cCompareOctober 14, 2024 10:52
@s1gr1d
s1gr1d requested a review from lforstOctober 14, 2024 10:53
@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from 0a7cd3c to 5f4c53dCompareOctober 14, 2024 11:50
@s1gr1d
s1gr1d merged commit 8249a5e into developOct 14, 2024
@s1gr1d
s1gr1d deleted the sig/server-entry-wrap-plugin branch October 14, 2024 14:52
s1gr1d added a commit that referenced this pull request Oct 17, 2024
BREAKING CHANGE: The `--import` flag must not be added anymore. If it is
still set, the server-side will be initialized twice and this leads to
unexpected errors.
---
First merge this:
#13945
Part of this:
#13943
This PR makes it the default to include a rollup plugin that wraps the
server entry file with a dynamic import (`import()`). This is a
replacement for the node `--import` CLI flag.
If you still want to manually add the CLI flag you can use this option
in the `nuxt.config.ts` file:
```js
sentry: {
dynamicImportForServerEntry: false,
}
```
(option name is up for discussion)
billyvg pushed a commit that referenced this pull request Oct 17, 2024
…13945)
Feature Issue:
#13943
Adds a Rollup plugin to wrap the server entry with `import()` to load it
after Sentry was initialized.
The plugin is not yet in use (will do this in another PR - see linked
issue above)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@s1gr1d@lforst
, '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(nuxt): Add Rollup plugin to wrap server entry with import() - #13945

Merged
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin
Oct 14, 2024
Merged

feat(nuxt): Add Rollup plugin to wrap server entry with import()#13945
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin

Conversation

@s1gr1d

@s1gr1ds1gr1d commented Oct 10, 2024

Copy link
Copy Markdown
Member

Feature Issue: #13943

Adds a Rollup plugin to wrap the server entry with import() to load it after Sentry was initialized.

The plugin is not yet in use (will do this in another PR - see linked issue above)

@lforstlforst left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

First pass. Generally looks good to me!

);
}

function wrapEntryWithDynamicImport(resolvedSentryConfigPath: string): InputPluginOption {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: If a function is only called in one place, and the calling function is already not that big, I always consider inlining it.

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.

I considered this function as the rollup plugin so I didn't want to inline it in the push(). However, I could add a JSDoc here for the plugin.

Comment on lines +162 to +169
if (source === 'import-in-the-middle/hook.mjs') {
return { id: source, moduleSideEffects: true, external: true };
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did this end up working? If so, we should probably add a comment what this is doing here. Somebody coming across this is probably like "what the hell is this?".

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.

Yes, that prevented the "Cannot find module" error in Netlify. I added a comment


moduleInfo.moduleSideEffects = true;

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

l: Quick comment what the '.' is about?

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.

According to the rollup docs it's the "path of from". As the . entry includes the exports from the file I figured the dot means exactly that: The exports from this file 🤔

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Yup, I know but I think we should add a comment about that 😄

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

// checks are needed to prevent multiple attachment of the suffix
return containsSuffix(source) || containsSuffix(resolution.id)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Aren't we already checking for containsSuffix(source) at the top of the hook?

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.

Yes, for the source. I changed the code a bit so there is only the check for resolution.id at this point.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
Comment on lines +72 to +79
`export function ${currFunctionName}(...args) {\n` +
` return import(${JSON.stringify(entryId)}).then((res) => res.${currFunctionName}(...args));\n` +
'}\n',
),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would gravitate woards making this function async, awaiting the import, and calling it with .call(this, args), just so that the this is preserved in case it is passed. This is usually important when monkepatching.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
*
* Only exported for testing.
*/
export function stripQueryPart(url: string): string {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: Maybe we can make this function name a bit more representative of what it does.

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.

Renamed it to removeSentryQueryFromPath

.split(',')
.filter(param => param !== '' && param !== 'default')
// sanitize
.map((str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What cases are we sanitizing for here?

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.

This function gets the functions from a file to re-export them. Theoretically, another rollup plugin could inject code here. As discussed in person, this is code a user can control so it is unlikely to be used by attackers but I'll keep it with a small comment - just to be safe.

@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from b5d568c to 0a7cd3cCompareOctober 14, 2024 10:52
@s1gr1d
s1gr1d requested a review from lforstOctober 14, 2024 10:53
@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from 0a7cd3c to 5f4c53dCompareOctober 14, 2024 11:50
@s1gr1d
s1gr1d merged commit 8249a5e into developOct 14, 2024
@s1gr1d
s1gr1d deleted the sig/server-entry-wrap-plugin branch October 14, 2024 14:52
s1gr1d added a commit that referenced this pull request Oct 17, 2024
BREAKING CHANGE: The `--import` flag must not be added anymore. If it is
still set, the server-side will be initialized twice and this leads to
unexpected errors.
---
First merge this:
#13945
Part of this:
#13943
This PR makes it the default to include a rollup plugin that wraps the
server entry file with a dynamic import (`import()`). This is a
replacement for the node `--import` CLI flag.
If you still want to manually add the CLI flag you can use this option
in the `nuxt.config.ts` file:
```js
sentry: {
dynamicImportForServerEntry: false,
}
```
(option name is up for discussion)
billyvg pushed a commit that referenced this pull request Oct 17, 2024
…13945)
Feature Issue:
#13943
Adds a Rollup plugin to wrap the server entry with `import()` to load it
after Sentry was initialized.
The plugin is not yet in use (will do this in another PR - see linked
issue above)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@s1gr1d@lforst
, '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(nuxt): Add Rollup plugin to wrap server entry with import() - #13945

Merged
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin
Oct 14, 2024
Merged

feat(nuxt): Add Rollup plugin to wrap server entry with import()#13945
s1gr1d merged 3 commits into
developfrom
sig/server-entry-wrap-plugin

Conversation

@s1gr1d

@s1gr1ds1gr1d commented Oct 10, 2024

Copy link
Copy Markdown
Member

Feature Issue: #13943

Adds a Rollup plugin to wrap the server entry with import() to load it after Sentry was initialized.

The plugin is not yet in use (will do this in another PR - see linked issue above)

@lforstlforst left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

First pass. Generally looks good to me!

);
}

function wrapEntryWithDynamicImport(resolvedSentryConfigPath: string): InputPluginOption {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: If a function is only called in one place, and the calling function is already not that big, I always consider inlining it.

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.

I considered this function as the rollup plugin so I didn't want to inline it in the push(). However, I could add a JSDoc here for the plugin.

Comment on lines +162 to +169
if (source === 'import-in-the-middle/hook.mjs') {
return { id: source, moduleSideEffects: true, external: true };
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did this end up working? If so, we should probably add a comment what this is doing here. Somebody coming across this is probably like "what the hell is this?".

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.

Yes, that prevented the "Cannot find module" error in Netlify. I added a comment


moduleInfo.moduleSideEffects = true;

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

l: Quick comment what the '.' is about?

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.

According to the rollup docs it's the "path of from". As the . entry includes the exports from the file I figured the dot means exactly that: The exports from this file 🤔

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Yup, I know but I think we should add a comment about that 😄

const exportedFunctions = moduleInfo.exportedBindings?.['.'];

// checks are needed to prevent multiple attachment of the suffix
return containsSuffix(source) || containsSuffix(resolution.id)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Aren't we already checking for containsSuffix(source) at the top of the hook?

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.

Yes, for the source. I changed the code a bit so there is only the check for resolution.id at this point.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
Comment on lines +72 to +79
`export function ${currFunctionName}(...args) {\n` +
` return import(${JSON.stringify(entryId)}).then((res) => res.${currFunctionName}(...args));\n` +
'}\n',
),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would gravitate woards making this function async, awaiting the import, and calling it with .call(this, args), just so that the this is preserved in case it is passed. This is usually important when monkepatching.

Comment threadpackages/nuxt/src/vite/utils.ts Outdated
*
* Only exported for testing.
*/
export function stripQueryPart(url: string): string {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: Maybe we can make this function name a bit more representative of what it does.

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.

Renamed it to removeSentryQueryFromPath

.split(',')
.filter(param => param !== '' && param !== 'default')
// sanitize
.map((str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What cases are we sanitizing for here?

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.

This function gets the functions from a file to re-export them. Theoretically, another rollup plugin could inject code here. As discussed in person, this is code a user can control so it is unlikely to be used by attackers but I'll keep it with a small comment - just to be safe.

@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from b5d568c to 0a7cd3cCompareOctober 14, 2024 10:52
@s1gr1d
s1gr1d requested a review from lforstOctober 14, 2024 10:53
@s1gr1d
s1gr1dforce-pushed the sig/server-entry-wrap-plugin branch from 0a7cd3c to 5f4c53dCompareOctober 14, 2024 11:50
@s1gr1d
s1gr1d merged commit 8249a5e into developOct 14, 2024
@s1gr1d
s1gr1d deleted the sig/server-entry-wrap-plugin branch October 14, 2024 14:52
s1gr1d added a commit that referenced this pull request Oct 17, 2024
BREAKING CHANGE: The `--import` flag must not be added anymore. If it is
still set, the server-side will be initialized twice and this leads to
unexpected errors.
---
First merge this:
#13945
Part of this:
#13943
This PR makes it the default to include a rollup plugin that wraps the
server entry file with a dynamic import (`import()`). This is a
replacement for the node `--import` CLI flag.
If you still want to manually add the CLI flag you can use this option
in the `nuxt.config.ts` file:
```js
sentry: {
dynamicImportForServerEntry: false,
}
```
(option name is up for discussion)
billyvg pushed a commit that referenced this pull request Oct 17, 2024
…13945)
Feature Issue:
#13943
Adds a Rollup plugin to wrap the server entry with `import()` to load it
after Sentry was initialized.
The plugin is not yet in use (will do this in another PR - see linked
issue above)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@s1gr1d@lforst