Nx Angular CLI
If you're using @nx/angular
, you can use the Nx CLI together with one of our bundler plugins (such as Webpack or esbuild) to automatically upload source maps to Sentry when building your app (with nx build
, for example).
Due to @nx/angular
's architecture, you'll first need to configure an executor that allows registering bundler plugins. In the end, you'll be able to automatically upload source maps whenever you're creating a production build of your app.
Configure your app to upload source maps in three steps.
Before you register the Sentry bundler plugin, first ensure that you can register plugins (such as webpack or esbuild plugins) with your current executor (or Angular builder). Typically, this is possible if you have access to a webpack.config.js
or a similar configuration file. If this already is the case, skip to step 2.
If you cannot yet register a plugin, you'll need to change the executor in your project.json
to a custom executor (such as @nx/angular:webpack-browser
or @nx/angular:browser-esbuild
) that allows registering a plugin. For example, in your project.json
, replace the default executor (@angular-devkit/build-angular:browser
) with @nx/angular:webpack-browser
:
project.json
{
"targets": {
"build": {
"executor": "@nx/angular:webpack-browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js" // path to your webpack.config.js
},
"sourceMap": { // enable source maps generation
"scripts": true,
}
// ... other options
},
// ... other options
}
}
}
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
Install the Sentry Webpack plugin:
npm install --save-dev @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: [
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.
Install the Sentry esbuild plugin:
npm install --save-dev @sentry/esbuild-plugin
Then, follow the official Nx documentation to register the Sentry esbuild plugin (@sentry/esbuild-plugin
) in your project.json
file. For example:
project.json
{
"targets": {
"build": {
"executor": "@nx/angular:browser-esbuild",
"options": {
"plugins": [
{
"path": "@sentry/esbuild-plugin",
"options": {
"org": "example-org",
"project": "example-project",
"authToken": ""
}
}
]
}
}
}
}
To upload the source maps, build your Angular application:
nx build
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").