feat(react-router): Add build-time config - #15406

Merged
chargome merged 22 commits into
developfrom
cg/rr-build-time-config
Feb 27, 2025
Merged

feat(react-router): Add build-time config#15406
chargome merged 22 commits into
developfrom
cg/rr-build-time-config

Conversation

@chargome

@chargomechargome commented Feb 13, 2025

Copy link
Copy Markdown
Member
  • Adds a vite plugin for react router that handles:
    • Updating sourcemap settings
    • Release injection
    • Telemetry Data
  • Adds a sentryOnBuildEnd hook that handles:
    • Creating releases
    • DebugId injection
    • Uploading sourcemaps
    • Deleting sourcemaps after upload

Currently the options passed to both the plugin and the hook partly overlap which is confusing, would be nice to just have one common options object at the end. Actually I can pass these options via vite and read them in the hook

We'll need to revisit this and move DebugId injection back to the vite plugin to avoid modifying the final build. For the alpha release we'll still rely on the SentryCli.

closes#15188

@chargomechargome self-assigned this Feb 13, 2025
@codecov

codecovBot commented Feb 13, 2025

Copy link
Copy Markdown

❌ 2 Tests Failed:

Tests completedFailedPassedSkipped
466224660324
View the top 2 failed test(s) by shortest run time
test/integration/test/client/root-loader.test.tsshouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.079s run time
root-loader.test.ts:177:1shouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
test/integration/test/client/root-loader.test.tsshouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.11s run time
root-loader.test.ts:165:1shouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@chargome
chargomeforce-pushed the cg/rr-build-time-config branch from 152b618 to dca9d06CompareFebruary 17, 2025 09:08
@chargomechargome changed the title feat(react-router): Add vite pluginfeat(react-router): Add build-time configFeb 21, 2025
@chargome
chargome marked this pull request as ready for review February 24, 2025 14:13
@chargome
chargome requested review from a team, Lms24, s1gr1d and stephanie-anderson and removed request for a team and stephanie-andersonFebruary 24, 2025 14:13
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/src/vite/makeCustomSentryVitePlugins.ts Outdated

@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.

The approach generally looks good to me (as we already discussed offline). I think it's good to try to get debugId injection into the plugin but it's totally fine to go with this solution for the alpha. Likewise, I had some comments for things to address after the initial alpha but IMHO they don't block a first alpha release.

