feat(browser): Include Spotlight in development bundles #18078

timfish · 2025-11-02T22:06:25Z

This PR:

Splits the browser build output into separate development and production builds
References these two builds in the package.json exports
Adds a Rollup plugin to production builds which can strip out code wrapped with development-only magic comments
Adds the spotlight integration to the default integrations in development mode only
Also adds this plugin for browser bundles so spotlight doesn't get included in CDN bundles

Vite and Webpack will automatically include Spotlight in development/production mode and it is excluded in production. Unfortunately, Rollup will not select development unless you set the exportConditions for @rollup/plugin-node-resolve

Lms24

This looks really promising, thanks Tim!

(I realize this is still in draft so feel free to ignore this review if you're still planning on making changes)

packages/browser/src/sdk.ts

github-actions · 2025-11-03T12:23:44Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.6 kB	+0.03%	+6 B 🔺
@sentry/browser - with treeshaking flags	23.09 kB	+0.03%	+6 B 🔺
@sentry/browser (incl. Tracing)	41.23 kB	+0.01%	+4 B 🔺
@sentry/browser (incl. Tracing, Profiling)	45.51 kB	+0.02%	+7 B 🔺
@sentry/browser (incl. Tracing, Replay)	79.7 kB	+0.01%	+4 B 🔺
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	69.38 kB	+0.01%	+6 B 🔺
@sentry/browser (incl. Tracing, Replay with Canvas)	84.4 kB	+0.01%	+1 B 🔺
@sentry/browser (incl. Tracing, Replay, Feedback)	96.57 kB	+0.01%	+5 B 🔺
@sentry/browser (incl. Feedback)	41.27 kB	+0.02%	+7 B 🔺
@sentry/browser (incl. sendFeedback)	29.27 kB	+0.03%	+7 B 🔺
@sentry/browser (incl. FeedbackAsync)	34.2 kB	+0.02%	+5 B 🔺
@sentry/react	26.29 kB	-0.04%	-8 B 🔽
@sentry/react (incl. Tracing)	43.19 kB	-0.06%	-23 B 🔽
@sentry/vue	29.08 kB	+0.03%	+6 B 🔺
@sentry/vue (incl. Tracing)	43 kB	+0.01%	+4 B 🔺
@sentry/svelte	24.61 kB	+0.03%	+5 B 🔺
CDN Bundle	26.89 kB	+0.03%	+7 B 🔺
CDN Bundle (incl. Tracing)	41.78 kB	+0.01%	+2 B 🔺
CDN Bundle (incl. Tracing, Replay)	78.3 kB	+0.01%	+2 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback)	83.77 kB	+0.01%	+1 B 🔺
CDN Bundle - uncompressed	78.86 kB	+0.02%	+14 B 🔺
CDN Bundle (incl. Tracing) - uncompressed	123.98 kB	+0.02%	+14 B 🔺
CDN Bundle (incl. Tracing, Replay) - uncompressed	240.01 kB	+0.01%	+14 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	252.77 kB	+0.01%	+14 B 🔺
@sentry/nextjs (client)	45.31 kB	+0.02%	+6 B 🔺
@sentry/sveltekit (client)	41.61 kB	+0.01%	+3 B 🔺
@sentry/node-core	50.76 kB	-	-
@sentry/node	157.82 kB	-	-
@sentry/node - without tracing	92.64 kB	+0.01%	+1 B 🔺
@sentry/aws-serverless	106.37 kB	-	-

View base workflow run

timfish · 2025-11-03T13:13:34Z

Needs some tests to confirm Spotlight actually works in dev mode...

packages/browser/src/sdk.ts

BYK · 2025-11-04T20:44:03Z

packages/browser/src/sdk.ts

