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
Install the custom Webpack builder for Angular and the Sentry Webpack plugin:
npm install --save-dev @angular-builders/custom-webpack @sentry/webpack-plugin
Configure
With these packages installed, configure your app to upload source maps in three steps:
1. Set up custom Angular builder
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.
2. Register the Sentry Webpack Plugin
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: [
new SentryWebpackPlugin({
org: "example-org",
project: "example-project",
// Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
// and need the `project:releases` and `org:read` scopes
authToken: process.env.SENTRY_AUTH_TOKEN,
// Specify the directory containing build artifacts
// By default, Angular emits build files in the `dist` directory but your
// configuration may vary
include: "./dist/my-project",
// Optionally uncomment the line below to override automatic release name detection
// release: process.env.RELEASE,
}),
],
};
Learn more about configuring the plugin in our Sentry Webpack Plugin documentation.
3. Upload
To upload the source maps, build your Angular application:
ng build # add --prod for Angular versions below 13
Releases
The Sentry Webpack plugin will automatically inject a release value into the SDK, so you should either omit the release
option from Sentry.init
or make sure Sentry.init
's release
option matches the plugin's release
option exactly:
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
// When using the plugin, either remove the `release`` property here entirely or
// make sure that the plugin's release option and the Sentry.init()'s release
// option match exactly.
// release: "my-example-release-1"
});
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
- Package:
- npm:@sentry/angular
- Version:
- 7.46.0
- Repository:
- https://github.com/getsentry/sentry-javascript