Integration von Sentry mit Source Map Generation in einem Capacitor Angular Projekt

In diesem Blog-Beitrag führen wir Sie durch den Prozess, Sentry zu Ihrem Capacitor Angular-Projekt hinzuzufügen, komplett mit Source-Map-Generierung. Dies hilft Ihnen, Fehler zu erkennen und Ihre Anwendung effizienter zu debuggen. Wir zeigen Ihnen auch, wie Sie diese Einrichtung in Ihrer CI-Pipeline verwenden können.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie die folgenden Tools installiert haben:

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

Erstellen eines Sentry-Projekts und eines Authentifizierungsschlüssels

Zuerst müssen Sie ein Sentry-Projekt erstellen und einen Authentifizierungsschlüssel generieren. Gehen Sie dazu wie folgt vor:

  1. Melden Sie sich bei Ihrem Sentry-Konto an oder erstellen Sie ein neues Konto.
  2. Erstellen Sie ein neues Projekt und wählen Sie die gewünschte Plattform (z.B. JavaScript) aus.
  3. Gehen Sie nach der Erstellung des Projekts zu “Einstellungen” > “Entwicklereinstellungen” > “Neuer Token”.
  4. Erstellen Sie einen neuen Token mit den project:releases und project:write Berechtigungen.
  5. Speichern Sie den generierten Token an einem sicheren Ort, da Sie ihn später benötigen werden.

Aktualisieren Ihres Projekts

Jetzt, da Sie Ihr Sentry-Projekt und Ihren Authentifizierungsschlüssel haben, aktualisieren wir Ihr Capacitor Angular-Projekt, um Sentry zu integrieren.

Hinzufügen einer Makefile

Erstellen Sie eine Makefile im Root-Verzeichnis Ihres Projekts mit dem folgenden Inhalt und ersetzen Sie SENTRY_AUTH_TOKEN durch Ihren eigenen Token:

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

Fügen Sie dann den restlichen Inhalt aus der bereitgestellten Makefile zu Ihrem Projekt hinzu.

Aktualisieren von package.json

Fügen Sie zwei neue npm-Skripte zur package.json- Datei hinzu:

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

Installieren von Sentry CLI und Sentry Angular Package

Führen Sie die folgenden Befehle aus, um Sentry CLI und das Sentry Angular-Paket zu installieren (wir verwenden hier die Micro-Version von Sentry, aber Sie können auch die vollständige Version verwenden, wenn Sie möchten):

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

Erstellen von sentry.version.ts

Erstellen Sie eine neue Datei namens sentry.version.ts in Ihrem src-Verzeichnis. Diese Datei wird während des Build-Prozesses vom Makefile mit der entsprechenden Sentry-Release-Version gefüllt.

export const sentryVersion = '';

Hinzufügen der Sentry-Konfiguration zur AppModule

In Ihrer src/app/app.module.ts-Datei importieren Sie das Sentry Angular-Paket und initialisieren es mit Ihrer DSN:

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

// ...

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

Aktivieren von Source Maps in angular.json In Ihrer angular.json-Datei stellen Sie sicher, dass die sourceMap-Option für Produktions-Builds aktiviert ist:

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

Ausführen der Release- und Deploy-Befehle

Jetzt, da alles eingerichtet ist, können Sie die neuen npm-Skripte verwenden, um ein Release für Ihre Web-App und Ihre Native-App zu erstellen und die Source Maps an Sentry zu übertragen:

 npm run release:web
 npm run release:native

Herzlichen Glückwunsch! Sie haben Sentry erfolgreich mit Source-Map-Generierung in Ihr Capacitor Angular-Projekt integriert. Dies hilft Ihnen, Fehler effizienter zu verfolgen und zu beheben, was letztendlich zu einer stabileren und angenehmeren Benutzererfahrung führt.

LET’S WORK TOGETHER