+    options.defaultIntegrations == null ? getDefaultIntegrations(options) : options.defaultIntegrations;
+
+  /* rollup-include-development-only */
+  if (options.spotlight) {


How hard would it be to fill this value from the env variables? I'm okay with trying all variants like PUBLIC_SENTRY_SPOTLIGHT or VITE_SENTRY_SPOTLIGHT etc.

Happy to do this in a follow up too.

Yeah probably best in a follow up PR. If we can keep it between the magic comments it'll all get striped out!

dev-packages/rollup-utils/plugins/npmPlugins.mjs

packages/browser/src/sdk.ts

dev-packages/rollup-utils/bundleHelpers.mjs

dev-packages/bundler-tests/tests/bundling.test.ts

…sentry/sentry-javascript into timfish/build/dev-prod-browser-build

packages/browser/src/sdk.ts

BYK · 2025-11-07T23:22:52Z

dev-packages/bundler-tests/tests/bundling.test.ts

+
+function readAllJs(outDir: string): string {
+  let contents = '';
+  const stack = [outDir];


There's a simpler and probably more efficient way now: https://github.com/getsentry/sentry-docs/pull/13994/files#diff-a17104741f091f6ca105b7bd4f8272c206b4575306615ebac8a847cc004591c3R45-R50

BYK · 2025-11-07T23:28:30Z

dev-packages/rollup-utils/plugins/npmPlugins.mjs

 }

+export function makeProductionReplacePlugin() {
+  const pattern = /\/\* rollup-include-development-only \*\/[\s\S]*?\/\* rollup-include-development-only-end \*\/\s*/g;


Not very confident about using regex here. I'm guessing AST based operation is either unavailable or more expensive?

Are you okay me exploring rollup-plugin-define or Vite (which uses rolldown under the hood which should be fully compatible with rollup) that has the define feature built-in: https://vite.dev/config/#using-environment-variables-in-config

Once we do that, we can set NODE_ENV to development or production based on the build, and use regular if blocks rather than surround the code with magic comments. These if blocks will have a static condition at build time which will then be optimized (stripped out or unwrapped) via terser or whatever minified/optimizer we are using.

When building the SDK npm module, we preserve the individual files (ie. preserveModules: true) and we don't do any kind of minification or optimization.

This is why I went this route vs replace/define plugins.

Lms24

Thanks for invstigating and implementing this Tim! I think this is a very reasonable solution.

KaKi87 · 2025-11-12T15:39:23Z

Hi,

This is a breaking change, yet it was brought in a minor version increment, thus breaking my apps having the following URL in their <script type="importmap"> :

"@sentry/browser": "https://cdn.jsdelivr.net/npm/@sentry/browser@10/build/npm/esm/index.js/+esm"

Because /build/npm/esm/index.js was a valid path in 10.24.0, and no longer is one in 10.25.0, despite being a minor version increment.

Please revert.

Lms24 · 2025-11-12T17:04:52Z

Hey @KaKi87 thanks for reporting!

Apologies that this change caused your app to break! That was definitely not our intention.

However, in this case, I don't believe that our package-internal paths should be considered public API. Our package.json exports are of course, so we wouldn't remove or rename them without a new major version.

I also want to note that we don't officially support jsdelivr, unpkg or other 3rd party CDN providers. We host our own set of CDN bundles as well as a lazy loader which of course have the same semver guarantees as our NPM packages. These bundles are not affected by this PR. Also, depending on your use case, our bundles are quite a bit smaller than the jsdelivr ones because we make extensive use of tree shaking when building them. Just a thought :)

In case you want to continue using jsdelivr, I highly recommend using a URL that doesn't rely on an internal package structure. As far as I can tell, jsdelivr also recommends a URL without any subpaths: https://cdn.jsdelivr.net/npm/@sentry/browser@10/+esm.

Again, sorry for breaking you. I will keep looking at this PR and the comments to see how many people were affected. We can re-evaluate next steps in case other problems come up. For now though, we'll keep this PR as-is.

timfish added 2 commits November 2, 2025 23:03

feat(browser): Separate dev/prod browser builds

4805008

Oh lint

aae7360

This comment was marked as off-topic.

Sign in to view

Couple of fixes

18d31e5

Lms24 reviewed Nov 3, 2025

View reviewed changes

packages/browser/src/sdk.ts Outdated Show resolved Hide resolved

timfish added 2 commits November 3, 2025 10:18

Fix size limit

84ff77d

Improve

92bc9f6

timfish force-pushed the timfish/build/dev-prod-browser-build branch from 8d0f261 to 92bc9f6 Compare November 3, 2025 12:04

timfish added 2 commits November 3, 2025 13:44

Merge branch 'develop' into timfish/build/dev-prod-browser-build

1cb7253

improve further

eb515c4

timfish force-pushed the timfish/build/dev-prod-browser-build branch from 41be108 to eb515c4 Compare November 3, 2025 13:02

timfish marked this pull request as ready for review November 3, 2025 13:28

BYK reviewed Nov 4, 2025

View reviewed changes

PR review

e72bc89

cursor bot reviewed Nov 5, 2025

View reviewed changes

dev-packages/rollup-utils/plugins/npmPlugins.mjs Show resolved Hide resolved

fix

83b3890

cursor bot reviewed Nov 6, 2025

View reviewed changes

packages/browser/src/sdk.ts Show resolved Hide resolved

Add bundler tests

8fff1ab

cursor bot reviewed Nov 7, 2025

View reviewed changes

dev-packages/rollup-utils/bundleHelpers.mjs Show resolved Hide resolved

github-advanced-security bot found potential problems Nov 7, 2025

View reviewed changes

dev-packages/bundler-tests/tests/bundling.test.ts Dismissed Show dismissed Hide dismissed

timfish changed the title ~~feat(browser): Separate dev/prod browser builds~~ feat(browser): Include Spotlight in development bundles Nov 7, 2025

No browser tests in Node

2c86f37

cursor bot reviewed Nov 7, 2025

View reviewed changes

dev-packages/bundler-tests/tests/bundling.test.ts Show resolved Hide resolved

dev-packages/bundler-tests/tests/bundling.test.ts Show resolved Hide resolved

timfish added 5 commits November 7, 2025 03:03

Fix bundler

0e52d5e

Add bundler tests

9fc0f3f

Merge branch 'timfish/build/dev-prod-browser-build' of github.com:get…

c48144c

…sentry/sentry-javascript into timfish/build/dev-prod-browser-build

Merge branch 'develop' into timfish/build/dev-prod-browser-build

7229c7a

Revert

eb3e548

timfish added 2 commits November 7, 2025 09:01

Merge branch 'timfish/build/dev-prod-browser-build' of github.com:get…

5202eec

…sentry/sentry-javascript into timfish/build/dev-prod-browser-build

fix merge

51c05d2

cursor bot reviewed Nov 7, 2025

View reviewed changes

packages/browser/src/sdk.ts Show resolved Hide resolved

timfish added 2 commits November 7, 2025 09:14

Fix yarn.lock

4ea4e31

Fix yarn.lock again

5d2f9ec

timfish requested review from BYK and Lms24 November 7, 2025 09:56

BYK approved these changes Nov 7, 2025

View reviewed changes

Lms24 approved these changes Nov 10, 2025

View reviewed changes

BYK mentioned this pull request Nov 10, 2025

feat(browser): Enable Spotlight via SENTRY_SPOTLIGHT env var #18050

Closed

Lms24 merged commit 8b33254 into develop Nov 10, 2025
382 of 383 checks passed

Lms24 deleted the timfish/build/dev-prod-browser-build branch November 10, 2025 14:07

Uh oh!

feat(browser): Include Spotlight in development bundles #18078

feat(browser): Include Spotlight in development bundles #18078

Uh oh!

Conversation

timfish commented Nov 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as off-topic.

Lms24 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

timfish commented Nov 3, 2025

Uh oh!

Uh oh!

BYK Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

timfish Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

BYK Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

BYK Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

BYK Nov 8, 2025

Choose a reason for hiding this comment

Uh oh!

timfish Nov 8, 2025

Choose a reason for hiding this comment

Uh oh!

Lms24 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

KaKi87 commented Nov 12, 2025

Uh oh!

Lms24 commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

timfish commented Nov 2, 2025 •

edited

Loading

github-actions bot commented Nov 3, 2025 •

edited

Loading

Lms24 commented Nov 12, 2025 •

edited

Loading