Custom error handling

Adding custom error handling can be helpful for projects. Let's suppose you forget to test your application—custom handling can help you detect the errors that users face. You can save the error log to a backend system, where you can view the errors that were faced by your customers, and fix the errors or start fixing the errors before the customers report them. This will help in keeping the product bug-free, or at least keep us aware of the bugs our customers are facing.

You can create a server that saves all of these errors, but you can also use some error-tracking software to track the errors for you. There are tools such as Sentry (https://docs.sentry.io/clients/javascript/integrations/#angular), Rollbar (https://docs.rollbar.com/docs/angular), Keen (https://keen.io/docs/api/), TrackJS (https://docs.trackjs.com/browser-agent/integrations/angular2/), and so on that you can use, all of which have varying pricing models. We will be using Sentry in this section, which has a very good free usage tier for small projects with fewer error logs.

Let's create a service that implements ErrorHandler by running the following command:

> ng g s global-error-handler

Now, let's implement the ErrorHandler interface in the new service, GlobalErrorHandlerService:

import { Injectable, ErrorHandler } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class GlobalErrorHandlerService implements ErrorHandler {
    
    constructor() { }

    handleError(error) {
        console.log('custom logic should run here when an error is 
        thrown!');
    }
}

Now, let's provide our ErrorHandler instead of the default ErrorHandler in our AppModule.ts file:

...
import { NgModule, ErrorHandler } from '@angular/core';
...
import { GlobalErrorHandlerService } from './global-error-handler.service';
import { environment } from 'src/environments/environment';

@NgModule({
    ...
 providers: [{
        provide: ErrorHandler,
        useClass: environment.production ? GlobalErrorHandlerService : 
        ErrorHandler,
    }],
    ...
})
export class AppModule { }

Let's throw an error in our post page. This will be triggered when we click on the toggleFavorite button:

...
export class PostComponent {
    ...
    
    toggleFavorite() {
        throw new Error('TOGGLE FAVORITE');
        ...
    }
}

Now, when you build your application with the prod flag, run the application, and click on the toggle Favorite button, you should see a log in the browser's console, which we added to handleError method of our GlobalErrorHandlerService.

Now that we have added a custom error handler, let's get Sentry set up. You need to create an account on https://sentry.io/ and create a new project, selecting Angular when asked.

Now, let's wire up the setup, as mentioned in the documentation. Here, we will make changes to GlobalErrorHandlerService.

Let's install @sentry/browser using npm:

> npm install @sentry/browser --save

Now, let's use it in our ErrorHandler:

...
import * as Sentry from '@sentry/browser';

Sentry.init({
    dsn: 'https://[email protected]/1443406'
});

@Injectable({
    providedIn: 'root'
})
export class GlobalErrorHandlerService implements ErrorHandler {
    ...
    handleError(error) {
        const eventId = Sentry.captureException(error.originalError || 
        error);
        Sentry.showReportDialog({ eventId });
    }
}

Then, we need to build our application with the prod flag, with our Sentry setup in place.

Now, when you click on the toggle Favorite button, you should see a dialog box where you can enter more details about the error you encountered:

If we check the Sentry.io application, we should get more details about the error, even if the user didn't want to submit a crash report.

This should show the whole stack trace of the error, along with the breadcrumb, which allows developers to understand what steps triggered this error:

This will help us find the errors and fix them in our active development or support cycles. This is the brilliance of using custom error handling. More often than not, when the customer complains, someone from the support team has to coordinate with the customer and track down the bug. This avoids all the fuss and provides a much better experience, both for the customer and the development team.

Table of Contents for Custom error handling

Create new playlist

Sign In

Sign Up

Table of Contents for
Custom error handling