What is App monitoring?
Application monitoring is the process of measuring application performance, availability, and user experience and using this data to identify and resolve application issues before they impact the customers.
These include issues such as:
- Slow rendering or screen lagging
- Inconsistent or unresponsive user experience
- Network requests/API errors
Importance of App monitoring
When building web applications, we expect them to be used in a great range of devices and browsers by our end users. In our industry, where things have to move fast, no developer is safe from introducing errors to a project. Another critical factor is that, especially when working with B2C applications, most end-users are unlikely to report errors. They might either just ignore them (if they are not critical) or much worse-quit using the application without even getting a chance to understand why! On the other hand, some users do report the errors but the provided information is usually generic and insufficient. Therefore many a times we are left without knowing what are the actual causes and steps we might need to take in order to reproduce the issue.
Any inconsistencies, downtime, or errors on the client can lead to a loss of trust and credibility in an application. Therefore, app monitoring is an essential part of development. Fortunately, Sentry.io is the most powerful tool for tracking errors, keeping records of issues, and monitoring front-end performance.
Let’s get started with Sentry.io for Angular
It is an open-source error monitoring tool that supports various languages and frameworks such as Javascript, Java, PHP, Ruby, React, Rust, Unity, etc.
In this article, let’s set up and start monitoring an Angular app with Sentry.io.
Step 1: Set up a Sentry Project
Create a free Sentry account at sentry.io. After successfully constructing a new account, click the Create project button.
By selecting Angular as a platform and providing a project name, we will be able to create a project.
Step 2: Install Sentry SDK
npm install @sentry/browser — saveStep 3: Configure Sentry in Angular app
For Sentry to connect to our angular app, we need to configure our SDK with our client key, also known as the Sentry DSN (Data Source Name) value.
To retrieve the client key, simply navigate to Settings > Projects > {Your Project Name}, as shown in the screenshot below.
After that, click on Client Keys(DSN) and copy the DSN value from the Clients keys.
Back in the AppModule file, we have to initialize it.
import { NgModule, ErrorHandler, Injectable } from “@angular/core”;
import * as Sentry from “@sentry/browser”;Sentry.init({
dsn: <YOUR DSN, WHICH SENTRY GENERATES FOR YOU>,
environment: environment.production ? ‘prod’ : ‘dev’
});@Injectable()
export class SentryErrorHandler implements ErrorHandler {
handleError(error) {
Sentry.captureException(error.originalError || error);
}
}@NgModule({
declarations: [ … ],
imports: [ … ],
providers: [{
provide: ErrorHandler, useClass: SentryErrorHandler
}],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: Testing Sentry integration
If we run our app, we are getting some errors and let’s see if those errors are captured in the Sentry.io dashboard.
Step 5: Slack integration with Sentry
Sentry provides various apps/services integration to get the efficiency such as Jira, GitHub, etc. You can check more of your favourite apps integration here.
We are using Slack as a messaging app so we have integrated Sentry.io errors on the Slack to notify the errors. For slack integration, we need to install the slack app and for that, we might require permission from the Sentry owner/ manager.
- In Sentry.io, traverse to Settings > Integrations > Slack.
- Click “Add Workspace”.
- Now, We should toggle to the Slack workspace to which we want to connect using the dropdown menu in the upper right corner of the authentication window. Then select “Allow”. Repeat this process if we are connecting to multiple workspaces.
Sentry integration is done and we need to set alert rules to get the notification from Slack in real-time. We can set up an alert rule by going to Alerts and clicking “Create Alert”. From here, we can configure alerts to route notifications to our Slack workspace(s). In the issue alerts page, select “Send a Slack notification” in the actions dropdown and then also select your workspace and channel:
Once we receive a Slack notification for an issue alert, we can use the “Resolve”, “Ignore”, or “Assign” buttons to update the Issue in Sentry.
Likewise, If you want to integrate your favourite apps, surely visit the Sentry.io Website.
Conclusion
Certainly, front-end monitoring has gradually become popular in web development practices today. Powerful tools such as Sentry can provide useful insights and error management to enrich the end-user experience. It is most perceivable in the long term when our application grows, introducing more features (and consequently more bugs), and starting to bring more users along.
We can integrate with several apps/services to increase productivity. Jira integration helps to assign/create new Jira to team members directly from the Sentry.io dashboard. Likewise, Sentry offers multiple app integration options and is also available on almost every framework. I personally believe that error tracking and monitoring are worthy investments that can provide us a lot of value.
