nx with @nx/angular:browser-esbuild and plugin @sentry/esbuild-plugin doesn't work

[ThorstenKunz]

Environment

"@nx/angular": "20.2.1",
"@sentry/angular": "^9.1.0",
"@sentry/esbuild-plugin": "^3.1.2",

Steps to Reproduce

Follow the steps outlined in https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/uploading/angular-nx/#esbuild to create sourcemaps and add the sentry esbuilder plugin.

Expected Result

When running "nx build" I would expect to see the created sourcemaps in the dist folder and have the sentry plugin inject the debugid info and upload them.

Actual Result

Sentry is reporting that it is unable to determin the debug ID from bundle for all .js files:

[sentry-esbuild-plugin] Debug: Could not determine debug ID from bundle. This can happen if you did not clean your output folder before installing the Sentry plugin. File will not be source mapped: C:\Users\test\git\flx-frontends\dist\apps\minion\chunk-2GFO5HFA.js
[sentry-esbuild-plugin] Debug: Could not determine debug ID from bundle. This can happen if you did not clean your output folder before installing the Sentry plugin. File will not be source mapped: C:\Users\test\git\flx-frontends\dist\apps\minion\chunk-2ZZLQINV.js
[sentry-esbuild-plugin] Debug: Could not determine debug ID from bundle. This can happen if you did not clean your output folder before installing the Sentry plugin. File will not be source mapped: C:\Users\test\git\flx-frontends\dist\apps\minion\chunk-2ZWFIBM2.js
[sentry-esbuild-plugin] Debug: Could not determine debug ID from bundle. This can happen if you did not clean your output folder before installing the Sentry plugin. File will not be source mapped: C:\Users\test\git\flx-frontends\dist\apps\minion\chunk-2QEHJE7V.js
[...]
> Found 0 files
> Adding source map references
> Nothing to upload
[sentry-esbuild-plugin] Info: Successfully uploaded source maps to Sentry
[sentry-esbuild-plugin] Debug: Waiting for dependencies on generated files to be freed before deleting...
[...]
[sentry-esbuild-plugin] Debug: Deleting asset after upload: C:\Users\test\git\flx-frontends\dist\apps\minion\chunk-ZZZJIK6M.js.map
[sentry-esbuild-plugin] Debug: Deleting asset after upload: C:\Users\test\git\flx-frontends\dist\apps\minion\chunk-ZZ63UKAS.js.map
[sentry-esbuild-plugin] Debug: Deleting asset after upload: C:\Users\test\git\flx-frontends\dist\apps\minion\chunk-ZTBPWOLP.js.map

When I remove the sentry plugin and only run nx build to create the application and then sentry-cli sourcemaps inject --org xxxxx --project test ./dist it works fine. So something seems to be broken with the combination of nx/esbuild-plugin

[Lms24]

Hi, thanks for reporting! I guess this means that something changed with Nx or Angular recently that makes this no longer work correctly.
I currently don't have the capacity to debug this in detail, so for now the workaround to use Sentry CLI is probably the best.

In fact, I'm thinking if we should simply remove the webpack and esbuild guides for Angular, given that they cause more issues and require more configuration than Sentry CLI. The only downside is PWAs/service workers not being happy about modifying source contents post-build (like when injecting the debugId).

[ThorstenKunz]

In fact, I'm thinking if we should simply remove the webpack and esbuild guides for Angular, given that they cause more issues and require more configuration than Sentry CLI. The only downside is PWAs/service workers not being happy about modifying source contents post-build (like when injecting the debugId).

Hm, if that breaks PWA then this would be a pretty big problem. Any way to get PWA working with Sentry CLI?

[Lms24]

Yup, it can be worked around as documented here it's just something that came up in the past and we didn't have an answer for this before discovering the ngsw-config tool.

[ThorstenKunz]

Thanks @Lms24. As long as there is a fully featured alternative then its fine.