Error Logging With Sentry on Angular
A Self-Hosted and Cloud-Based Error Monitoring Solution for Your Angular Application
Introduction
Every software developer has gone through the frustration of not being able to fix bugs. There are various platform-specific debugging tools to help you fix bugs. As a developer, you fix bugs only when you encounter them.
The Testing phase is implemented as a standard procedure in any Software Development Life Cycle. This phase includes Unit Testing, System Testing, Integrated Testing, etc. But there is always a chance of you missing a bug and proceeding into production. Even after deployment, you will be unaware of any residing bugs without anyone informing you about them. An end-user will rarely report a bug via the support email provided - crash reporting. This is where Sentry comes into play.
Sentry provides self-hosted and cloud-based Error monitoring that helps all software teams discover, triage, and prioritize errors in real-time.
Cloud-based error logging systems like Sentry help you record instances of errors, even after deployment. This article is to give you an introduction to Error Logging with Sentry on Angular. Let's start.
Sentry supported languages and frameworks
Why choose Sentry over console.log( ) or console.error( ) ?
The most important difference between your general console logging and Sentry is how events are stored. Sentry allows the teams to monitor issues that occur even on the end-users device. A simple console error would not send the logs to any cloud platform. Rather your errors typically go to a log file on disk.
Initial Setup
Account Creation & Project Creation
- We must create an account with sentry.io
- Once registered, you will be greeted with a welcome page. Click on I'm Ready.
- Select your platform as Angular and create a project.
- After the successful creation of the project, you will be guided to the Angular SDK Installation Guide.
Installation and Setup on Angular
- Install the
@sentry/browserpackage
// Using yarn
yarn add @sentry/browser
// Using npm
npm install @sentry/browser
- Generate a service with angular CLI. You will find a DSN value on your dashboard. Replace " CHECK-YOUR-DASHBOARD" with your DSN value. Use the snippet below in your service.
You can find the DSN value in Sentry.init
- As the final step, we should implement this ErrorHandling Service in our
app.module.tsfile.
Congratulations !! You have successfully set up a cloud-based error logging on your Angular Project. You can try creating an intentional bug in your code and see whether Sentry detects it. After Sentry detects an activity, you will be guided to your sentry project dashboard. You can monitor all your issues and errors in real-time in your dashboard.
Your Sentry Dashboard
Conclusion
This article introduced us to the concept of error logging in the cloud with Sentry. For further advanced usages, please refer to the official documentation of Sentry.io mentioned below in the resources section.
I hope you learned something from this. Farewell !!
Resources