Imagine that you just finished and shipped your amazing app. Are you sure if it’s error-proof? Customers may suffer from an error which you never know of, and they are screaming in vain. This is total chaos — I’m being a little bit dramatic here.
However, if you don’t know of and fix the error, your business will definitely lose customers. Without a proper error tracking system, you will never know why. Customers won’t even bother to let you know. They just close it and use other services.
In this article, I will show you how to set up a tracking system for your Angular app with Sentry — an open-source and hosted error monitoring that helps all software teams discover, triage, and prioritize errors in real-time.
Step 1: You will need an account from Sentry (Free for Developer)
It’s straight forward, and there's a wide range of frameworks and languages that Sentry supports.
When you click on your choice of languages, you will see a guide that helps to set your system up.
Step 2: Add Sentry to Your Project (Angular)
Install Sentry through NPM
npm install @sentry/browser
npm install @sentry/integrations
Then add initiate Sentry on your app.module.ts. The release will help you to connect with Github commits. The RewriteFrames configuration will help Sentry to link stack traces with correct source files if you’re using TypeScript.
// app.module.ts
import * as Sentry from '@sentry/browser'
import { RewriteFrames } from '@sentry/integrations'
Sentry.init({
dsn: <your-sentry-dsn>,
release: <should be the same with the deployed code>,
integrations: [
new RewriteFrames(),
],
})
@Injectable()
export class SentryErrorHandler implements ErrorHandler {
constructor() {}
handleError(error) {
Sentry.captureException(error.originalError || error);
console.error(error)
}
}
@NgModule({
providers: [{ provide: ErrorHandler, useClass: SentryErrorHandler }]
})
Step 3: Test the Configuration
The configuration can be tested locally. What you need to do is to call un unidentified function in your code and run it.
myUndefinedFunction()
You will get an email notification about the error, and you can check it on the Sentry dashboard.
It means that from now if there is something wrong when customers interact with your app, you will know about it.
Step 4: Create a Release
A release is a version of your code that is deployed to an environment. You should read more about this on the Sentry platform. Before creating a release, you should integrate Sentry with your Git repository.
I prepared a script that you can use to deploy a release to Sentry after you finish your development.
// sentry-deploy.sh
#!/bin/sh
export SENTRY_AUTH_TOKEN=xxx
export SENTRY_ORG=dalenguyen
export SENTRY_PROJECT=dalenguyen-me
# Version from git
REVISION=$(git rev-parse --short HEAD)
sentry-cli releases new -p $SENTRY_PROJECT "$SENTRY_PROJECT@$REVISION"
sentry-cli releases set-commits "$SENTRY_PROJECT@$REVISION" --auto
# Upload source maps
sentry-cli releases files "$SENTRY_PROJECT@$REVISION" upload-sourcemaps ./dist --rewrite
# Finalize
sentry-cli releases finalize "$SENTRY_PROJECT@$REVISION"
Remember the release in the app.module.ts, it should the same with sentry-deploy.sh. You can get the revision by running:
git rev-parse --short HEAD
The source maps uploading is really important because in production your assets are minified. It would be extremely hard to debug your error when looking at a minified JavaScript code.
So if you have your source maps ready, you will know which line of code causes the issue.
If you have any questions or suggestions please leave a comment. Hope this helps ;)
Top comments (3)
Hello Dale! Thanks for your sharing, I was trying to follow through your guide.
However, right after installation in step 2, I encountered multiple errors, it seems that the integration package from sentry is filled with errors.
I am on Angular 8 and was wondering if you had similar experience. If so, how did you work around them?
Thank you!
Hello, Keidi Tay
Did you somehow managed to install sentry on Angular version 8 ?
I am kinda stuck.
Hello Parish! Yes, fortunately i found another workaround.
I installed this version of sentry in my project, "@sentry/angular": "5.29.2".
Also, instead of sentry integration, i used @sentry/angular. Below is a snippet of how I handle use it.
import * as Sentry from '@sentry/angular';
class SentryErrorHandler implements ErrorHandler {
constructor() {
}
handleError(err: any): void {
Sentry.captureException(err);
}
}
Hope it works for you.