Uploading Source Maps for Angular

Tired of sifting through confusing Sentry error messages? You're not alone.

I recently struggled with uploading sourcemaps to Sentry, but after some head-banging and persistence, I've gained valuable experience that I want to share with you.

UPD. This post has been updated after a timely follow up call with Sentry team.

The task was to organise uploading sourcemaps process for our Angular application. However, these steps could also be useful for those working with React applications.

To get started, I organized a testing environment by creating a simple app using the ng new command. I then connected my personal Sentry account and added the Sentry.captureException("...") function to the click event of a button. To easily deploy the app, I utilized the user-friendly service Netlify (which I highly recommend).

While I don't want to go into too much detail about setting the release version, I understand that some readers may be interested in exploring different approaches. If that's the case, I encourage you to take a look at this discussion.

Settings in angular.json should be like this:

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

To simplify the process, I have compiled all the necessary commands into a bash script:

version_str=$(grep -Eo '\"version\"\:\s\"[0-9]\.[0-9]\.[0-9]+\"' package.json)
version=$(echo $version_str | grep -Eo '[0-9]\.[0-9]\.[0-9]+')
version="$version-production"
sentry-cli releases new "$version"
sentry-cli releases set-commits --auto "$version"
sentry-cli releases files "$version" upload-sourcemaps docs/
sentry-cli releases new "$version" --finalize

Also I have put all necessary auth credentials to .sentryclirc file like this:

[defaults]
org = <my-organisation-name>
project = <my-project-name>

[auth]
token=<my-token>

After doing all this you might still see *.map files in your build folder, but don't worry, they won't be visible in production.