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.

Comments

[Joan Llenas Masó]

I remember how painful it was to integrate Sentry into our CI pipeline a few years ago. Don't ask me how we managed to make it work!
This guide will help next time.
Thanks for sharing!

[Natalia D]

Joan,
I was very surprised that plugging in one popular thing to another quite popular thing involved some head banging against the wall :D hope this guide helps someone to lose less time on this.