How to generate sourcemaps using Angular CLI and upload them to Sentry?

Question

There are two ways to set up sourcemaps: having them hosted on the site and referenced in the bundled files or uploading them directly to a service like sentry. I'm trying to accomplish the latter. The problem is that there seems to be no way to generate sourcemaps using angular cli without having the filepath written to the bundled files.

My first thought was to have two builds - one with sourcemaps generate and one without. I would then just deploy the build without sourcemaps and upload the build with them to sentry. That doesn't work because the bundle filenames are different (angular cli uses the file hash as the filename for cache busting and when you generate sourcemaps it adds the path to the .map file as a comment at the end causing a change in hash and filename).

My other option would be to build with sourcemaps, upload them to sentry, and then delete the map files before deploying the site. The problem there though is that the bundle files still contain a reference to a now non-existent map file. That shouldn't be an issue in and of itself but it might raise an issue with extensions or browsers down the line and just seems like a hackish solution.

How would you implementing something like this into the build process?

@NicholasColes I created a feature request on the repo that's been added to the backlog - https://github.com/angular/angular-cli/issues/12375 — Nikola Jankovic, Oct 12 '18 at 04:25
thanks gave it a thumbs up! Did you just in the mean time build it with the sourcemaps and then push those to sentry and delete them from production? — Nicholas Coles, Oct 12 '18 at 07:03
@NicholasColes Pretty much, there's other options like decoupling angular cli from the project and specifying the 'hidden-source-map' as the devtool in webpack but I wouldn't advise it. I'll try and create a pull request this weekend. — Nikola Jankovic, Oct 16 '18 at 00:38
Did anyone come up with a solution by now? I have the same situation and would be great if anyone has found some way to achieve this. — Rohan, Dec 26 '18 at 16:47
Think I found the answer but have not tried it yet: https://blog.angularindepth.com/debug-angular-apps-in-production-without-revealing-source-maps-ab4a235edd85 — Anthony, Mar 22 '19 at 15:14
@Anthony A solution has been merged: https://github.com/angular/angular-cli/pull/13062 — Nikola Jankovic, Mar 23 '19 at 16:03

score 2 · Answer 1 · answered Dec 05 '20 at 14:49

As mentioned in the comments, you can enable sourceMaps in the angular.json file like this:

 "configurations": {
  "production": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "hidden": true
    },

Also, I recommend you remove the .map files after uploading to sentry and before deploying. So in your ci add this line:

rm -rf dist/YOUR_PROJECT/*.map

score 0 · Accepted Answer · answered May 20 '22 at 16:59

The official recommendation of Sentry is to upload source maps via sentry-webpack-plugin or sentry-cli.

CLI docs don't mention the issue with publishing source maps, but many ask about this in regards to the plugin: 1, 2, 3, 4, 5.

The community seems settled on the solution to remove source maps after the upload. This can be achieved in different ways as discussed in the issues above such as

1, Simply rm -rf dist/**/*.map

2, Various webpack plugins, most notably clean-webpack-plugin

3, A custom webpack plugin such as this one:

webpack.config.js

const glob = require("glob");
const { removeSync } = require("fs-extra");

...
plugins: [
  ...
  {
    apply: compiler =>
      compiler.hooks.done.tap("CleanJsMapPlugin", () => {
        glob.sync(".webpack/**/*.js.map").forEach(f => removeSync(f));
      }),
      cb();
  },
  ...
]

score 0 · Answer 3 · edited Jan 30 '23 at 16:27

I was facing that problem and I solved it in a different way. Hidden source maps doesn't work. Sentry states that the JavaScript files should have reference to the maps using sourceMappingURL comment in the end of JavaScript files. I fixed that by:

Creating sourcemaps by modifying angular.json to have the following settings added to this path (projects -> dashboard -> architect -> build -> configurations -> production) to be the following:

{
  "sourceMap": {
    "hidden": false,
    "scripts": true,
    "styles": false
  }
}

In my CI, I run the following commands

build:
  scripts:
    - npm run build
    - npm run sentry:release    # Create a new release
    - npm run sentry:commits    # Associate commits
    - npm run sentry:deploy     # Upload source maps
    - npm run sentry:finalize   # Finalize release
    # Remove all sourceMappingURL reference from js files
    - find dist -type f -name '*.js' -exec sed -i -E 's/\/\/# sourceMappingURL=[^ ]*\.js\.map//g' {} \;
    # Delete all map files
    - find dist -name "*.map" -exec rm {} \;

And it will remove the reference and the source maps instantly. This way Sentry have it's source maps and production environment is free and everyone is happy.

score -2 · Answer 4 · answered Mar 02 '20 at 14:59

-2

Here is the article which explains how to upload and monitor angular sourcemaps to sentry.

answered Mar 02 '20 at 14:59

Sumit Parakh

1,098
9
19

How to generate sourcemaps using Angular CLI and upload them to Sentry?

4 Answers4