Lotanna Nwose

In this turorial, you will be introduced to errors tracking in Angular 7 using the errorHandler class and Rollbar.

![angular-errorhandler-rollbar-img1](//images.ctfassets.net/1es3ne0caaid/3yB85QZ84GXIMsJLPTe0ta/5a8a3b9a1972e2ba153ec581a3816684/angular-errorhandler-rollbar-img1.png)

This is the last part of the Angular 7 error handling series, you can refer to [the first part here](https://pusher.com/tutorials/error-handling-angular-part-1), and [the second here](https://pusher.com/tutorials/error-handling-angular-part-2) and [the third part here](https://pusher.com/tutorials/error-handling-angular-part-3).


## Prerequisites

To be able to follow through in this article's demonstration you should have:

- Node version 11.0 installed on your machine.
- Node Package Manager version 6.7 (usually ships with Node installation).
- [Angular CLI](https://cli.angular.io/) version 7.0
- The latest version of Angular (version 7)

```
    // run the command in a terminal
    ng version
```

Confirm that you are using version 7, and update to 7 if you are not.
Other things that will be nice-to-haves are:


- A working knowledge of the Angular framework at a beginner level.
- Familiarity with Angular services will be a plus but not a requirement.

In this series, you have been introduced earlier to handling client side errors and then HTTP errors gracefully in Angular 7 with tools like errorHandlers, Interceptors and even RxJS operators. In this post you will be shown how to track these errors in a remote tracking environment.

## The problem

Let’s review the problems we face with testing and error tracking in production. You can skip this if you read part three.

### Tracking errors
When your Angular application is running in the development server with ng serve you can easily track errors in the application. The fastest way you can do this for JavaScript errors is with the errorHandler as it was illustrated in [this introductory post here](https://pusher.com/tutorials/error-handling-angular-part-1). The errorHandler logs this error for you, the developer, in the browser console you test your application with. This is standard procedure for the development environment.

### ErrorHandler limitations
When you build out the application in production and ship it to your users however, there is a big problem that should be obvious by now. Testing the shipped applications become an issue. If your application is in say beta stage, you might maybe send it to family and friends to use, you have to also be on those different devices to be able to spot the errors in their various browser consoles. This is of course not a scalable solution if you have many users who might not even be in the same location as you. 

### Leaving error reporting to users
Initially, the solution to this problem will be to build a system in such a way that your users can report errors on the application. However, this is rarely the case as users have been reported to be really impatient and this is confirmed by the [statistics on the high churn rate of users](https://www.statista.com/statistics/384224/monthly-app-launches-churn/) with applications. The more likely situation that is more commonly seen in the place of error reporting is one-star ratings and high churn rate.

A user is more likely not to use your application and even give a bad review of it than they are to report the error experienced while using the app. This is very practical and it shows an underlying question of responsibility. The responsibility of reporting errors should not be on the user but the developer of the application.

### Remote error tracking
What if there was a way you can still track errors in your application from all the users using the application in real time, remotely and in a centralized location. Thanks to advancement in code testing and monitoring services that has improved in web development over the years, you can now. There are a lot of services in the market right now that lets you do exactly that, some of which are Sentry, Rollbar, Airbrake, Raygun and a host of others.

In this article, you will be introduced to Rollbar and how it uses the Angular errorHandler class to remotely track and report errors in your Angular applications. 

## Introducing Rollbar

[Rollbar](https://rollbar.com/) is a software as a service product that shows you exception and crash reports in real-time in one centralized dashboard so you can track and debug bugs in record time. In your dashboard, similar errors are automatically grouped using Rollbar's fingerprinting technology to reduce noise, and all errors include detailed data to help you assess impact and assign priority.

Rollbar automatically collects all the data you need to replicate and debug an error, presented in ways optimized for debugging speed and it works with JavaScript source maps. With [Telemetry](https://en.wikipedia.org/wiki/Telemetry), you can debug client-side JavaScript errors faster. It works like a black box recorder, but for errors.

## Getting started

To get started using Rollbar, visit [the website here](https://rollbar.com) and click the **Sign Up** button to create an account. You will see options to sign up with GitHub, Google account or any email account. If successfully created, you will see this welcome screen displayed..

![angular-errorhandler-rollbar-img2](//images.ctfassets.net/1es3ne0caaid/31qfrdmImEkqvr6yOJfs1Q/d45c5666167c9ee2539d60f7b37074d9/angular-errorhandler-rollbar-img2.png)

The next step is to click the **LET'S DO IT** button at the end of the page to open the new project creation page.

## Creating your first project

The next page that appears on the interface will show you input elements where you can type in the name of the new project you want to create. 

![angular-errorhandler-rollbar-img3](//images.ctfassets.net/1es3ne0caaid/51Tp1s4UgzhbbISFQfgC2J/b6aef478577c38bbb2383207dacef491/angular-errorhandler-rollbar-img3.png)

I call mine ng-errors, you can call it any name of your choice. After deciding on that, click **CONTINUE** and proceed to the next stage of the onboarding process, which is to choose the SDK. For Angular 7, choose the **Angular 2+** tab in the array of other languages and frameworks, then click **CONTINUE**.

The very next interface you will see is your Rollbar dashboard, which shows installation instructions along with the SDK configuration containing your unique private access token.

## Using Rollbar

If you have followed this post from the start, you should have Angular 7 all setup in your machine, you have also now setup a Rollbar account and created a new project. Now download this demo project from our [introductory article here](https://github.com/viclotana/ng_errors). After unzipping it, open the project folder in VS Code and install Rollbar for browser use in a terminal inside the project with this command:

```
    npm install rollbar
```

This installs the Rollbar SDK into the project, making the Angular API available for use. Now you have to make changes in two files, go into the `error.service.ts` file and copy in the code block below:

```typescript
    // src/app/error.service.ts
    import * as Rollbar from 'rollbar';
    import {
    Injectable,
    Inject,
    InjectionToken,
    ErrorHandler
    } from '@angular/core';
    const rollbarConfig = {
    accessToken: 'COPY THIS FROM YOUR DASHBOARD',
    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);
    console.log('error occured here brooo');
    }
    }
    export function rollbarFactory() {
    return new Rollbar(rollbarConfig);
    }
```

This code block comes directly from the Rollbar Angular API, you can now modify the error handler in any custom way you like so long as you do not change class names. I added a console log message just to see the number of times errors are logged. Also, if you copy the code exactly from here, you will get an invalid token error which will be fixed when you use your own unique token from your dashboard. 

The next thing to do is to make sure to import and register the new error handler and the service in the `app.module.ts` file. Copy in the code below to do that:

```typescript
    // src/app/app.module.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, ErrorHandler } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { RollbarErrorHandler, RollbarService, rollbarFactory } from './error.service';
    import { ErrorComponent } from './error/error.component';
    @NgModule({
    declarations: [
    AppComponent,
    ErrorComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule
    ],
    providers: [
    {
    provide: ErrorHandler,
    useClass: RollbarErrorHandler,
    },
    {
    provide: RollbarService,
    useFactory: rollbarFactory,
    },
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
```

To test it, run your application in development environment:

```
    ng serve
```

This displays our application below


![angular-errorhandler-rollbar-img4](//images.ctfassets.net/1es3ne0caaid/1ZHkE0EbEomTmJCChfTEnp/ffb9ae432d68fcc1137d930dee854c49/angular-errorhandler-rollbar-img4.png)

To trigger an exception click the button with try catch, once you do that the app breaks. Now go to your Rollbar dashboard in your browser and you will see the error tracked in real time.


![angular-errorhandler-rollbar-img5](//images.ctfassets.net/1es3ne0caaid/5BzksWQLBUp4CfGtHFJHAy/e18f3fe32985524e3eff5b8e48540e06/angular-errorhandler-rollbar-img5.png)

If you click on the error, you will see a very well detailed and comprehensive analysis of the said error. With a lot of important sections including tracebacks, occurrences, number of users experiencing the error and even possible community solutions to the error, based off a wide range of data already collected on similar errors by Rollbar.


![angular-errorhandler-rollbar-img6](//images.ctfassets.net/1es3ne0caaid/3Odgeq9FzDtP7yWDKGjJcS/80968714ce0466cad81ef06bc6c4835e/angular-errorhandler-rollbar-img6.png)

## Collaboration tool

Rollbar also provides a very significant feature that makes it seamless for you and your development team to be on top of your workflow with error tracking for your application. You can create a team, or be invited into one where you can all now get updates and email alerts on these errors as they occur and so you can work together towards fixing them.

![angular-errorhandler-rollbar-img7](//images.ctfassets.net/1es3ne0caaid/1G25qFfPlI1opMfGRgUi4d/5b3a8edc90f14951fc2de5dfed8a13b2/angular-errorhandler-rollbar-img7.png)

## Numerous integrations

Rollbar also has a very seamless platform to integrate your application with your core open source development environment, be it GitHub, GitLab or Bitbucket. This way, you will not only be able to track errors, but have a straightforward way of fixing them and running tests all in a painless approach. 


![angular-errorhandler-rollbar-img8](//images.ctfassets.net/1es3ne0caaid/3meP6gL59vIUu5Gb4sSGuz/56178887064152948a886423d85e3a07/angular-errorhandler-rollbar-img8.png)

## Deploy tracking

Not only is Rollbar great for source control integration, it is also great for tracking your application deployment and continuous integration. There a lot of ways you can deploy your Angular application and Rollbar integrates with most of them to ensure you have a pain-free workflow, be it Heroku, or MS Build or Powershell or Circle CI.


![angular-errorhandler-rollbar-img9](//images.ctfassets.net/1es3ne0caaid/l1eWZCidF9wMRFAPkTp1e/d4a1db627000447a190a51c8805cfdfc/angular-errorhandler-rollbar-img9.png)

## About security

Rollbar ensures the complete security of your application data. As part of this commitment,  they have a variety of industry-standard security technologies and procedures to protect your information from unauthorized access, use, or disclosure, strongly adhering to HIPAA and ISO 27001 compliance and meet industry best practices where applicable. Learn more about the security policy and their compliance [here](https://docs.rollbar.com/docs/security).

## Conclusion

Rollbar is one of the best error tracking services around for web applications. In addition to the well laid out documentation, it has a good number of integrations with tools you might already be using in your workflow and that makes adopting it an attractive option. Try Rollbar today!

This tutorial series will introduce you to errors in Angular 7. In this final part, part four, learn about errors tracking in Angular 7 using the errorHandler class and Rollbar. Rollbar is one of the best error tracking services around for web applications.

Introduction to error handling in Angular 7 - Part 4

no pusher tech

Introduction to error handling in Angular 7: Part 4 - Rollbar 

# Remote error tracking in Angular 7 with Sentry
In this tutorial, you will be introduced to errors tracking in Angular7 using the errorHandler class and Sentry.

![angular-errorhandler-sentry-img1](//images.ctfassets.net/1es3ne0caaid/3UzmU1I84iFV73uvgeriNc/d83ca1092f3e7f57d1cdc5da8bd9c272/angular-errorhandler-sentry-img1.png)

This is the third part of the Angular 7 error handling series, you can refer to [the first part here](https://pusher.com/tutorials/error-handling-angular-part-1), and [the second here](https://pusher.com/tutorials/error-handling-angular-part-2).

## Prerequisites

To be able to follow through in this tutorial's demonstration you should have:

- Node version 11.0 installed on your machine.
- Node Package Manager version 6.7 (usually ships with Node installation).
- [Angular CLI](https://cli.angular.io/) version 7.0
- The latest version of Angular (version 7)

```
    // run the command in a terminal
    ng version
```

Confirm that you are using version 7, and update to 7 if you are not.
Other things that will be nice-to-haves are:


- A working knowledge of the Angular framework at a beginner level.
- Familiarity with Angular services will be a plus but not a requirement.

In this series, you have been introduced earlier to handling client side errors and then HTTP errors gracefully in Angular 7 with tools like errorHandlers, Interceptors and even RxJS operators. In this post you will be shown how to track these errors in a remote tracking environment.

## Tracking errors

When your Angular application is running in the development server with ng serve you can easily track errors in the application. The fastest way you can do this for JavaScript errors is with the errorHandler as it was illustrated in [this introductory post here](https://pusher.com/tutorials/error-handling-angular-part-1). The errorHandler logs this error for you, the developer, in the browser console you test your application with. This is the standard procedure for the development environment. 

## The problem

When you build out the application in production and ship it to your users however, there is a big problem that should be obvious by now. Testing the shipped applications become an issue. If your application is in say beta stage, you might maybe send it to family and friends to use, you have to also be on those different devices to be able to spot the errors in their various browser consoles. This is of course not a scalable solution if you have many users who might not even be in the same location as you. 

## Error reporting by users

Initially, the solution to this problem will be to build a system in such a way that your users can report errors on the application. However, this is rarely the case as users have been reported to be really impatient and this is confirmed by the [statistics on the high churn rate of users](https://www.statista.com/statistics/384224/monthly-app-launches-churn/) with applications. The situation that is more commonly seen in the place of error reporting is one-star ratings and high churn rate. 

A user is more likely not to use your application and even give a bad review of it than they are to report the error experienced while using the app. This is very practical and it shows an underlying question of responsibility. The responsibility of reporting errors should not be on the user but the developer of the application. Although as you will see, you can make it easier for users to report errors on your application but only as a secondary option.

## Remote error tracking

What if there was a way you can still track errors in your application from all the users using the application in real time, remotely and in a centralized location. Thanks to advancement in code testing and monitoring services that has improved in web development over the years, you can now. There are a lot of services in the market right now that lets you do exactly that, some of which are Sentry, Rollbar, Airbrake, Raygun and a host of others. 

In this tutorial, you will be introduced to Sentry.io and how it uses the Angular errorHandler class to remotely track and report errors in your Angular applications.

## Introducing Sentry

[Sentry](http://sentry.io) is an open source software as a service that was built to track errors by providing visibility across your Angular application, providing you with details that you need to fix bugs and handle errors gracefully before the users encounter them. It has an extensive API that handles events from every popular language or application supporting JavaScript and all the frameworks including Angular, Vue and React. It also supports Python, Ruby on Rails, PHP, Go, Swift, Perl and a lot more others. It also perfectly integrates with a lot of developer services like Slack, Trello, GitHub, Twilio and a host of many others.

## Getting started

Visit the [Sentry page here](http://sentry.io) and click on **Get started.** You will see a page with a lot of sign up options including through your mail address, through GitHub or even through an Azure Devops account. The process will go through authentication with whichever option you choose. 


![angular-errorhandler-sentry-img2](//images.ctfassets.net/1es3ne0caaid/6KBwnaIfHDT8MWRgkLDuDP/0e1e430360b63d21696d1e9d83781931/angular-errorhandler-sentry-img2.png)

When you see a similar screen (I used GitHub to sign up), click on **New Account** and then confirm that your name and email address are accurate. You are also to create an organisation at this point, you can call it your own name if it is a personal account. 


![angular-errorhandler-sentry-img3](//images.ctfassets.net/1es3ne0caaid/1TjSZL1qRcWXGrNWBWrrae/b91077c6dd122eeb35b8a1769ae9fa7b/angular-errorhandler-sentry-img3.png)

Next thing is to create a new project, a dashboard displaying a wide range of languages you can run Sentry on. Projects allow you to scope events to a specific application in your already created organization. Select **Angular** and give the project a name of your choosing then click on create project.

The next stage is a small questionnaire you are to fill telling Sentry your developer role and how you heard about Sentry, this is purely a marketing and data collection phase to help developers of Sentry improve the service and get it in front of more developers like yourself. 

When you click submit, the final stage where the API specific to Angular projects is saved for you to configure your Angular application with. It is basically a quick getting started guide. 
Take note of the dsn code inside the component provided for you, it should look like this:

```
    Sentry.init({
      dsn: "https://bla-bla-bla"
    });
```

For in-depth instructions on integrating Sentry with Angular, you can view [the complete documentation](https://docs.sentry.io/platforms/javascript/angular/).

## Using Sentry

If you have followed this post from the start, you should have Angular 7 all setup in your machine, you have also now setup a Sentry account and created a new project. Now download this demo project from our [introductory article here](https://github.com/viclotana/ng_errors). After unzipping it, open the project folder in VS Code and install Sentry for browser use in a terminal inside the project with this command:

```
    npm install @sentry/browser 
```

This installs the Sentry JavaScript SDK into the project, making the Angular API available for use. Now you have to make changes in two files, go into the `error.service.ts` file and copy in the code block below:

```typescript
    // src/app/error.service.ts
    import { Injectable, ErrorHandler, Injector } from '@angular/core';
    import { Router } from '@angular/router';
    import { HttpErrorResponse } from '@angular/common/http'
    import * as Sentry from "@sentry/browser";
    Sentry.init({
    dsn: "COPY FROM YOUR DASHBOARD"
    });
    @Injectable({
    providedIn: 'root'
    })
    export class SentryErrorHandler implements ErrorHandler{
    constructor(private injector: Injector) { }
    handleError(error: any) {
    const router = this.injector.get(Router);
    const eventId = Sentry.captureException(error.originalError || error);
    if (Error instanceof HttpErrorResponse) {
    console.log(error.status);
    }
    else {
    console.error("an error occured here broo");
    Sentry.showReportDialog({ eventId });
    }
    router.navigate(['error']);
    }
    }
```

Here, you have imported the Sentry you earlier installed through npm, now copy the dns code, the one you took note of earlier and paste it inside the code block above. The part "copy from your dashboard" should be changed to the dns code from your dashboard. Now you are done with the error service file, open your `app.module.ts` file and copy in the code block below:

```typescript
    // src/app/app.module.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, ErrorHandler } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { SentryErrorHandler } from './error.service';
    import { ErrorComponent } from './error/error.component';
    @NgModule({
    declarations: [
    AppComponent,
    ErrorComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule
    ],
    providers: [
    {
    provide: ErrorHandler,
    useClass: SentryErrorHandler,
    },
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
```

This registers the new Sentry error service class so that when your application is ran, exceptions can now be captured by Sentry. To test it, run your application in development environment:

```
    ng serve
```

This displays our application below


![angular-errorhandler-sentry-img4](//images.ctfassets.net/1es3ne0caaid/3qs8XW0FulnRJ2v8AjDXl7/ef4253cecd9bb2af13f87acedb453456/angular-errorhandler-sentry-img4.png)

To trigger an exception click the button with try catch, once you do that it navigates to the error page. Now go to your sentry dashboard in your browser and you will see the error tracked in real time.


![angular-errorhandler-sentry-img5](//images.ctfassets.net/1es3ne0caaid/lQXc5ChpKnXL0YtGitjv5/1d2e0f59eb78621744bdd3af52edc572/angular-errorhandler-sentry-img5.png)

If you go ahead to click on the issue, Sentry provides you with a very extensive dashboard and great looking visualization of the error tracked. Most of the information reported about the user's browser include: the operating system, the type of error flagged, the console logged message, the IDE error message, the data on the browser where the error came from, the SDK version. You can spot the exact error code block and then resolve it, you can merge the resolution and many other fancy things you can do.


![angular-errorhandler-sentry-img6](//images.ctfassets.net/1es3ne0caaid/6IqnZNIN3NctRCnBCoTrYF/882d5d00a7fc8f2d106e4203840779d3/angular-errorhandler-sentry-img6.gif)

The Sentry documentation is very legible and straightforward and if you want more features you can easily lookup the docs. By default Sentry has a user crash report feedback modal form pop up for willing users to report the error for the developer to get access to more information to help fix it. 


![angular-errorhandler-sentry-img7](//images.ctfassets.net/1es3ne0caaid/61RzXMTraDJ5jITMtpwQVp/47ac77b518ee4d3fc9fb6ddc53f78dca/angular-errorhandler-sentry-img7.png)

You also get email alerts of these exceptions as they are caught, in real time too, this is a pretty amazing feature.

## Is my data safe?

This is next question any developer will ask. Sentry is safe and it shows how safe your data is by ensuring that it gives every single account (even free accounts) on its platform the following services:


- Two-factor authentication
- Single Sign On support
- Organization audit log
- Privacy Shield certified
- PII data scrubbing
- SSL encryption

You can get the complete code for this tutorial on [here on GitHub](https://github.com/viclotana/ng-sentry), you can also [learn more about Sentry Security here](https://sentry.io/security/).

## Conclusion

Sentry is a great option for developers who build out their applications to production phase and deploy to users. The docs are very extensive and the error reporting is top notch with everything you will need and in realtime. Have you considered using an error tracking service for your Angular application?

This tutorial series will introduce you to errors in Angular 7. In part three, learn about errors tracking in Angular 7 using the errorHandler class and Sentry, and how to track these errors in a remote tracking environment.

Introduction to error handling in Angular 7 - Part 3

Introduction to error handling in Angular 7: Part 3 - Sentry 

Learn about all the hooks available for use in your Angular workflow for building awesome applications.

## Angular

Angular is a TypeScript framework for building web applications, mobile or desktop with over 49,000 stars on GitHub. Maintained by the Angular team at Google and a host of community members and organizations, it combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop. It has a very useful CLI tool for beginners to easily get started, there is even a GUI client called [Console](https://angularconsole.com/).

## Prerequisites

To be able to follow through in this article's demonstration you should have:

- Node version 11.0 installed on your machine.
- Node Package Manager version 6.7 (usually ships with Node installation).
- [Angular CLI](https://cli.angular.io/) version 7.0
- The latest version of Angular (version 7)

```
    // run the command in a terminal
    ng version
```

Confirm that you are using version 8, and update to 8 if you are not.

- Download an Angular quick starter project [here](http://github.com/viclotana/ng_canvas) to follow through the demonstrations.
- Unzip the project and initialize the Node modules in your terminal with this command:

```
    npm install
```

Other things that will be nice-to-haves are:

- A working knowledge of the Angular framework at a beginner level.
- Familiarity with the Angular constructor will be a plus but not a requirement.


## Lifecycle hooks

Every Angular component goes through the process of creation, then Angular goes on to execute all the functions it was created to execute and then go to possible destruction, this is called the lifecycle of a component. Angular does this by creating the component, rendering it as well as creating and rendering all its children. Then Angular checks for changes in the data properties or in the DOM, and makes the appropriate updates and finally when it is done, destroys it then removes it from the DOM.

Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur. 

There are eight lifecycle hooks in Angular:

1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit()
7. ngAfterViewChecked()
8. ngonDestroy()


## New concept: content projection

This concept is very important and will help you to properly understand the four of the Angular lifecycle hooks: ngAfterContentInit(), ngAfterContentChecked(), ngAfterViewInit(), ngAfterViewChecked(). It will be briefly treated in this section. If you have a custom Angular component you are displaying in your template ```component.html``` file, you are allowed to have child elements inside your custom component. Here is a good example:

```html
    <select>
    <h2>Vote your favorite halloween party</h2>
    <option value="100">Vote APC</option>
    <option value="100">Vote PDP</option>
    <option value="100">Vote APGA</option>
    </select>
```

This is a select statement block for voting from a group of dumb party names to throw on Halloween. In Angular you can create your own custom element like the select statement like this:

```html
    <my-party-component>
    <h2>Vote your favorite party</h2>
    <option value="100">Vote APC</option>
    <option value="100">Vote PDP</option>
    <option value="100">Vote APGA</option>
    </my-party-component>
```

The problem that content projection solves is efficiency for working with child components. Using the above illustration, if you had in the CSS file two classes called pink and green that sets the background color of an element to pink or green. To apply the classes on the child component can look very cumbersome and with a lot of repetition.

```html
    <my-party-component>
    <h2>Vote your favorite party</h2>
    <option class="pink" value="100"><h3>Vote APC</h3></option>
    <option class="green" value="100"><span>Vote PDP</span></option>
    <option class="pink" value="100"><h3>Vote APC</h3></option>
    </my-party-component>
```

This can however be reduced to one line of code with content projection in the my-party-component definition:

```html
    <ng-content select="span"></ng-content>
    <ng-content select="h3"></ng-content>
```

## Lifecycle hooks explained

In this article you will be introduced to every one of them, why they were built and how they are used. After creating a component by calling its constructor, Angular calls the lifecycle hook methods in the following sequence at specific moments:

## ngOnChanges()

This is the very first lifecycle hook, it is called right after your class gets initialized and the component is created the ngOnChanges() is called. You might want to wonder why ngOnInit hook is not called first, but that is because Angular counts that very first class initialization as a data property change. So the hook that gets called once a data property change (like resetting values) occurs is ngOnChanges(). This hook is basically called after the constructor is called and any other time there is a property change inside your component.

Open up the starter project you downloaded in VS Code and open the `app.component.ts` file inside the app folder. It should look like this:

```typescript
    // src/app/app.component.ts
    import { Component } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    title = 'ngcanvas';
    }
```

To test out the ngOnChanges hook, copy in the code below inside this file:

```typescript
    // src/app/app.component.ts
    import { Component, OnChanges } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnChanges {
    ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
    }
    title = 'ngcanvas';
    constructor(){
    alert("1. on changes called");
    }
    }
```

Here we have brought in the ngOnChanges hook from Angular and have initialized it with an alert statement in the constructor. If you run the application, the alert will pop up before the component will be loaded.

## ngOnInit()

This is the second lifecycle hook called by Angular, it is called right after the very first ngOnChanges hook is called. It is only called once, it initializes the component, sets and displays component input properties. It is the most important lifecycle hook in Angular as it signals the activation of the created component. For the fact that this hook is called only once, it is therefore great for fetching data from external sources like servers and APIs.

To test this out, add the ngOnInit hook syntax to the class with the code below:

```typescript
    // src/app/app.component.ts
    import { Component, OnChanges, OnInit } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnChanges, OnInit {
    ngOnInit(): void {
    alert("2. on init is called");
    }
    ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
    }
    title = 'ngcanvas';
    constructor(){
    alert("1. on changes called");
    }
    }
```

You will see the alerts pop up in the right sequence as it is called, this will be true even if ngOnInit comes first from a top-down analysis.

## ngDoCheck()

This is the third Angular lifecycle hook that gets called on a component. It is called during every change detection run, Angular has an internal system that goes around the component processes every so often looking for changes that the compiler cannot detect on its own. This hook is called at every change detection run, usually after the ngOnInit hook is called.

To test this, copy in the code below into the `app.component.ts` file:

```typescript
    // src/app/app.component.ts
    import { Component, OnChanges, OnInit, DoCheck } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnChanges, OnInit, DoCheck {
    ngDoCheck(): void {
    alert("3. do check is called");
    }
    ngOnInit(): void {
    alert("2. on init is called");
    }
    ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
    }
    title = 'ngcanvas';
    constructor(){
    alert("1. on changes called");
    }
    }
```

You will see the alerts pop up in the right sequence here again, not minding the hierarchy of presentation.

## ngAfterContentInit()

This is the fourth lifecycle hook Angular calls after a component has been initialized. This hook is called only once immediately after the first ngDoCheck hook is called, it is a kind of ngDoCheck but for content projected into the component view with ng-content. You may refer to the brief content projection summary at the beginning of this post again.

At this point you must have noticed the amazing power of Angular with intellisense in VS Code to handle imports and also initialization of these hooks perfectly.

```typescript
    // src/app/app.component.ts
    import { Component, OnChanges, OnInit, DoCheck, AfterContentInit } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnChanges, OnInit, DoCheck, AfterContentInit {
    ngAfterContentInit(): void {
    alert("4. after content init called");
    }
    ngDoCheck(): void {
    alert("3. do check is called");
    }
    ngOnInit(): void {
    alert("2. on init is called");
    }
    ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
    }
    title = 'ngcanvas';
    constructor(){
    alert("1. on changes called");
    }
    }
```

## ngAfterContentChecked()

This is the fifth lifecycle hook Angular calls after a component has been initialized. It is called after the content projected into a component view is initialized, after the ngAfterContentInit hook and every subsequent ngDoCheck hook is called.

Exercise: To test this hook, follow the pattern in the previous hooks above and achieve create the alert for this. 


> If you get any error warnings on your app component, hover over it to get a quick fix preview you can use.


## ngAfterViewInit()

This is the sixth lifecycle hook Angular calls after a component has been initialized. It is called only once after the very first ngAfterContentChecked hook is called. It is called after Angular initializes component views and the subsequent child views under each component, this will have to include the views displayed through content projection too and that is why it is called after the ngAfterContentChecked hook.

Exercise: To test this hook, follow the pattern in the previous hooks above and achieve create the alert for this.

## ngAfterViewChecked()

This is the seventh lifecycle hook Angular calls after a component has been initialized. It is called after Angular checks the component views and the subsequent child views under each component for changes, this includes the views displayed through content projection too. It is called after the ngAfterViewInit hook and every subsequent ngAfterContentChecked hook.

Exercise: To test this hook, follow the pattern in the previous hooks above and achieve create the alert for this.

## ngOnDestroy()

This is the last Angular lifecycle hook, it is called just before the component is removed from the DOM. Inside it clean up of the component is done, from detaching event handlers to unsubscribing from observables.

Exercise: To test this hook, follow the pattern in the previous hooks above and achieve create the alert for this. You will also notice that ngOnDestroy hook is not called, that is because the DOM has not been removed, if you have an unsubscribe statement inside it for instance, it will get called.
Your final `app.component.ts` file should look like this:

```typescript
    // src/app/app.component.ts
    import { Component, OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnChanges, OnInit,
    DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit,
    AfterViewChecked, OnDestroy{
    ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
    }
    ngOnInit(): void {
    alert("2. on init is called");
    }
    ngDoCheck(): void {
    alert("3. do check is called");
    }
    ngAfterContentInit(): void {
    alert("4. after content init called");
    }
    ngAfterContentChecked(): void {
    alert("5. after content check called");
    }
    ngAfterViewInit(): void {
    alert('6. after view init called');
    }
    ngAfterViewChecked(): void {
    alert('7. after view init checked');
    }
    ngOnDestroy(): void {
    alert('8. on destroy called');
    }
    title = 'ngcanvas';
    constructor(){
    alert("1. on changes called");
    }
    }
```

The ideal behavior is for the ngDoCheck, ngAfterContentChecked and ngAfterViewChecked hooks to be called multiple times as changes occur so do not be surprised they get called more than once. 


## Conclusion

You have been introduced to the various lifecycle hooks in Angular, now you know the basics and the reason behind the hooks you have always used in your workflow. You also know about content projection and how it relates to Angular lifecycle hooks.Here is the [link to the complete project with all the hooks on GitHub](https://github.com/viclotana/ng-hooks). Happy hacking!

Angular is a TypeScript framework which empowers developers to build applications that live on the web, mobile, or the desktop. In this tutorial you will learn about all the hooks available for use in your Angular workflow for building awesome applications.


A guide to lifecycle hooks in Angular

In this tutorial, you will be introduced to HTTP errors in JavaScript, and how to use the `HttpClient` with RxJS error handling operators and finally how to use the `HttpInterceptor` 

![angular-error-handling-http-img1](//images.ctfassets.net/1es3ne0caaid/7JYFGKMlKOAwJQPINY193W/ec8e4bc1db6965765fad9924de9e7cb6/angular-error-handling-http-img1.jpeg)

This is a deep dive into HTTP error handling in Angular 7, you might want to check out the introductory post on error handling [here](https://pusher.com/tutorials/error-handling-angular-part-1).

## Prerequisites

To be able to follow through in this tutorial's demonstration you should have:

- Node version 11.0 installed on your machine.
- Node Package Manager version 6.7 (usually ships with Node installation).
- [Angular CLI](https://cli.angular.io/) version 7.0
- The latest version of Angular (version 7)

```
    // run the command in a terminal
    ng version
```

Confirm that you are using version 7, and update to 7 if you are not.
Other things that will be nice-to-haves are:


- A working knowledge of the Angular framework at a beginner level.
- Familiarity with Angular services will be a plus but not a requirement.

## Outsider errors

These are errors that we call server side errors because they mainly come from the outside the Angular application and an `HttpErrorResponse` is always returned anytime they occur. It has properties like:

- **Error name**: this states the name of the error.
- **Error message**: this tries to explain the error in simple terms for easier understanding.
- **Error status:** each type of server side error has a code assigned to it to differentiate it from the rest. These codes are usually three digit codes like 400 which, signifies the request sent was unexpected or 500 which, signals internal server error and so on.

## Error handler in Angular

Angular has a global error handling class called errorHandler that provides a hook for centralized exception handling inside your application. It basically intercepts all the errors that happen in your application, and logs all of them to the console, and stops the app from crashing.
The syntax looks like this:

```javascript
    class MyErrorHandler implements ErrorHandler {
      handleError(error) {
        // do something with the exception
      }
    }
    @NgModule({
      providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
    })
    class MyModule {}
```

This is a great way to handle errors in Angular, particularly the insider errors.

## The limitation of errorHandler

If you followed from the [introductory post here](https://pusher.com/tutorials/error-handling-angular-part-1), you will see how the Angular errorHandler class was the ultimate solution to centralizing the try/catch concept of errors in our application. However, when we want to focus on server side errors, we discover that the errorHandler class cannot work directly with HTTP requests in our application. Good news is Angular provides a kind of interface where you can use the concept of the errorHandler class to deal directly with HTTP requests.

## Solution 1: Angular HttpClient

The `[HttpClient](https://angular.io/api/common/http/HttpClient)` in `@angular/common/``[http](https://angular.io/api/common/http)` offers a simplified client HTTP API for Angular applications that rests on the `XMLHttpRequest` interface exposed by browsers. Additional benefits of `[HttpClient](https://angular.io/api/common/http/HttpClient)`include testability features, typed request and response objects, request and response interception, `Observable` APIs, and streamlined error handling. So using this client with some RxJS operators we can get a kind of try/catch way of error handling but this time directly communicating with the HTTP requests through an Angular application in a service. You will understand it better in action.

## Demo
![angular-error-handling-http-img2](//images.ctfassets.net/1es3ne0caaid/46JdAaUd6jzIrxH2olwXZK/6aafdc26662fca6a0e73b5333d130442/angular-error-handling-http-img2.gif)

This is a demo [jsonplaceholder](http://jsonplaceholder.typicode.com/) application where parts of the available data on the [jsonplaceholder](http://jsonplaceholder.typicode.com/) is displayed on the user interface, a perfect service to demonstrate server related concepts. If you have all the prerequisites stated at the beginning of the post ready, you can [download the project from GitHub here](https://github.com/viclotana/jsonplaceholder-demo-app). 
Unzip and open the project in VS Code and use the terminal to initialize the node modules:

```
    npm install
```

Now that your application is up and running, you have to first and foremost ensure that the module required for Angular applications to use any server service is active in your application. Navigate to your `app.module.ts` file and confirm that there is an import statement like this:

```javascript
    import { HttpClientModule } from '@angular/common/http';
```

Your application has four components: posts, sidebar, details and users. It also has a service called data service where all the HTTP requests are made. Your `data.service.ts` file should look like this:

```typescript
    // src/app/services/data.service.ts
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    @Injectable({
    providedIn: 'root'
    })
    export class DataService {
     constructor(private http: HttpClient) { }
     getUsers() {
      return this.http.get('https://jsonplaceholder.typicode.com/users')
     }
     getUser(userId) {
      return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId)
     }
     getPosts() {
      return this.http.get('https://jsonplaceholder.typicode.com/posts')
     }
    }
```

Three requests are being made to the server, now if you pick one of these requests, say `getUsers()` and you want to add error handling with the HttpClient then you will:

- Import the catchError object from RxJS operators.
- Import throwError from RxJS.
- Use the pipe method to introduce it in the desired HTTP request.
- Create a method to handle the error

If you follow these, your `data.service.ts` file will look like this:

```typescript
    // src/app/services/data.service.ts
    import { Injectable } from '@angular/core';
    import { HttpClient, HttpErrorResponse } from '@angular/common/http';
    import { catchError } from 'rxjs/operators'
    import { throwError } from 'rxjs';
    @Injectable({
    providedIn: 'root'
    })
    export class DataService {
    constructor(private http: HttpClient) { }
    getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/usssers')
    .pipe(
    catchError(this.handleError)
    );
    }
    getUser(userId) {
    return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId)
    }
    getPosts() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
    }
    handleError(error: HttpErrorResponse){
    console.log("lalalalalalalala");
    return throwError(error);
    }
    }
```

You will see that the get request was deliberately tampered with to ensure an error occurs. When you run the application, you will see the error logged with the log message we want. 


![angular-error-handling-http-img3](//images.ctfassets.net/1es3ne0caaid/5gGxmNLgjopNqYOgmCGQAy/f36dd4974ac212b1883b52c672bfdc9c/angular-error-handling-http-img3.png)

 Sometimes when you send a request to a well known slow server, you know it might take a while to get response or take a few tries to actually get response from the server, you can resend the request a number of times before throwing the error. 
This can be achieved with the retry method in RxJS, so you import the retry operator then you can use it inside the pipe like it is used below:

```typescript
    // src/app/services/data.service.ts
    import { Injectable } from '@angular/core';
    import { HttpClient, HttpErrorResponse } from '@angular/common/http';
    import { catchError, retry } from 'rxjs/operators'
    import { throwError } from 'rxjs';
    @Injectable({
    providedIn: 'root'
    })
    export class DataService {
    constructor(private http: HttpClient) { }
    getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/usssers')
    .pipe(
    retry(2),
    catchError(this.handleError)
    );
    }
    getUser(userId) {
    return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId)
    }
    getPosts() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
    }
    handleError(error: HttpErrorResponse){
    console.log("lalalalalalalala");
    return throwError(error);
    }
    }
```

If you run the application, the console should look like this:


![angular-error-handling-http-img4](//images.ctfassets.net/1es3ne0caaid/4p0QHIp6NxxhET1UmfW0jk/9f5fef5ca2b7916ca558441100e0eff9/angular-error-handling-http-img4.gif)

You see it first tries to get the response, then retries it twice just as we specified before throwing the error log message. 


> It is also very important that your retry comes before the catchError so that the error message is not logged after every trial.

This solution works perfectly so long as your application has one service and probably one get request, but when your application is big and has many services or a lot more requests per service it becomes an inefficient solution. This is because you have to always copy the handle error function across services and repeat code even within a service. Imagine the memory cost of debugging and maintaining the codebase.

## The best option: Angular HttpInterceptor

Just like the name says, Angular provides an interface called the `HttpInterceptor` that can intercept `[HttpRequest](https://angular.io/api/common/http/HttpRequest)` and `[HttpResponse](https://angular.io/api/common/http/HttpResponse)` and creates a platform to handle them. This means we get direct access to our server requests, what better place to deal with server errors than here!
The syntax looks like this:

```javascript
    interface HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler):   Observable<HttpEvent<any>>
    }
```

To use the `HttpInterceptor` , create a new service where you want your interceptor logic to go in with the Angular CLI:

```
    ng generate service services/interceptor
```

Now you have generated an interceptor service, navigate to your `app.module.ts` file to register it accordingly, like this:

```typescript
    // src/app/app.module.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { UsersComponent } from './components/users/users.component';
    import { DetailsComponent } from './components/details/details.component';
    import { PostsComponent } from './components/posts/posts.component';
    import { SidebarComponent } from './components/sidebar/sidebar.component';
    import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
    import { InterceptorService } from './services/interceptor.service';
    @NgModule({
    declarations: [
    AppComponent,
    SidebarComponent,
    PostsComponent,
    DetailsComponent,
    UsersComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule
    ],
    providers: [
    {
    provide: HTTP_INTERCEPTORS,
    useClass: InterceptorService,
    multi: true
    }
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
```

Next step is to get rid of all the error handling logic in the `data.service.ts` file, the file should look like this when you are done:

```typescript
    // src/app/services/data.service.ts
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    @Injectable({
    providedIn: 'root'
    })
    export class DataService {
    constructor(private http: HttpClient) { }
    getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/usersss')
    }
    getUser(userId) {
    return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId)
    }
    getPosts() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
    }
    }
```

Copy the code below into the `interceptor.service.ts` file:

```typescript
    // src/app/services/interceptor.service.ts
    import { Injectable } from '@angular/core';
    import {
    HttpInterceptor, HttpRequest,
    HttpHandler, HttpEvent, HttpErrorResponse
    } from '@angular/common/http';
    import { Observable, throwError } from 'rxjs';
    import { catchError } from 'rxjs/operators';
    @Injectable({
    providedIn: 'root'
    })
    export class InterceptorService implements HttpInterceptor{
     constructor() { }
     handleError(error: HttpErrorResponse){
      console.log("lalalalalalalala");
      return throwError(error);
     }
    intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>>{
     return next.handle(req)
     .pipe(
      catchError(this.handleError)
     )
     };
    }
```

If you run the application, you can see that it logs our error message and throws the error just as we expect. This is the best method of handling server errors in your Angular project. You can test all the three requests at once for errors by tampering with them. When you do, you will find out that the interceptor catches all of them and logs our message for each, it is really amazing to watch.

## Conclusion

You have been introduced to various ways to handle server side errors in your Angular applications. You have also seen when to use and when not to use the `HttpClient` with the RxJS operators and how the best way is using interceptors. In the [next tutorial](https://pusher.com/tutorials/error-handling-angular-part-3) in this series, you will be introduced to error tracking. The complete code for this tutorial is on GitHub and can be [found here](https://github.com/viclotana/ng_HTTP). Happy coding!

This tutorial series will introduce you to errors in JavaScript. In part two, learn about HTTP errors, how to use the `HttpClient` with RxJS error handling operators, and how to use interceptors. 

Introduction to error handling in Angular 7 - Part 2

Introduction to error handling in Angular 7: Part 2 - HTTP error handling

Suragch

This tutorial will help you understand what each part of the Beams API does in a client Android app. You will go you through code examples to explore what each method does, and an Android project with pointers for how to set the demo up and how to send push notifications to test it.

Pusher Beams client API demo for Android

Beams

In this tutorial, you will be introduced to errors in JavaScript, the try-catch concept and how it is used and a little introduction to handling internal errors with the Angular errorHandler.

![angular-errorhandler-javascript-img1](//images.ctfassets.net/1es3ne0caaid/5kTaLTwUl9i27ciBHr2CKR/d70a36ff76eb3068ca511a80831364c4/angular-errorhandler-javascript-img1.jpeg)

## Errors

One of my favorite movie stars, Samuel L. Jackson, was the very first person I heard the phrase "to err is human" from, and although I cannot remember the title of the particular movie now you can agree with me that the same thing happens with errors when writing code. As an Angular developer, you already know errors can be caused by personal mistakes, like having an import statement with the file extension name in Angular 7 and it shows up in your browser if you fail to catch it.

```
    import { DataService } from 'src/app/services/data.service.ts';
```

Errors can arise from lack of testing, server communications, or even ambiguity of the Angular project you are working on. We are human beings and so are prone to errors, that is one reason a good editor like VS Code will always draw squeaky lines when you start derailing.

## Prerequisites

To be able to follow through in this article's demonstration you should have:

- Node version 11.0 installed on your machine.
- Node Package Manager version 6.7 (usually ships with Node installation).
- [Angular CLI](https://cli.angular.io/) version 7.0
- The latest version of Angular (version 7)

```
    // run the command in a terminal
    ng version
```

Confirm that you are using version 7, and update to 7 if you are not.
Other things that will be nice-to-haves are:

- A working knowledge of the Angular framework at a beginner level.
- Familiarity with Angular services will be a plus but not a requirement.

## Types of errors

There are many types of errors but I will be grouping them in two main categories: insider and outsider errors.

- **Insider errors:** (also known as client side errors) These are the ones you can be held responsible for, the syntax errors, package manager errors, reference errors, type errors and all types of client side errors that can be fixed by the developer within the Angular application. 
- **Outsider errors:** (also known as server side errors) These ones can span from server errors, which mostly come with three digit status codes like 500 to internet network errors, to even browser specific errors. These are basically errors that are out of the reach of the Angular application hence the name outsider.

This article will focus on the insider errors and then a subsequent article will focus on the outsider errors.

## Baby steps: throw and catch!

When you run a function in JavaScript, that function joins a kind of function execution queue and as the application runs and gets to its turn it leaves the queue and gets executed. So, if an error occurs, JavaScript throws an exception, which will immediately remove all the operations in the queue until the exception is handled. 
On a basic level, exceptions are handled with try/catch blocks, the whole application crashes if the compiler does not see this try/catch block. 
The try/catch syntax looks like this:

```javascript
    try {
     throw new Error('An error occurred');
    }
    catch (error) {
     console.error('Here is the error message', error);
    }
    console.log('Execution continues');
```

You will see the usefulness in a little demonstration. Create a new Angular project with the CLI, call it  `ngapp`

```
    ng new ngapp
```

Accept the router settings and choose plain CSS as the style sheet. Go to the `app.component.ts` file and copy in the code below:

```typescript
    // src/app/app.component.ts
    import { Component } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    normalError() {
     const babies = foo;
     console.log("This is normal error without a try catch");
     }
    }
```

Copy these into the `app.component.html`

```html
    
    <button (click)="normalError()">
     Fire Normal Error
    </button>
```

Then copy these basic styling into the `app.component.css`
```css
    // src/app/app.component.css
    button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    }
```

Run the application in development like this:

```
    ng serve
```

In some cases it will fail to compile, when this happens re-run it and it will compile.

![angular-errorhandler-javascript-img2](//images.ctfassets.net/1es3ne0caaid/fMFAgkZb8ThyXLPAMiOBE/995bcfcedc9db7f979796fdd1c956192/angular-errorhandler-javascript-img2.gif)

This shows in the console and most of the time, breaks the entire application immediately as you can see the message we logged did not show. The try/catch block handles these exceptions gracefully and the application continues running. So, if you had another button with a try catch block this time, you can spot the difference. Copy this in the `app.component.html file` :

```html
    
    <button (click)="normalError()">
    Fire Normal Error
    </button>
    <br>
    <button (click)="errorWithCatch()">
    Fire Error With Try Catch
    </button>
```

Copy the code below in the `app.component.ts` file:

```typescript
    // src/app/app.component.ts
    import { Component } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    normalError() {
    const babies = foo;
    console.log("This is normal error without a try catch");
    }
    errorWithCatch() {
    try {
    const babies = foo;
    } catch (error) {
    console.log(' — Error is handled gracefully: ', error.name);
    }
    console.log(' — Execution continues without app breaking');
    }
    }
```

The code in bold shows the same reference error instance, but this time around it is wrapped in a try-catch block so it can be handled gracefully. When you run the app again, it should look like this:

![angular-errorhandler-javascript-img3](//images.ctfassets.net/1es3ne0caaid/6c3x7B8SDVuNtLoJ9gZO9d/2b561f215b8ca081fdcb36e30abb872b/angular-errorhandler-javascript-img3.gif)

## Limitations of try/catch

As great as try/catch is, thinking about the application you already see how it is not sustainable. This is because you can not go about adding these try/catch blocks in every function in your application, that is not resource effective. The good news is, Angular has a kind of global try/catch that we can use in one centralized location to catch all exceptions.

## Error handler

Angular has a global error handling class called errorHandler that provides a hook for centralized exception handling inside your application. It basically intercepts all the errors that happen in your application, and logs all of them to the console, and stops the app from crashing (this was why your first button did not crash the app).
The syntax looks like this:

```javascript
    class MyErrorHandler implements ErrorHandler {
      handleError(error) {
        // do something with the exception
      }
    }
    
    @NgModule({
      providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
    })
    class MyModule {}
```

This lets us modify the default behaviour of logging errors to the console to our own logic after we have added it to our providers list in our app module. Go to the the `app.component.ts` file and copy the code below in it:

```typescript
    // src/app/app.component.ts
    import { Component } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
     normalError() {
      const babies = foo;
    }
    errorWithCatch() {
     const babies = foo;
     }
    }
```

The try catch block has been removed, so you should have two squeaky lines (or problems) in your code editor signifying two reference errors. Now to test the Angular global error handler, navigate to the `app.module.ts` file and copy the code below:

```typescript
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, ErrorHandler } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    export class MyErrorHandler implements ErrorHandler {
     constructor() {}
     handleError(error: Error) {
      if (Error) {
       console.log("hi");
      }
      else console.log("hello");
      }
     }
    @NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule
    ],
    providers: [
     {
      provide: ErrorHandler,
      useClass: MyErrorHandler,
     },
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
```

The changes made just like the syntax suggests we created a global error handler class that implements the Angular error handler and then registered it in the provider section.
Our logic simply checks for errors and logs a message for any errors found. If you save this and run the application you will see the texts logged in the console for every error and the application working just like it was a try-catch. 

## Error service

Now you can see all our error logic is inside the core app module, this is not the way Angular encourages us to write code. So in line with keeping everything modular, we use a service. you will call it error service and all the logic on how to handle your errors will be kept in it. 
First of all, generate an Angular service with the CLI:

```
    ng generate service error
```
or
```
    ng g s error
```

Then you have to remove the error handler logic in your `app.module.ts` file so that it will look like this:

```typescript
    // src/app/app.component.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, ErrorHandler } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { ErrorService } from './error.service';
    import { ErrorComponent } from './error/error.component';
    @NgModule({
    declarations: [
    AppComponent,
    ErrorComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule
    ],
    providers: [
     {
      provide: ErrorHandler,
      useClass: ErrorService,
     },
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
```

After that use the CLI to generate an error component where the user can be redirected to if an error occurs.

```
    ng g c error
```

Now you have the error component you do no not need to modify it, navigate to the `error.service.ts` file and copy the code below in it:

```typescript
    // src/app/error.service.ts
    import { Injectable, ErrorHandler, Injector } from '@angular/core';
    import { Router } from '@angular/router';
    import { HttpErrorResponse } from '@angular/common/http'
    @Injectable({
    providedIn: 'root'
    })
    export class ErrorService implements ErrorHandler{
     constructor(private injector: Injector) { }
     handleError(error: any) {
      const router = this.injector.get(Router);
      if (Error instanceof HttpErrorResponse) {
       console.log(error.status);
      }
      else {
       console.error("an error occurred here broo");
      }
      router.navigate(['error']);
      }
    }
```

Here the logic is modified a bit to first check the kind of error it is, if it is an insider error then it navigates the user to an error page as the error occurs. So make sure your `app-routing.module.ts` file is updated with the route like this:

```typescript
    // src/app/app-routing.module.ts
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { ErrorComponent } from './error/error.component';
    const routes: Routes = [
    { path: 'error', component: ErrorComponent}
    ];
    @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
    })
    export class AppRoutingModule { }
```

Finally, your `app.component.html` file should look like this:

```html
    <div>
    <button (click)="normalError()">
    Fire Normal Error
    </button>
    <br>
    <button (click)="errorWithCatch()">
    Fire Error With Try Catch
    </button>
    </div>
    <router-outlet></router-outlet>
```

If you followed the post to this point, you can run the application in development again, your errors will be gracefully handled as expected. 

## Conclusion

You have been introduced to errors and the concept behind handling them in Angular with the errorHandler class with focus on client side JavaScript errors. The [next tutorial](https://pusher.com/tutorials/error-handling-angular-part-2) will go deep into outsider errors, the HTTP interceptors and error tracking with a remote service building on all the concepts you have learnt in this post. The complete code for this tutorial is on GitHub and can be [found here.](https://github.com/viclotana/ng_errors)

This tutorial series will introduce you to errors in JavaScript and the try-catch concept. In part one, learn how the concept is used, and how to handle internal errors in Angular with the Angular errorHandler, with a focus on client side JavaScript errors.

Introduction to error handling in Angular 7 - Part 1

Introduction to error handling in Angular 7: Part 1 - Angular errorHandler

Oreoluwa Ogundipe

Through the series, our GraphQL and event server have been accessible via `localhost`. Since we have been viewing the application on our local browser, the browser can access the localhost without any issues. These servers need to be accessible on a public URL so that the mobile device can connect to them.


## Prerequisites
- You should have followed through the earlier parts of the series.
- Basic knowledge of JavaScript.
- [Node](http://www.nodejs.org) installed on your machine (v10.13.0)
- [Node Package Manager](https://www.npmjs.com/) installed on your machine (v 6.4.1)
- [Cordova](https://cordova.apache.org/) installed on your machine (v 8.1.2)
- Docker installed on your machine. (version 18.09.2) Download [here](https://www.docker.com/community-edition).


## Using localhost.run to share your localhost

To share your localhost on a public URL, let’s use [localhost.run](https://localhost.run). There are no downloads required to use this service. Just open your terminal and paste a code:

```
    ssh -R 80:localhost:<PORT_YOU_WANT_TO_SHARE> ssh.localhost.run
```

> Remember to replace `PORT_YOU_WANT_TO_SHARE` with the actual port on the local server your application is running on.


## Making the GraphQL server publicly accessible

Now, your GraphQL server was accessible on port 4466 of your local machine, go ahead and then run this in the terminal:

```
    ssh -R 80:localhost:4466 ssh.localhost.run
```

> Ensure that the GraphQL server is running by checking docker on your machine

This command returns a URL as a response. Go ahead and then paste the URL in your `app.module.ts` as the link to your GraphQL server:

```typescript
    // src/app/app.module.ts
    
    // [...] 
    
    export class AppModule {
      constructor(apollo: Apollo, httpLink: HttpLink) {
        apollo.create({
          link: httpLink.create({ uri: 'LINK_TO_PUBLICLY_ACCESIBLE_URL' }), // uri specifies the endpoint for our graphql server
          cache: new InMemoryCache()
        })
      }
    }
```    


## Making the event server publicly accessible

Earlier in the series, we created the event server and served it on port 3128 of the localhost. To make it public accessible too, run this command:

```
    ssh -R 80:localhost:3128 ssh.localhost.run
```

> Ensure that the event server is still running. If it isn’t running, navigate to the `server/` of the project and run `node server.js`

You will be provided with a publicly accessible URL for the event server. Now, let’s update the places where requests were made to the event server in the code.

First, update the `uploadPost` method in the `CreatePost` page:

```typescript
    // src/pages/create-post/create-post.ts
    
    // [...]
    
    export class CreatePostPage {
      // [...]
    
      public uploadPost() {
        this.apollo.mutate({
          mutation: createUserPost,
          variables: {
            image_url: this.image_url,
            description: this.description,
            likes: 10,
            postedAt: this.posted_at,
            user: { "connect": { "id": this.user_id } }
          }
        }).subscribe((data) => {
          console.log('uploaded successfuly');
          // after sucessful upload, trigger pusher event
          let post_response: any = data;
          this.http.post('LINK_TO_PUBLICLY_ACCESSIBLE_URL/trigger-post-event', post_response.data.createPost)
            .subscribe(() => {
              this.showAlert('Post Shared', 'Your post has been shared with other users');
              this.navCtrl.push(HomePage);
            });
        }, (error) => {
          this.showAlert('Error', 'There was an error sharing your post, please retry');
          console.log('there was an error sending :the query', error);
        })
      }
    
      // [...]
    }
```

Also, go ahead to update the `postComment` method in the `CommentPage`:

```typescript
    // src/pages/comment/comment.ts
    
    // [...]
    
    export class CommentPage {
      // [...]
    
      public postComment() {
        this.apollo.mutate({
          mutation: makeComment,
          variables: {
            message: this.user_comment,
            postedAt: (new Date()).toISOString(),
            user: { connect: { id: "YOUR_USER_ID_FROM_GRAPHQL_SERVER" } },
            post: { connect: { id: this.post_id } }
          }
        }).subscribe((data) => {
          let post_response: any = data;
          // after successful upload, trigger new comment event
          this.http.post('LINK_TO_PUBLICLY_ACCESSIBLE_URL/trigger-comment-event', post_response.data.createComment)
            .subscribe(() => {
              this.showAlert('Success', 'Comment posted successfully');
            });
        }, (error) => {
          this.showAlert('Error', 'Error posting comment');
        });
      }
    
      // [...]
    }
```

Now that this is all done, we can access both the GraphQL server and event server anywhere the code is run.

Now, navigate to the root directory of your project and run your application:

```
    ionic serve -c
```

## Using the IonicDevApp

To test the application on your mobile device, download the [IonicDevApp](https://ionicframework.com/docs/pro/devapp/) on your mobile device. Ensure that your device and computer are on the same network and you should see this demo application listed there:


![instagram-clone-ionic-testing-img1](//images.ctfassets.net/1es3ne0caaid/4lxO3Esb7emGocD27lhtHh/1e6d9a96e8ea8fe1fd802025de0d711b/instagram-clone-ionic-testing-img1.png)

Now, testing with the device, we get the following:


![instagram-clone-ionic-testing-img2](//images.ctfassets.net/1es3ne0caaid/2Uhn25upplCXU6iqyfadGh/92b3d3b1fd292f82349c25bce0023faa/instagram-clone-ionic-testing-img2.png)
![instagram-clone-ionic-testing-img3](//images.ctfassets.net/1es3ne0caaid/6gYK4Js7v0ntF3UXwhaxnO/caf9582f605168f8cb54e474a3e280e3/instagram-clone-ionic-testing-img3.png)



![instagram-clone-ionic-testing-img4](//images.ctfassets.net/1es3ne0caaid/36egj1E86rMXIeLUUCjhKR/6b8f5656c0e7dcbf2955ae4b07649ddf/instagram-clone-ionic-testing-img4.png)
![instagram-clone-ionic-testing-img5](//images.ctfassets.net/1es3ne0caaid/1wh9dpUDH4P7aI8UsyEJpq/3f8416656595940fb1b6cefd0af4121d/instagram-clone-ionic-testing-img5.png)


![instagram-clone-ionic-testing-img6](//images.ctfassets.net/1es3ne0caaid/36bEcaL8xNWD7uqYYn8mvl/bcda487222cf8b454f33ad01f5509d2f/instagram-clone-ionic-testing-img6.gif)


Head over [here](https://ionicframework.com/docs/v3/intro/deploying/) for more information on how to deploy to target devices.


## Conclusion

In this four-part series, we walked through building a simple Instagram clone with Ionic. In the [first part](https://pusher.com/tutorials/instagram-clone-ionic-part-1) of the series, we looked at how to build the interface of the application. In the [second part](https://pusher.com/tutorials/instagram-clone-ionic-part-2), we went through an introduction to GraphQL and how to fetch data dynamically in the application. The [third part](https://pusher.com/tutorials/instagram-clone-ionic-part-3) of the series walked through uploading posts and comments from the application using [Cloudinary](https://cloudinary.com) and Pusher to enable realtime functionality. Finally, in this part of the series, we looked at steps to making your servers publicly accessible so we could test the application on mobile devices.

Feel free to use the concepts learned in this series when you’re building your own applications. Here’s a link to the full [GitHub](https://github.com/oreHGA/ionic-insta-clone) repository.

This four part series will walk you through building a simple Instagram clone with Ionic, and adding realtime functionalities. In this fourth and final part, make your servers publicly accessible so you could test the application on mobile devices.

Build an Instagram clone with Ionic - Part 4

Channels

Build an Instagram clone with Ionic: Part 4 - Testing your Ionic application on mobile devices

This four part series will walk you through building a simple Instagram clone with Ionic, and adding realtime functionalities. In part three, create functionality that enables you to feed data into the data store of the application using GraphQL mutations and allowing users to see posts and comments in realtime.

This four part series will walk you through building a simple Instagram clone with Ionic and adding realtime functionalities. In part three, create functionality that enables you to feed data into the application with GraphQL mutations and allowing users to see realtime posts and comments.

Build an Instagram clone with Ionic - Part 3

Build an Instagram clone with Ionic: Part 3 - Adding data dynamically and enabling realtime functionality

This four part series will walk you through building a simple Instagram clone with Ionic, and adding realtime functionalities. In part two, create the backend server for the clone application that will serve data to the application.

24 articles for “HTML”

Introduction to error handling in Angular 7: Part 4 - Rollbar

Introduction to error handling in Angular 7: Part 3 - Sentry

A guide to lifecycle hooks in Angular

Introduction to error handling in Angular 7: Part 2 - HTTP error handling

Pusher Beams client API demo for Android

Introduction to error handling in Angular 7: Part 1 - Angular errorHandler

Build an Instagram clone with Ionic: Part 4 - Testing your Ionic application on mobile devices

Build an Instagram clone with Ionic: Part 3 - Adding data dynamically and enabling realtime functionality

Build an Instagram clone with Ionic: Part 2 - Connecting to GraphQL servers using Apollo client

Products

Developers

Company

Connect

.css-9n8ihs{color:#5c29db;}24 articles for “HTML”

Introduction to error handling in Angular 7: Part 4 - Rollbar

Introduction to error handling in Angular 7: Part 3 - Sentry

A guide to lifecycle hooks in Angular

Introduction to error handling in Angular 7: Part 2 - HTTP error handling

Pusher Beams client API demo for Android

Introduction to error handling in Angular 7: Part 1 - Angular errorHandler

Build an Instagram clone with Ionic: Part 4 - Testing your Ionic application on mobile devices

Build an Instagram clone with Ionic: Part 3 - Adding data dynamically and enabling realtime functionality

Build an Instagram clone with Ionic: Part 2 - Connecting to GraphQL servers using Apollo client

Products

Developers

Company

Connect

24 articles for “HTML”