Error tracking in Angular using Rollbar

Error tracking in Angular using Rollbar

We all want to run our request as smoothly as possible, but this is not always the case. Once the application is working, we need to know if and when failures or exceptions are being thrown. That's where the tools for monitoring and tracking errors come in. One of those tools is the Rollbar.

Rollbar provides developers with real-time reporting of exceptions and ongoing deployment monitoring. It provides developers with real-time error monitoring and debugging tools. In this tutorial, we'll see how we can actually implement every project error tracking tool that is rollbar in our angular project.

Steps To Integrate Rollbar

1. Create an account in Rollbar with https://rollbar.com/signup/ & choose your plan according to your project needs. We will choose a free plan for this demo.

2. Now login into your account and create a project as per the following images.

   • Create a Project from a landing page

   

   • Enter Project Details

   

   • Choose your project language or framework to quick setup

   

   • Click “Continue” to get quick setup code.

   

Now we will integrate this code in our actual Angular project.

• First of all install npm package with npm install --save rollbar

• Copy the above screenshot code in your Angular project & it clearly says that this rollbar setup code needs to be integrated into your root module file which is app.module.ts so that we will cover all the errors throughout the project, not only single module or page.

• It might be a chance that you will face some errors in your project while integrating this code like “Cannot find name 'Inject'”, “Cannot access 'RollbarService' before initialization at Module../src/app/app.module.ts”

To resolve these errors modify app.module.ts file like

import { BrowserModule } from "@angular/platform-browser";
import {
Injectable,
Inject,
InjectionToken,
NgModule,
ErrorHandler
} from "@angular/core";
import * as Rollbar from "rollbar";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

const rollbarConfig = {
accessToken: "ACCESS_TOKEN", /* You will find this from your quick setup code */
captureUncaught: true,
captureUnhandledRejections: true
};

export const RollbarService = new InjectionToken<Rollbar>("rollbar");

@Injectable()
export class RollbarErrorHandler implements ErrorHandler {
constructor(@Inject(RollbarService) private rollbar: Rollbar) {}

handleError(err: any): void {
    this.rollbar.error(err.originalError || err);
}
}

export function rollbarFactory() {
return new Rollbar(rollbarConfig);
}

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [
    { provide: ErrorHandler, useClass: RollbarErrorHandler },
    { provide: RollbarService, useFactory: rollbarFactory }
],
bootstrap: [AppComponent]
})
export class AppModule {}

• That’s it we have successfully integrated rollbar in our project. Now onwards if any occurs then we could see it in our rollbar account.

• To test this code, Just write “window.onerror("TestError: Hello world", window.location.href)” in constructor of app.component.ts file. You will see a full error log in your rollbar account.

You can modify your rollbar account settings to use various modes like send this error to your team member’s emails, slack channel, create a JIRA ticket, bind source map to see exact line number where the error has occurred.

Deployments come and go, but there will be errors and exceptions. We can fix them and troubleshoot errors. Error tracking tools are a crucial part of the software life cycle, and everybody can bring an entirely new way to use our app, which we haven't thought about before.

There are many solutions and while they all focus on helping us to locate errors they each have their own benefits and drawbacks which may be crucial for our application. If feasible, we would recommend taking advantage of the free trials in your staging environment and checking these tools Change is not easy, but it may help you build a better application.

Things to take care of

1. You should add a H1

2. The focus keyword "rollbar" should appear in the H1

3. The focus keyword "rollbar" should appear in the image name

4. The focus keyword "rollbar" Should appear in the image Alt tag