export default defineConfig(config => {
return {
plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
sentryConfig,

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.

l: just to confirm does this not throw a type error? or is defineConfig lenient enough to allow adding arbitrary keys to the config object?

@Lms24Lms24Feb 26, 2025

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.

Also something to explore in the future: Maybe we can add a plugin in sentryReactRouter that adds the sentryConfig in the config hook to the vite config, so that users don't have to do it explicitly. Not sure if you already tried this, or which instance of the vite config is passed into buildEnd but maybe it's worth a shot. we could even try to write it onto the global object to pass it over 😅

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.

Didn't throw a type error, but you are right the best solution for this would be to define this in a plugin that we add! Will do that in a follow up task

let updatedFilesToDeleteAfterUpload = sourceMapsUploadOptions?.filesToDeleteAfterUpload;
// set a default value no option was set
if (typeof sourceMapsUploadOptions?.filesToDeleteAfterUpload === 'undefined') {
updatedFilesToDeleteAfterUpload = [`${reactRouterConfig.buildDirectory}/**/*.map`];

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.

m/something to follow up on: We only want to delete source maps by default if it was us who turned on source map generation in the first place. This was the reason why I had to pass the promise for filesToDeleteAfterUpload in SvelteKit, because I only knew that once makeEnableSourceMapsPlugin's config hook was invoked. But since we have the vite config here, and we don't rely on the original file deletion plugin, maybe we can solve this simpler 🤔

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 my issue was that I only get the final vite config here and not the initial one, BUT I guess we can maybe just write that into the config as well with a custom plugin (like the sentryConfig from your comment above)


export default {
ssr: true,
buildEnd: sentryOnBuildEnd,

@Lms24Lms24Feb 26, 2025

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.

l/Q: is there some kind of sequence() helper or so in case people have more than one buildEnd callback?

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.

in this case they could just

buildEnd: ({ viteConfig, reactRouterConfig, buildManifest })=>{// do their stuffsentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });},

@chargome
chargome merged commit 9a55e17 into developFeb 27, 2025
@chargome
chargome deleted the cg/rr-build-time-config branch February 27, 2025 09:39
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.

[RR7] Add build time configuration

3 participants

@chargome@Lms24@s1gr1d
, '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(react-router): Add build-time config - #15406

Merged
chargome merged 22 commits into
developfrom
cg/rr-build-time-config
Feb 27, 2025
Merged

feat(react-router): Add build-time config#15406
chargome merged 22 commits into
developfrom
cg/rr-build-time-config

Conversation

@chargome

@chargomechargome commented Feb 13, 2025

Copy link
Copy Markdown
Member
  • Adds a vite plugin for react router that handles:
    • Updating sourcemap settings
    • Release injection
    • Telemetry Data
  • Adds a sentryOnBuildEnd hook that handles:
    • Creating releases
    • DebugId injection
    • Uploading sourcemaps
    • Deleting sourcemaps after upload

Currently the options passed to both the plugin and the hook partly overlap which is confusing, would be nice to just have one common options object at the end. Actually I can pass these options via vite and read them in the hook

We'll need to revisit this and move DebugId injection back to the vite plugin to avoid modifying the final build. For the alpha release we'll still rely on the SentryCli.

closes#15188

@chargomechargome self-assigned this Feb 13, 2025
@codecov

codecovBot commented Feb 13, 2025

Copy link
Copy Markdown

❌ 2 Tests Failed:

Tests completedFailedPassedSkipped
466224660324
View the top 2 failed test(s) by shortest run time
test/integration/test/client/root-loader.test.tsshouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.079s run time
root-loader.test.ts:177:1shouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
test/integration/test/client/root-loader.test.tsshouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.11s run time
root-loader.test.ts:165:1shouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@chargome
chargomeforce-pushed the cg/rr-build-time-config branch from 152b618 to dca9d06CompareFebruary 17, 2025 09:08
@chargomechargome changed the title feat(react-router): Add vite pluginfeat(react-router): Add build-time configFeb 21, 2025
@chargome
chargome marked this pull request as ready for review February 24, 2025 14:13
@chargome
chargome requested review from a team, Lms24, s1gr1d and stephanie-anderson and removed request for a team and stephanie-andersonFebruary 24, 2025 14:13
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/src/vite/makeCustomSentryVitePlugins.ts Outdated

@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.

The approach generally looks good to me (as we already discussed offline). I think it's good to try to get debugId injection into the plugin but it's totally fine to go with this solution for the alpha. Likewise, I had some comments for things to address after the initial alpha but IMHO they don't block a first alpha release.

export default defineConfig(config => {
return {
plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
sentryConfig,

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.

l: just to confirm does this not throw a type error? or is defineConfig lenient enough to allow adding arbitrary keys to the config object?

@Lms24Lms24Feb 26, 2025

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.

Also something to explore in the future: Maybe we can add a plugin in sentryReactRouter that adds the sentryConfig in the config hook to the vite config, so that users don't have to do it explicitly. Not sure if you already tried this, or which instance of the vite config is passed into buildEnd but maybe it's worth a shot. we could even try to write it onto the global object to pass it over 😅

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.

Didn't throw a type error, but you are right the best solution for this would be to define this in a plugin that we add! Will do that in a follow up task

let updatedFilesToDeleteAfterUpload = sourceMapsUploadOptions?.filesToDeleteAfterUpload;
// set a default value no option was set
if (typeof sourceMapsUploadOptions?.filesToDeleteAfterUpload === 'undefined') {
updatedFilesToDeleteAfterUpload = [`${reactRouterConfig.buildDirectory}/**/*.map`];

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.

m/something to follow up on: We only want to delete source maps by default if it was us who turned on source map generation in the first place. This was the reason why I had to pass the promise for filesToDeleteAfterUpload in SvelteKit, because I only knew that once makeEnableSourceMapsPlugin's config hook was invoked. But since we have the vite config here, and we don't rely on the original file deletion plugin, maybe we can solve this simpler 🤔

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 my issue was that I only get the final vite config here and not the initial one, BUT I guess we can maybe just write that into the config as well with a custom plugin (like the sentryConfig from your comment above)


export default {
ssr: true,
buildEnd: sentryOnBuildEnd,

@Lms24Lms24Feb 26, 2025

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.

l/Q: is there some kind of sequence() helper or so in case people have more than one buildEnd callback?

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.

in this case they could just

buildEnd: ({ viteConfig, reactRouterConfig, buildManifest })=>{// do their stuffsentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });},

@chargome
chargome merged commit 9a55e17 into developFeb 27, 2025
@chargome
chargome deleted the cg/rr-build-time-config branch February 27, 2025 09:39
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.

[RR7] Add build time configuration

3 participants

@chargome@Lms24@s1gr1d
, '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(react-router): Add build-time config - #15406

Merged
chargome merged 22 commits into
developfrom
cg/rr-build-time-config
Feb 27, 2025
Merged

feat(react-router): Add build-time config#15406
chargome merged 22 commits into
developfrom
cg/rr-build-time-config

Conversation

@chargome

@chargomechargome commented Feb 13, 2025

Copy link
Copy Markdown
Member
  • Adds a vite plugin for react router that handles:
    • Updating sourcemap settings
    • Release injection
    • Telemetry Data
  • Adds a sentryOnBuildEnd hook that handles:
    • Creating releases
    • DebugId injection
    • Uploading sourcemaps
    • Deleting sourcemaps after upload

Currently the options passed to both the plugin and the hook partly overlap which is confusing, would be nice to just have one common options object at the end. Actually I can pass these options via vite and read them in the hook

We'll need to revisit this and move DebugId injection back to the vite plugin to avoid modifying the final build. For the alpha release we'll still rely on the SentryCli.

closes#15188

@chargomechargome self-assigned this Feb 13, 2025
@codecov

codecovBot commented Feb 13, 2025

Copy link
Copy Markdown

❌ 2 Tests Failed:

Tests completedFailedPassedSkipped
466224660324
View the top 2 failed test(s) by shortest run time
test/integration/test/client/root-loader.test.tsshouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.079s run time
root-loader.test.ts:177:1shouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
test/integration/test/client/root-loader.test.tsshouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.11s run time
root-loader.test.ts:165:1shouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@chargome
chargomeforce-pushed the cg/rr-build-time-config branch from 152b618 to dca9d06CompareFebruary 17, 2025 09:08
@chargomechargome changed the title feat(react-router): Add vite pluginfeat(react-router): Add build-time configFeb 21, 2025
@chargome
chargome marked this pull request as ready for review February 24, 2025 14:13
@chargome
chargome requested review from a team, Lms24, s1gr1d and stephanie-anderson and removed request for a team and stephanie-andersonFebruary 24, 2025 14:13
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/src/vite/makeCustomSentryVitePlugins.ts Outdated

@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.

The approach generally looks good to me (as we already discussed offline). I think it's good to try to get debugId injection into the plugin but it's totally fine to go with this solution for the alpha. Likewise, I had some comments for things to address after the initial alpha but IMHO they don't block a first alpha release.

export default defineConfig(config => {
return {
plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
sentryConfig,

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.

l: just to confirm does this not throw a type error? or is defineConfig lenient enough to allow adding arbitrary keys to the config object?

@Lms24Lms24Feb 26, 2025

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.

Also something to explore in the future: Maybe we can add a plugin in sentryReactRouter that adds the sentryConfig in the config hook to the vite config, so that users don't have to do it explicitly. Not sure if you already tried this, or which instance of the vite config is passed into buildEnd but maybe it's worth a shot. we could even try to write it onto the global object to pass it over 😅

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.

Didn't throw a type error, but you are right the best solution for this would be to define this in a plugin that we add! Will do that in a follow up task

let updatedFilesToDeleteAfterUpload = sourceMapsUploadOptions?.filesToDeleteAfterUpload;
// set a default value no option was set
if (typeof sourceMapsUploadOptions?.filesToDeleteAfterUpload === 'undefined') {
updatedFilesToDeleteAfterUpload = [`${reactRouterConfig.buildDirectory}/**/*.map`];

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.

m/something to follow up on: We only want to delete source maps by default if it was us who turned on source map generation in the first place. This was the reason why I had to pass the promise for filesToDeleteAfterUpload in SvelteKit, because I only knew that once makeEnableSourceMapsPlugin's config hook was invoked. But since we have the vite config here, and we don't rely on the original file deletion plugin, maybe we can solve this simpler 🤔

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 my issue was that I only get the final vite config here and not the initial one, BUT I guess we can maybe just write that into the config as well with a custom plugin (like the sentryConfig from your comment above)


export default {
ssr: true,
buildEnd: sentryOnBuildEnd,

@Lms24Lms24Feb 26, 2025

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.

l/Q: is there some kind of sequence() helper or so in case people have more than one buildEnd callback?

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.

in this case they could just

buildEnd: ({ viteConfig, reactRouterConfig, buildManifest })=>{// do their stuffsentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });},

@chargome
chargome merged commit 9a55e17 into developFeb 27, 2025
@chargome
chargome deleted the cg/rr-build-time-config branch February 27, 2025 09:39
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.

[RR7] Add build time configuration

3 participants

@chargome@Lms24@s1gr1d
, '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(react-router): Add build-time config - #15406

Merged
chargome merged 22 commits into
developfrom
cg/rr-build-time-config
Feb 27, 2025
Merged

feat(react-router): Add build-time config#15406
chargome merged 22 commits into
developfrom
cg/rr-build-time-config

Conversation

@chargome

@chargomechargome commented Feb 13, 2025

Copy link
Copy Markdown
Member
  • Adds a vite plugin for react router that handles:
    • Updating sourcemap settings
    • Release injection
    • Telemetry Data
  • Adds a sentryOnBuildEnd hook that handles:
    • Creating releases
    • DebugId injection
    • Uploading sourcemaps
    • Deleting sourcemaps after upload

Currently the options passed to both the plugin and the hook partly overlap which is confusing, would be nice to just have one common options object at the end. Actually I can pass these options via vite and read them in the hook

We'll need to revisit this and move DebugId injection back to the vite plugin to avoid modifying the final build. For the alpha release we'll still rely on the SentryCli.

closes#15188

@chargomechargome self-assigned this Feb 13, 2025
@codecov

codecovBot commented Feb 13, 2025

Copy link
Copy Markdown

❌ 2 Tests Failed:

Tests completedFailedPassedSkipped
466224660324
View the top 2 failed test(s) by shortest run time
test/integration/test/client/root-loader.test.tsshouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.079s run time
root-loader.test.ts:177:1shouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
test/integration/test/client/root-loader.test.tsshouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.11s run time
root-loader.test.ts:165:1shouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@chargome
chargomeforce-pushed the cg/rr-build-time-config branch from 152b618 to dca9d06CompareFebruary 17, 2025 09:08
@chargomechargome changed the title feat(react-router): Add vite pluginfeat(react-router): Add build-time configFeb 21, 2025
@chargome
chargome marked this pull request as ready for review February 24, 2025 14:13
@chargome
chargome requested review from a team, Lms24, s1gr1d and stephanie-anderson and removed request for a team and stephanie-andersonFebruary 24, 2025 14:13
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/src/vite/makeCustomSentryVitePlugins.ts Outdated

@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.

The approach generally looks good to me (as we already discussed offline). I think it's good to try to get debugId injection into the plugin but it's totally fine to go with this solution for the alpha. Likewise, I had some comments for things to address after the initial alpha but IMHO they don't block a first alpha release.

export default defineConfig(config => {
return {
plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
sentryConfig,

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.

l: just to confirm does this not throw a type error? or is defineConfig lenient enough to allow adding arbitrary keys to the config object?

@Lms24Lms24Feb 26, 2025

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.

Also something to explore in the future: Maybe we can add a plugin in sentryReactRouter that adds the sentryConfig in the config hook to the vite config, so that users don't have to do it explicitly. Not sure if you already tried this, or which instance of the vite config is passed into buildEnd but maybe it's worth a shot. we could even try to write it onto the global object to pass it over 😅

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.

Didn't throw a type error, but you are right the best solution for this would be to define this in a plugin that we add! Will do that in a follow up task

let updatedFilesToDeleteAfterUpload = sourceMapsUploadOptions?.filesToDeleteAfterUpload;
// set a default value no option was set
if (typeof sourceMapsUploadOptions?.filesToDeleteAfterUpload === 'undefined') {
updatedFilesToDeleteAfterUpload = [`${reactRouterConfig.buildDirectory}/**/*.map`];

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.

m/something to follow up on: We only want to delete source maps by default if it was us who turned on source map generation in the first place. This was the reason why I had to pass the promise for filesToDeleteAfterUpload in SvelteKit, because I only knew that once makeEnableSourceMapsPlugin's config hook was invoked. But since we have the vite config here, and we don't rely on the original file deletion plugin, maybe we can solve this simpler 🤔

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 my issue was that I only get the final vite config here and not the initial one, BUT I guess we can maybe just write that into the config as well with a custom plugin (like the sentryConfig from your comment above)


export default {
ssr: true,
buildEnd: sentryOnBuildEnd,

@Lms24Lms24Feb 26, 2025

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.

l/Q: is there some kind of sequence() helper or so in case people have more than one buildEnd callback?

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.

in this case they could just

buildEnd: ({ viteConfig, reactRouterConfig, buildManifest })=>{// do their stuffsentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });},

@chargome
chargome merged commit 9a55e17 into developFeb 27, 2025
@chargome
chargome deleted the cg/rr-build-time-config branch February 27, 2025 09:39
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.

[RR7] Add build time configuration

3 participants

@chargome@Lms24@s1gr1d
, '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(react-router): Add build-time config - #15406

Merged
chargome merged 22 commits into
developfrom
cg/rr-build-time-config
Feb 27, 2025
Merged

feat(react-router): Add build-time config#15406
chargome merged 22 commits into
developfrom
cg/rr-build-time-config

Conversation

@chargome

@chargomechargome commented Feb 13, 2025

Copy link
Copy Markdown
Member
  • Adds a vite plugin for react router that handles:
    • Updating sourcemap settings
    • Release injection
    • Telemetry Data
  • Adds a sentryOnBuildEnd hook that handles:
    • Creating releases
    • DebugId injection
    • Uploading sourcemaps
    • Deleting sourcemaps after upload

Currently the options passed to both the plugin and the hook partly overlap which is confusing, would be nice to just have one common options object at the end. Actually I can pass these options via vite and read them in the hook

We'll need to revisit this and move DebugId injection back to the vite plugin to avoid modifying the final build. For the alpha release we'll still rely on the SentryCli.

closes#15188

@chargomechargome self-assigned this Feb 13, 2025
@codecov

codecovBot commented Feb 13, 2025

Copy link
Copy Markdown

❌ 2 Tests Failed:

Tests completedFailedPassedSkipped
466224660324
View the top 2 failed test(s) by shortest run time
test/integration/test/client/root-loader.test.tsshouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.079s run time
root-loader.test.ts:177:1shouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
test/integration/test/client/root-loader.test.tsshouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.11s run time
root-loader.test.ts:165:1shouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@chargome
chargomeforce-pushed the cg/rr-build-time-config branch from 152b618 to dca9d06CompareFebruary 17, 2025 09:08
@chargomechargome changed the title feat(react-router): Add vite pluginfeat(react-router): Add build-time configFeb 21, 2025
@chargome
chargome marked this pull request as ready for review February 24, 2025 14:13
@chargome
chargome requested review from a team, Lms24, s1gr1d and stephanie-anderson and removed request for a team and stephanie-andersonFebruary 24, 2025 14:13
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/src/vite/makeCustomSentryVitePlugins.ts Outdated

@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.

The approach generally looks good to me (as we already discussed offline). I think it's good to try to get debugId injection into the plugin but it's totally fine to go with this solution for the alpha. Likewise, I had some comments for things to address after the initial alpha but IMHO they don't block a first alpha release.

export default defineConfig(config => {
return {
plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
sentryConfig,

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.

l: just to confirm does this not throw a type error? or is defineConfig lenient enough to allow adding arbitrary keys to the config object?

@Lms24Lms24Feb 26, 2025

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.

Also something to explore in the future: Maybe we can add a plugin in sentryReactRouter that adds the sentryConfig in the config hook to the vite config, so that users don't have to do it explicitly. Not sure if you already tried this, or which instance of the vite config is passed into buildEnd but maybe it's worth a shot. we could even try to write it onto the global object to pass it over 😅

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.

Didn't throw a type error, but you are right the best solution for this would be to define this in a plugin that we add! Will do that in a follow up task

let updatedFilesToDeleteAfterUpload = sourceMapsUploadOptions?.filesToDeleteAfterUpload;
// set a default value no option was set
if (typeof sourceMapsUploadOptions?.filesToDeleteAfterUpload === 'undefined') {
updatedFilesToDeleteAfterUpload = [`${reactRouterConfig.buildDirectory}/**/*.map`];

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.

m/something to follow up on: We only want to delete source maps by default if it was us who turned on source map generation in the first place. This was the reason why I had to pass the promise for filesToDeleteAfterUpload in SvelteKit, because I only knew that once makeEnableSourceMapsPlugin's config hook was invoked. But since we have the vite config here, and we don't rely on the original file deletion plugin, maybe we can solve this simpler 🤔

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 my issue was that I only get the final vite config here and not the initial one, BUT I guess we can maybe just write that into the config as well with a custom plugin (like the sentryConfig from your comment above)


export default {
ssr: true,
buildEnd: sentryOnBuildEnd,

@Lms24Lms24Feb 26, 2025

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.

l/Q: is there some kind of sequence() helper or so in case people have more than one buildEnd callback?

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.

in this case they could just

buildEnd: ({ viteConfig, reactRouterConfig, buildManifest })=>{// do their stuffsentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });},

@chargome
chargome merged commit 9a55e17 into developFeb 27, 2025
@chargome
chargome deleted the cg/rr-build-time-config branch February 27, 2025 09:39
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.

[RR7] Add build time configuration

3 participants

@chargome@Lms24@s1gr1d
, '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(react-router): Add build-time config - #15406

Merged
chargome merged 22 commits into
developfrom
cg/rr-build-time-config
Feb 27, 2025
Merged

feat(react-router): Add build-time config#15406
chargome merged 22 commits into
developfrom
cg/rr-build-time-config

Conversation

@chargome

@chargomechargome commented Feb 13, 2025

Copy link
Copy Markdown
Member
  • Adds a vite plugin for react router that handles:
    • Updating sourcemap settings
    • Release injection
    • Telemetry Data
  • Adds a sentryOnBuildEnd hook that handles:
    • Creating releases
    • DebugId injection
    • Uploading sourcemaps
    • Deleting sourcemaps after upload

Currently the options passed to both the plugin and the hook partly overlap which is confusing, would be nice to just have one common options object at the end. Actually I can pass these options via vite and read them in the hook

We'll need to revisit this and move DebugId injection back to the vite plugin to avoid modifying the final build. For the alpha release we'll still rely on the SentryCli.

closes#15188

@chargomechargome self-assigned this Feb 13, 2025
@codecov

codecovBot commented Feb 13, 2025

Copy link
Copy Markdown

❌ 2 Tests Failed:

Tests completedFailedPassedSkipped
466224660324
View the top 2 failed test(s) by shortest run time
test/integration/test/client/root-loader.test.tsshouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.079s run time
root-loader.test.ts:177:1shouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
test/integration/test/client/root-loader.test.tsshouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.11s run time
root-loader.test.ts:165:1shouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@chargome
chargomeforce-pushed the cg/rr-build-time-config branch from 152b618 to dca9d06CompareFebruary 17, 2025 09:08
@chargomechargome changed the title feat(react-router): Add vite pluginfeat(react-router): Add build-time configFeb 21, 2025
@chargome
chargome marked this pull request as ready for review February 24, 2025 14:13
@chargome
chargome requested review from a team, Lms24, s1gr1d and stephanie-anderson and removed request for a team and stephanie-andersonFebruary 24, 2025 14:13
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/src/vite/makeCustomSentryVitePlugins.ts Outdated

@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.

The approach generally looks good to me (as we already discussed offline). I think it's good to try to get debugId injection into the plugin but it's totally fine to go with this solution for the alpha. Likewise, I had some comments for things to address after the initial alpha but IMHO they don't block a first alpha release.

export default defineConfig(config => {
return {
plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
sentryConfig,

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.

l: just to confirm does this not throw a type error? or is defineConfig lenient enough to allow adding arbitrary keys to the config object?

@Lms24Lms24Feb 26, 2025

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.

Also something to explore in the future: Maybe we can add a plugin in sentryReactRouter that adds the sentryConfig in the config hook to the vite config, so that users don't have to do it explicitly. Not sure if you already tried this, or which instance of the vite config is passed into buildEnd but maybe it's worth a shot. we could even try to write it onto the global object to pass it over 😅

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.

Didn't throw a type error, but you are right the best solution for this would be to define this in a plugin that we add! Will do that in a follow up task

let updatedFilesToDeleteAfterUpload = sourceMapsUploadOptions?.filesToDeleteAfterUpload;
// set a default value no option was set
if (typeof sourceMapsUploadOptions?.filesToDeleteAfterUpload === 'undefined') {
updatedFilesToDeleteAfterUpload = [`${reactRouterConfig.buildDirectory}/**/*.map`];

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.

m/something to follow up on: We only want to delete source maps by default if it was us who turned on source map generation in the first place. This was the reason why I had to pass the promise for filesToDeleteAfterUpload in SvelteKit, because I only knew that once makeEnableSourceMapsPlugin's config hook was invoked. But since we have the vite config here, and we don't rely on the original file deletion plugin, maybe we can solve this simpler 🤔

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 my issue was that I only get the final vite config here and not the initial one, BUT I guess we can maybe just write that into the config as well with a custom plugin (like the sentryConfig from your comment above)


export default {
ssr: true,
buildEnd: sentryOnBuildEnd,

@Lms24Lms24Feb 26, 2025

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.

l/Q: is there some kind of sequence() helper or so in case people have more than one buildEnd callback?

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.

in this case they could just

buildEnd: ({ viteConfig, reactRouterConfig, buildManifest })=>{// do their stuffsentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });},

@chargome
chargome merged commit 9a55e17 into developFeb 27, 2025
@chargome
chargome deleted the cg/rr-build-time-config branch February 27, 2025 09:39
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.

[RR7] Add build time configuration

3 participants

@chargome@Lms24@s1gr1d
, '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(react-router): Add build-time config - #15406

Merged
chargome merged 22 commits into
developfrom
cg/rr-build-time-config
Feb 27, 2025
Merged

feat(react-router): Add build-time config#15406
chargome merged 22 commits into
developfrom
cg/rr-build-time-config

Conversation

@chargome

@chargomechargome commented Feb 13, 2025

Copy link
Copy Markdown
Member
  • Adds a vite plugin for react router that handles:
    • Updating sourcemap settings
    • Release injection
    • Telemetry Data
  • Adds a sentryOnBuildEnd hook that handles:
    • Creating releases
    • DebugId injection
    • Uploading sourcemaps
    • Deleting sourcemaps after upload

Currently the options passed to both the plugin and the hook partly overlap which is confusing, would be nice to just have one common options object at the end. Actually I can pass these options via vite and read them in the hook

We'll need to revisit this and move DebugId injection back to the vite plugin to avoid modifying the final build. For the alpha release we'll still rely on the SentryCli.

closes#15188

@chargomechargome self-assigned this Feb 13, 2025
@codecov

codecovBot commented Feb 13, 2025

Copy link
Copy Markdown

❌ 2 Tests Failed:

Tests completedFailedPassedSkipped
466224660324
View the top 2 failed test(s) by shortest run time
test/integration/test/client/root-loader.test.tsshouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.079s run time
root-loader.test.ts:177:1shouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
test/integration/test/client/root-loader.test.tsshouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.11s run time
root-loader.test.ts:165:1shouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@chargome
chargomeforce-pushed the cg/rr-build-time-config branch from 152b618 to dca9d06CompareFebruary 17, 2025 09:08
@chargomechargome changed the title feat(react-router): Add vite pluginfeat(react-router): Add build-time configFeb 21, 2025
@chargome
chargome marked this pull request as ready for review February 24, 2025 14:13
@chargome
chargome requested review from a team, Lms24, s1gr1d and stephanie-anderson and removed request for a team and stephanie-andersonFebruary 24, 2025 14:13
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/src/vite/makeCustomSentryVitePlugins.ts Outdated

@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.

The approach generally looks good to me (as we already discussed offline). I think it's good to try to get debugId injection into the plugin but it's totally fine to go with this solution for the alpha. Likewise, I had some comments for things to address after the initial alpha but IMHO they don't block a first alpha release.

export default defineConfig(config => {
return {
plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
sentryConfig,

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.

l: just to confirm does this not throw a type error? or is defineConfig lenient enough to allow adding arbitrary keys to the config object?

@Lms24Lms24Feb 26, 2025

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.

Also something to explore in the future: Maybe we can add a plugin in sentryReactRouter that adds the sentryConfig in the config hook to the vite config, so that users don't have to do it explicitly. Not sure if you already tried this, or which instance of the vite config is passed into buildEnd but maybe it's worth a shot. we could even try to write it onto the global object to pass it over 😅

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.

Didn't throw a type error, but you are right the best solution for this would be to define this in a plugin that we add! Will do that in a follow up task

let updatedFilesToDeleteAfterUpload = sourceMapsUploadOptions?.filesToDeleteAfterUpload;
// set a default value no option was set
if (typeof sourceMapsUploadOptions?.filesToDeleteAfterUpload === 'undefined') {
updatedFilesToDeleteAfterUpload = [`${reactRouterConfig.buildDirectory}/**/*.map`];

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.

m/something to follow up on: We only want to delete source maps by default if it was us who turned on source map generation in the first place. This was the reason why I had to pass the promise for filesToDeleteAfterUpload in SvelteKit, because I only knew that once makeEnableSourceMapsPlugin's config hook was invoked. But since we have the vite config here, and we don't rely on the original file deletion plugin, maybe we can solve this simpler 🤔

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 my issue was that I only get the final vite config here and not the initial one, BUT I guess we can maybe just write that into the config as well with a custom plugin (like the sentryConfig from your comment above)


export default {
ssr: true,
buildEnd: sentryOnBuildEnd,

@Lms24Lms24Feb 26, 2025

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.

l/Q: is there some kind of sequence() helper or so in case people have more than one buildEnd callback?

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.

in this case they could just

buildEnd: ({ viteConfig, reactRouterConfig, buildManifest })=>{// do their stuffsentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });},

@chargome
chargome merged commit 9a55e17 into developFeb 27, 2025
@chargome
chargome deleted the cg/rr-build-time-config branch February 27, 2025 09:39
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.

[RR7] Add build time configuration

3 participants

@chargome@Lms24@s1gr1d
, '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(react-router): Add build-time config - #15406

Merged
chargome merged 22 commits into
developfrom
cg/rr-build-time-config
Feb 27, 2025
Merged

feat(react-router): Add build-time config#15406
chargome merged 22 commits into
developfrom
cg/rr-build-time-config

Conversation

@chargome

@chargomechargome commented Feb 13, 2025

Copy link
Copy Markdown
Member
  • Adds a vite plugin for react router that handles:
    • Updating sourcemap settings
    • Release injection
    • Telemetry Data
  • Adds a sentryOnBuildEnd hook that handles:
    • Creating releases
    • DebugId injection
    • Uploading sourcemaps
    • Deleting sourcemaps after upload

Currently the options passed to both the plugin and the hook partly overlap which is confusing, would be nice to just have one common options object at the end. Actually I can pass these options via vite and read them in the hook

We'll need to revisit this and move DebugId injection back to the vite plugin to avoid modifying the final build. For the alpha release we'll still rely on the SentryCli.

closes#15188

@chargomechargome self-assigned this Feb 13, 2025
@codecov

codecovBot commented Feb 13, 2025

Copy link
Copy Markdown

❌ 2 Tests Failed:

Tests completedFailedPassedSkipped
466224660324
View the top 2 failed test(s) by shortest run time
test/integration/test/client/root-loader.test.tsshouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.079s run time
root-loader.test.ts:177:1shouldthrowredirecttoanexternalpathwithnobaggageandtraceinjected.
test/integration/test/client/root-loader.test.tsshouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.
Stack Traces | 0.11s run time
root-loader.test.ts:165:1shouldreturnredirecttoanexternalpathwithnobaggageandtraceinjected.

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@chargome
chargomeforce-pushed the cg/rr-build-time-config branch from 152b618 to dca9d06CompareFebruary 17, 2025 09:08
@chargomechargome changed the title feat(react-router): Add vite pluginfeat(react-router): Add build-time configFeb 21, 2025
@chargome
chargome marked this pull request as ready for review February 24, 2025 14:13
@chargome
chargome requested review from a team, Lms24, s1gr1d and stephanie-anderson and removed request for a team and stephanie-andersonFebruary 24, 2025 14:13
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/README.md Outdated
Comment threadpackages/react-router/src/vite/makeCustomSentryVitePlugins.ts Outdated

@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.

The approach generally looks good to me (as we already discussed offline). I think it's good to try to get debugId injection into the plugin but it's totally fine to go with this solution for the alpha. Likewise, I had some comments for things to address after the initial alpha but IMHO they don't block a first alpha release.

export default defineConfig(config => {
return {
plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
sentryConfig,

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.

l: just to confirm does this not throw a type error? or is defineConfig lenient enough to allow adding arbitrary keys to the config object?

@Lms24Lms24Feb 26, 2025

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.

Also something to explore in the future: Maybe we can add a plugin in sentryReactRouter that adds the sentryConfig in the config hook to the vite config, so that users don't have to do it explicitly. Not sure if you already tried this, or which instance of the vite config is passed into buildEnd but maybe it's worth a shot. we could even try to write it onto the global object to pass it over 😅

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.

Didn't throw a type error, but you are right the best solution for this would be to define this in a plugin that we add! Will do that in a follow up task

let updatedFilesToDeleteAfterUpload = sourceMapsUploadOptions?.filesToDeleteAfterUpload;
// set a default value no option was set
if (typeof sourceMapsUploadOptions?.filesToDeleteAfterUpload === 'undefined') {
updatedFilesToDeleteAfterUpload = [`${reactRouterConfig.buildDirectory}/**/*.map`];

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.

m/something to follow up on: We only want to delete source maps by default if it was us who turned on source map generation in the first place. This was the reason why I had to pass the promise for filesToDeleteAfterUpload in SvelteKit, because I only knew that once makeEnableSourceMapsPlugin's config hook was invoked. But since we have the vite config here, and we don't rely on the original file deletion plugin, maybe we can solve this simpler 🤔

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 my issue was that I only get the final vite config here and not the initial one, BUT I guess we can maybe just write that into the config as well with a custom plugin (like the sentryConfig from your comment above)


export default {
ssr: true,
buildEnd: sentryOnBuildEnd,

@Lms24Lms24Feb 26, 2025

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.

l/Q: is there some kind of sequence() helper or so in case people have more than one buildEnd callback?

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.

in this case they could just

buildEnd: ({ viteConfig, reactRouterConfig, buildManifest })=>{// do their stuffsentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });},

@chargome
chargome merged commit 9a55e17 into developFeb 27, 2025
@chargome
chargome deleted the cg/rr-build-time-config branch February 27, 2025 09:39
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.

[RR7] Add build time configuration

3 participants

@chargome@Lms24@s1gr1d