Angular CLI
You can use the Angular CLI together with our Sentry webpack plugin to automatically create releases and upload source maps to Sentry when building your app (with ng build
, for example). Due to Angular's closed build system, to register the webpack plugin, you'll first need to configure a custom builder. In the end, you'll be able to automatically upload source maps whenever you're creating a production build of your app.
Before you start configuring the source maps upload, make sure that you're generating source maps in your Angular project.
Install the custom webpack builder for Angular and the Sentry webpack plugin:
npm install --save-dev @angular-builders/custom-webpack @sentry/webpack-plugin
With these packages installed, configure your app to upload source maps in three steps:
In your angular.json
, replace the default builder (@angular-devkit/build-angular
) with @angular-builders/custom-webpack
:
angular.json
{
"projects": {
"my-project": {
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
// ... other options
},
// ... other options
},
// ... other options
},
// ... other options
}
}
}
This configuration has no effect on your development server if you're running ng serve
. Only ng build
is configured to use the custom builder and the Webpack plugin. If you're using an Angular version below 13, only ng build --prod
will leverage the custom builder.
This guide assumes you are using a Sentry SDK on version 7.47.0
or higher.
If you are on an older version and you want to upload source maps we recommend upgrading your SDK to the newest version.
To upload source maps you have to configure an auth token. Auth tokens can be passed to the plugin explicitly with the authToken
option, with a SENTRY_AUTH_TOKEN
environment variable, or with an .env.sentry-build-plugin
file in the working directory when building your project. We recommend you add the auth token to your CI/CD environment as an environment variable.
.env.sentry-build-plugin
SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE
Register the Sentry Webpack plugin in your webpack.config.js
:
webpack.config.js
const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
module.exports = {
// ... other config above ...
devtool: "source-map", // Source map generation must be turned on
plugins: [
sentryWebpackPlugin({
org: "example-org",
project: "example-project",
authToken: process.env.SENTRY_AUTH_TOKEN,
}),
],
};
Learn more about configuring the plugin in our Sentry webpack plugin documentation.
To upload the source maps, build your Angular application:
ng build # add --prod for Angular versions below 13
The Sentry webpack plugin doesn't upload source maps in watch-mode/development-mode. We recommend running a production build to test your implementation.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").