Integrating Sentry with Source Map Generation in a Capacitor Angular Project

In this blog post, we will walk you through the process of adding Sentry to your Capacitor Angular project, complete with source map generation. This will help you catch errors and debug your application more efficiently. We’ll also show you how to use this setup in your CI pipeline.

Prerequisites

Before we begin, make sure you have the following tools installed:

  1. Node.js and npm
  2. Angular CLI
  3. Capacitor CLI
  4. Sentry CLI

Creating a Sentry Project and Auth Key

First, you’ll need to create a Sentry project and generate an authentication key. To do this, follow these steps:

  1. Sign up or log in to your Sentry account.
  2. Create a new project and select the desired platform (e.g., JavaScript).
  3. After creating the project, go to “Settings” > “Developer Settings” > “New Token”.
  4. Create a new token with the project:releases and project:write scopes.
  5. Save the generated token somewhere safe, as you’ll need it later.

Updating Your Project

Now that you have your Sentry project and auth key, let’s update your Capacitor Angular project to integrate Sentry.

Adding a Makefile

Create a Makefile in your project’s root directory with the following content, replacing the SENTRY_AUTH_TOKEN with your own:

export SENTRY_AUTH_TOKEN = <your_sentry_auth_token>

SENTRY_CLI=./node_modules/.bin/sentry-cli
SENTRY_ORG=asapteq
SENTRY_PROJECT=wlda
SOURCEMAP_LOCATION=www
VERSION=`$(SENTRY_CLI) releases propose-version`
PLT?=web
do_release: config build_angular sync_capacitor create_release associate_commits upload_sourcemaps

config:
	@echo "export const sentryVersion = '${VERSION}';" > sentry.version.ts

build_angular:
ifeq ($(PLT), web)
	ng build --configuration production
else
	ng build --configuration production
endif

sync_capacitor:
ifeq ($(PLT), app)
	npx cap sync
endif

create_release:
	$(SENTRY_CLI) releases -o $(SENTRY_ORG) new -p $(SENTRY_PROJECT) $(VERSION)

associate_commits:
	$(SENTRY_CLI) releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) set-commits --ignore-missing --local $(VERSION)

upload_sourcemaps:
	$(SENTRY_CLI) releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) files \
	$(VERSION) upload-sourcemaps --rewrite --validate $(SOURCEMAP_LOCATION)

deploy: do_release

Then, add the remaining content from the provided Makefile to your project.

Updating package.json

Add two new npm scripts to your package.json file:

"release:web": "make PLT=web",
"release:native": "make PLT=app",

Installing Sentry CLI and Sentry Angular Package

Run the following commands to install Sentry CLI and the Sentry Angular package (we are using the micro version of Sentry here, but you can use the full version if you want):

npm i -D @sentry/cli
npm i @micro-sentry/angular

Creating sentry.version.ts

Create a new file named sentry.version.ts in your src directory. This file will be populated by the Makefile during the build process with the appropriate Sentry release version.

export const sentryVersion = '';

Adding Sentry Configuration to AppModule

In your src/app/app.module.ts file, import the Sentry Angular package and initialize it with your DSN:

import { environment } from '../environments/environment';
import { sentryVersion } from '../../sentry.version';

// ...

@NgModule({
  // ...
    imports: [
        // ...
        MicroSentryModule.forRoot({ dsn: environment.sentryDsn, release: sentryVersion }),
    ],
})
export class AppModule { }

Enabling Source Maps in angular.json

In your angular.json file, make sure that the sourceMap option is enabled for production builds:

    "configurations": {
        "production": {
            "sourceMap": true,
            // ...
        }
    }

Running the Release and Deploy Commands

Now that everything is set up, you can use the new npm scripts to create a release for your web app and your native app and upload the source maps to Sentry:

 npm run release:web
 npm run release:native

Congratulations! You’ve successfully integrated Sentry with source map generation in your Capacitor Angular project. This will help you track and fix errors more efficiently, ultimately leading to a more stable and enjoyable user experience.

LET’S WORK TOGETHER