Wern Ancheta

In this tutorial, create a web app for monitoring the status of your servers in realtime using Laravel.  The app will offer realtime monitoring of disk, CPU and memory. You can also add custom notifications and have the server send you a text message when the CPU usage goes above a set threshold.

Creating a server health monitoring app with Laravel

Channels

Neo Ighodaro

## Introduction

In [the previous part](https://pusher.com/tutorials/spotify-currently-playing-ios-part-1), we started by creating the API that will power the client applications. In this part, we will be adding realtime functionality to a prebuilt iOS client application. This will be a simple music player that will play songs and broadcast the current song, device, and the track position.


![spotify-currently-playing-player-img1](//images.ctfassets.net/1es3ne0caaid/7AZ9cDaNjCnzQ2UPGUdfrH/ce5d00054d5848bbce82021b1bc2cf8b/spotify-currently-playing-player-img1.gif)

This will make it easy to switch listening between clients just like Spotify does with its music clients. Let’s get started.


## Prerequisites

To follow along in this part, you must have the following requirements:

- Completed the [first part](https://pusher.com/tutorials/spotify-currently-playing-ios-part-1) of the series
- Have Xcode 10.x installed on your machine
- Have CocoaPods installed on your machine
- Knowledge of the Xcode IDE 

If you have the requirements then let’s get started.


## Setting up your project

Clone the project from [GitHub](https://github.com/neoighodaro/spotify-like-currently-playing-realtime). The iOS application is in the `iOS-*` directory in the repository. One is the completed project and the other is the music player without realtime features (`iOS_Base`). You can use the one without realtime to follow along and the other for reference.

Now that you have the project, open the `.xcworkspace` file in Xcode. Here’s a quick explanation of the project.

There is a `Podfile` in the root of the project. This file is used to define the dependencies of the application. To update or install the dependencies, close Xcode and run the following commands:

```
    $ pod install
```

Note that sometimes you may need to clear your cache to get the latest version of your dependencies. If this happens, just run the following commands below:

```
    $ pod cache clean --all
    $ pod repo update
    $ pod install
```

When your installation is complete, reopen the project using the `Spot.xcworkspace` file in the root of your project.

In the project, there is a `Main.storyboard` file that defines the scenes of the application, here is what it looks like:

![spotify-currently-playing-player-img2](//images.ctfassets.net/1es3ne0caaid/6C09CIHHOQ0xNB6cpMTvpH/f194b2f5a7fd8b1c3f8c2b13023a40eb/spotify-currently-playing-player-img2.png)

The first is the home screen with a button to enter the application. The second scene is a navigation controller that has the third scene defined as the root controller. The root controller in the third scene just displays the tracks available. The final scene displays the currently playing track.

In the project, we have a `Song` struct which is just a struct that we will use to store the song details when we fetch them from the API we built in the first part of the article. The struct looks like this:

```javascript
    import Foundation
    
    struct Song: Codable {
        let id: Int
        let title: String
        let cover: String
        let duration: Int
        let artist: String
        var isPlaying: Bool? = false
    }
```

Next, we have the `PlaylistTableViewController`. This class is responsible for fetching the tracks list, playing the selected track, keeping a song seconds elapsed timer. In the same file, we also defined a small `Duration` class that we will use for the elapsed timer.

The `TrackViewController` is responsible for the view displaying the currently playing track. It displays the time elapsed and also has a few controls but only the **Play/Pause** button works to keep the tutorial focused.

In the assets, we have the stock mp3 file, which we got from [bensounds.com](https://www.bensound.com/). We also have a placeholder cover image. If you build and run the application in a simulator, you should have the music player but without any realtime features and it also plays the mp3 file.


![spotify-currently-playing-player-img3](//images.ctfassets.net/1es3ne0caaid/5xbHO3fCwfTo6hHBcAaHFh/b49a9624dc672e6a5f548ab92ce612da/spotify-currently-playing-player-img3.gif)



## Adding some extra features to the application

Now that we have the application running, let’s connect it to our backend API and add some extra features to the application. 

To get started, make sure your Node.js application is still running in the background. To start the Node.js server, `cd` to the root of the Node.js application and run the following command:

```
    $ node index.js
```

When the server is running, we can begin.

The first thing we want to do is load the tracks list from the server. We will just use this so we can have multiple listed on the main page instead of the one. Note though that the sound we will play will always be the same.

Before we do anything, open your project’s `info.plist` and make sure the setting to **Allow Arbitrary Loads** is set to **YES.**


![spotify-currently-playing-player-img4](//images.ctfassets.net/1es3ne0caaid/1gPWOIxdNUhgRNzQOk2h2w/6b22bab83db83ab09f1d345fed325a8d/spotify-currently-playing-player-img4.png)


Next, open the `PlaylistTableViewController` class and at the top, import the `Alamofire` library:

```swift
    // File: PlaylistTableViewController.swift
    // [...]
    
    import Alamofire
```

Then, replace the contents of the `populateTracks` method with the following code:

```swift
    // File: PlaylistTableViewController.swift
    // [...]
    
    fileprivate func populateTracks() {
        Alamofire.request("http://localhost:3000/tracks").validate().responseData { res in
            guard res.result.isSuccess, let responseData = res.data else { 
              return print("Failed to fetch data from the server") 
            }
    
            let decoder = JSONDecoder()
            self.tracks = try! decoder.decode([Song].self, from: responseData)
            self.tableView.reloadData()
        }
    }
```

Also, go to the `tickTimer` method and replace the contents with the following code:

```swift
    // File: PlaylistTableViewController.swift
    // [...]
    
    @objc fileprivate func tickTimer() {
        if Duration.instance.freeze {
            return
        }
    
        Duration.instance.count += 1
        
        if Duration.instance.count > 1000 {
            killTimer()
        }
        
        else if (playingDevice == deviceName) {
            let params: Parameters = [
                "device": deviceName,
                "id": currentlyPlaying?.id ?? 0,
                "position": Duration.instance.count,
            ]
    
            Alamofire.request("http://localhost:3000/tick", method: .post, parameters: params)
                .validate()
                .responseData { _ in }
        }
    }
```

The code above makes sure that the tracks are loaded from the Node.js server instead of the hardcoded implementation we had previously.

Next, let’s add a simple indication to each track name to know which is currently playing from the list view. In the same `PlaylistTableViewController` class, find and replace the following code as seen below:

```swift
    // Replace:
    cell.textLabel?.text = "🎶 \(track.title) - \(track.artist)"
    
    // With:
    let isPlaying = track.isPlaying ?? false
    cell.textLabel?.text = "\(isPlaying ? "🎶" : "") \(track.title) - \(track.artist)"
```

Then in the `tableView(``*_*` `tableView:, didSelectRowAt indexPath:)` method, find and replace the method with the following:

```swift
    // File: PlaylistTableViewController.swift
    // [...]
    
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        startTimer()
        
        if lastPlayed == nil {
            lastPlayed = tracks[indexPath.row]
        }
        
        if sound.playing == false || currentlyPlaying == nil || currentlyPlaying?.id != lastPlayed?.id {
            if let index = tracks.firstIndex(where: { $0.id == currentlyPlaying?.id }) {
                tracks[index].isPlaying = false
            }
    
            tracks[indexPath.row].isPlaying = true
            self.tableView.reloadData()
            
            lastPlayed = currentlyPlaying
            currentlyPlaying = tracks[indexPath.row]
            
            if playingDevice == nil || playingDevice == deviceName {
                playingDevice = deviceName
                playSound()
                resetTimer()
            }
            
            if timerStarted == false {
                timer?.fire()
                timerStarted = true
            }
        }
    }
```

That should do the trick. Now let’s start adding realtime features.


## Adding realtime features to the application

The first thing we want to do is connect the application to Pusher Channels. To do this, open the `PlaylistTableViewController` file and in the `viewDidLoad` method, add the following code:

```swift
    // File: PlaylistTableViewController.swift
    // [...]
    
    func viewDidLoad() {
      // [...]
      
      pusherConnect()
    }
```

Then add the following property and methods to the class as shown below:

```swift
    // File: PlaylistTableViewController.swift
    // [...]
    
    var pusher: Pusher!
    
    fileprivate func pusherConnect() {
        pusher = Pusher(key: "PUSHER_KEY", options: PusherClientOptions(
            host: .cluster("PUSHER_CLUSTER")
        ))
        pusher.connect()
        
        let channel = pusher.subscribe("spotmusic")
        
        let _ = channel.bind(eventName: "tick") { [unowned self] data in
            if let data = data as? [String: Any] {
                self.handleTickEvent(data: data)
            }
        }
    }
    
    fileprivate func handleTickEvent(data: [String: Any]) {
        guard let device = data["device"] as? String, device != deviceName else {
            playingDevice = deviceName
            return
        }
        
        guard let position = data["position"] as? Int else { return }
        
        if playingDevice == deviceName {
            killTimer()
        }
        
        playingDevice = device
        
        setTimer(count: position)
        startTimer()
        pauseSound()
    }
```

> Replace the `PUSHER_*` placeholders with the values in your Pusher dashboard.

We are using a device name so we can know where the event is fired from. We don’t want an event fired from the same device to be handled by the same device.

At the top of the class, import the `PusherSwift` library:

```swift
    // File: PlaylistTableViewController.swift
    // [...]
    
    import PusherSwift
```

One last thing we need to make sure we do is ping the main server to update the `tick` event. We will use this to broadcast the position of the currently playing track at all times the track is playing.

**Track Controller**
There is another controller called the `TrackViewController`, which displays the song details when a song is tapped. We do not need to make any changes to this file but it could come in handy if you need to make some improvements to the application.

Great. Now let’s test our application.


## Testing your application

Make sure the Node server is running in the background. You can run the server by running the command below in the root of the API project:

```
    $ node index.js
```

Now, build your music application and run it . You should notice no major difference from how it was but if you log into your Pusher dashboard and look at the **Debug Console** for your application, you will notice there will be an event fired for every second the song plays.


![spotify-currently-playing-player-img5](//images.ctfassets.net/1es3ne0caaid/2G2hrPiZKwvt9HcfJuJaeo/df3770238bfb0bfb59d684f3f7eab48c/spotify-currently-playing-player-img5.gif)


Now that we have the ticker, let’s build another application that listens for these changes and displays it in realtime. 

## Conclusion

In this part of the tutorial, we have learned how we can use realtime features to enhance our music player. In the next part, we will consume this information from another player.

The source code is available on [GitHub](https://github.com/neoighodaro/spotify-like-currently-playing-realtime).

When using music streaming services like Spotify, you can see realtime technology in action when you are using multiple devices. On the other devices, you can see how much playtime has elapsed. This three-part tutorial series looks at how to integrate this feature into your application. In the second part, add realtime functionality to a prebuilt iOS client application.

When using music streaming services like Spotify, you can see realtime technology in action when you are using multiple devices. In the second part of this tutorial series on how to integrate this feature into your application, add realtime functionality to a prebuilt iOS client application.

Build a Spotify-like currently playing feature - Part 2

Building a Spotify-like currently playing feature: Part 2 - Building the iOS player

## Introduction

When using music streaming services like Spotify, you can see realtime technology in action when you are using multiple devices. On the other devices, you can see how much playtime has elapsed.

In this series, we will take a look at how you can integrate this feature into your application with minimal fuss. We will be building a web API, a web app, and an iOS application. Both apps will consume the API we built.


![spotify-currently-playing-API-img1](//images.ctfassets.net/1es3ne0caaid/5c40g0HYWdT9vg9kcInhf2/467a5c2254947a427a86b52d214eddfe/spotify-currently-playing-API-img1.gif)


## Prerequisites 

To follow along in this part of the series, you must have the following requirements:

- Node.js (any LTS version) and NPM installed locally on your machine. Install [here](https://nodejs.org/en/download/).
- Basic knowledge of JavaScript.
- Basic knowledge of the command-line interface.


## Setting up

The first thing you need to do is [create a Pusher account](https://pusher.com). Next, create a Pusher Channels application using the dashboard.

Next, create a root directory for your Web API project. We will call it `spot`. When this is done, launch your terminal application and `cd` to the directory you just created. In this directory, run the following command:

```
    $ npm init -y
```

![spotify-currently-playing-API-img2](//images.ctfassets.net/1es3ne0caaid/72uTIgkgk6Qf8VuoktelDK/7d0c75cc5e43fe3617966644a208a7e0/spotify-currently-playing-API-img2.png)

At the end, you should have a `package.json` file in the root of your application.

Let’s install some dependencies we will need for our API. In the terminal, run the following command:

```
    $ npm install --save express body-parser pusher cors
```

![spotify-currently-playing-API-img3](//images.ctfassets.net/1es3ne0caaid/6irkA5SbfuJU3Yh9cr9cIU/235f7a61f347e91a5bee6c7e74cf37c7/spotify-currently-playing-API-img3.png)

This will install all the dependencies we need to build the API. When the installation is complete, we can move on to building the application.


## Building the web API

Now that we have everything installed, let’s create the web API. Open the project in an IDE of your choice. Create a new `index.js` file. This will be where we will have all our logic. Let’s start building our API.

Let’s start by importing and using all the dependencies that we installed using npm. In the file, paste the following code:

```javascript
    // File: index.js
    const express = require('express');
    const bodyParser = require('body-parser');
    const Pusher = require('pusher');
    const fs = require('fs');
    const cors = require('cors');
    const path = require('path');
    const app = express();
```

Above, we imported and created instances of the dependencies we installed using npm. Next, let’s create our API endpoints.

We will be creating three endpoints:


1. `tracks` - this endpoint will return all the available tracks for the music player. Since we are not building a full-fledged application, we will be mocking the data from a flat JSON file. We will create this file later on.
2. `current` - this endpoint will return the currently playing song. This will make it easy for other clients to know which song is currently playing when they are loaded.
3. `tick` - this endpoint will trigger a Pusher event. As the song plays, we will intermittently send the current position of the song playing using this endpoint. This is so that other web clients can know where the track is currently.

Let’s start implementing these endpoints.

In the `index.js` file, paste the following code:

```javascript
    // File: index.js
    // [...]
    
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));
    
    let tracks = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'data.json')));
    
    app.get('/tracks', (req, res) => {
      res.json(tracks);
    });
```

As seen above, we are returning the contents of a nonexistent JSON file. This file is supposed to contain the data for our tracks. Let’s create this file.

Create a file named `data.json` and paste the following JSON string into the file:

```json
    // File: data.json
    [
      {
        "id": 1,
        "duration": 195,
        "artist": "JugHead",
        "title": "Polly",
        "cover": "https://via.placeholder.com/500x500"
      }
    ]
```

Now that we have the data file, we can continue building the API. In the `index.js` file, paste the following code to create the second endpoint:

```javascript
    // File: index.js
    // [...]
    
    let current = {};
    
    app.get('/current', (req, res) => {
      res.json(current);
    });
```

Above, the endpoint simply returns the currently playing track if there is any or an empty JSON object if nothing is playing. 

Let us add the last endpoint. In the `index.js` file, add the following code:

```javascript
    // File: index.js
    // [...]
    
    app.options('/tick', cors());
    
    app.post('/tick', cors(), (req, res) => {
      const { id, position, device } = req.body;
    
      for (let index = 0; index < tracks.length; index++) {
        if (tracks\[index\]['id'] === parseInt(id)) {
          current = tracks[index];
          pusher.trigger('spotmusic', 'tick', { id, position, device });
          return res.json({ status: true });
        }
      }
    
      res.json({ status: false });
    });
```

In the endpoint above, we will receive the ID of the track currently being played, the position of the track and then we will receive the device that is sending the request. When we find a matching existing track, we will trigger the event to Pusher and save the currently playing track on the server.

Finally, let’s make sure the Node.js server is listening on port 3000 when we start the server. In the `index.js` file, add the following code:

```javascript
    // File: index.js
    // [...]
    
    app.listen(3000, () => console.log('Listening on port 3000!'));
```

Now that we have the endpoints set up, let’s add realtime triggers to Pusher. Before the `app` variable, add the following code:

```javascript
    // File: index.js
    // [...]
    
    let pusher = new Pusher({
      appId: 'PUSHER_APP_ID',
      key: 'PUSHER_APP_KEY',
      secret: 'PUSHER_APP_SECRET',
      cluster: 'PUSHER_APP_CLUSTER',
      useTLS: true
    });
```

> Replace the `PUSHER_APP_*` placeholders with the credentials from your Pusher dashboard.


## Running the application server

Now that we have built the application, we need to run the application in a server. In your terminal, run the following command to start the Node server:

```
    $ node index.js
```

![spotify-currently-playing-API-img4](//images.ctfassets.net/1es3ne0caaid/R7Lg5VnlvvSRGGsoDOQDN/946a64a11c580664fd7cb2c113d6474b/spotify-currently-playing-API-img4.png)

Now your server is running, in the next parts, we will move on to creating the clients that will consume the API that the Node.js app provides.

## Conclusion

In this part, we created a web API for our music application. This API will be responsible for returning the tracklist and also updating the now playing track. It will also be responsible for triggering events to Pusher. 

In the next part, we will start building an iOS app that will consume the API we built in this part. The source code is available on [GitHub](https://github.com/neoighodaro/spotify-like-currently-playing-realtime).

When using music streaming services like Spotify, you can see realtime technology in action when you are using multiple devices. On the other devices, you can see how much playtime has elapsed. This three-part tutorial series looks at how to integrate this feature into your application. In the first part, build the web API.

When using music streaming services like Spotify, realtime technology allows you to see on other devices how much playtime has elapsed. This three-part tutorial series looks at how to integrate this feature into your application. In the first part, build the web API.

Build a Spotify-like currently playing feature - Part 1

Building a Spotify-like currently playing feature: Part 1 - Building the web API

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 

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

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

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.

24 tutorials for “HTML”

Creating a server health monitoring app with Laravel

Building a Spotify-like currently playing feature: Part 2 - Building the iOS player

Building a Spotify-like currently playing feature: Part 1 - Building the web API

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

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

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

A guide to lifecycle hooks in Angular

Pusher Beams client API demo for Android

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

Products

Developers

Company

Connect

.css-npldjc{color:#5c29db;font-weight:700;}24 tutorials for “HTML”

Creating a server health monitoring app with Laravel

Building a Spotify-like currently playing feature: Part 2 - Building the iOS player

Building a Spotify-like currently playing feature: Part 1 - Building the web API

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

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

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

A guide to lifecycle hooks in Angular

Pusher Beams client API demo for Android

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

Products

Developers

Company

Connect

24 tutorials for “HTML”