![Rollbar-Logo](/assets/116429_rollbar_logo.jpg "Rollbar Logo")

[Rollbar](https://rollbar.com/) is a real-time cloud error logging service that has SDKs for a wide variety of languages, frameworks, and platforms.

Rollbar provides in-depth trace logs for any uncaught exception in your application code, along with allowing different level log entries to be called manually. It makes tracing back the path your users take to create errors a much simpler task.

The extensive configuration options also allow different environment and version tags, as well as user attribution to assist further.

Included in the free tier Rollbar provides up to 5000 events per month and real-time alerts. You'll need a free account to be able to create a project and add the configuration to your Ionic app.

To add Rollbar into your Ionic Angular app:

* In a terminal, open up your Ionic project directory
* Run npm i rollbar
* Run ng generate service services/rollbar to create a new service for your app.

In the rollbar.service.ts file that is generated, add the following imports & consts:

```javascript
import {
  Injectable,
  ErrorHandler,
  InjectionToken,
  Inject,
} from "@angular/core";

import * as Rollbar from "rollbar";
import { environment } from "src/environments/environment";
import { Plugins } from "@capacitor/core";
const { Device } = Plugins;

const rollbarConfig: Rollbar.Configuration = {
  accessToken: "YOUR-ROLLBAR-ACCESS-TOKEN",
  captureUncaught: true,
  captureUnhandledRejections: true,
  captureEmail: true,
  captureIp: true,
  captureUsername: true,
  environment: environment.production ? "production" : "development",
  enabled: environment.production ? true : false,
  ignoredMessages: ["Script error."],
};

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

The type of Rollbar is an interface, which means we can't inject it into our app in standard ways. In order to use it properly, we need to use an [InjectionToken](https://angular.io/api/core/InjectionToken#description) instead. This allows us to assign the value of Rollbar to a token that can be injected into our components and services.

```javascript
@Injectable({
  providedIn: "root",
})
export class RollbarErrorHandler implements ErrorHandler {
  constructor(@Inject(RollbarService) private rollbar: Rollbar) {
    Device.getInfo().then((info) => {
      const appVersion = info.appVersion;
      this.rollbar.configure({
        codeVersion: appVersion,
        code_version: appVersion,
        version: appVersion,
      });
    });
  }

  addRollbarPerson(user) {
    this.rollbar.configure({
      payload: {
        person: {
          uid: user.uid,
          email: user.email
        }
      }
    })
  }

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

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

In addition to creating this service, it must be included in our app.module.ts:

```javascript
import { 
  RollbarService, 
  rollbarFactory, 
  RollbarErrorHandler  
} from './services/rollbar.service';

.....

providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: ErrorHandler, useClass: RollbarErrorHandler  },
    { provide: RollbarService, useFactory: rollbarFactory },
.....
  ],
....
```

Breaking the service down, we have the class implementing the Angular ErrorHandler. This means that the RollbarErrorHanlder class **must** implement a function called handleError(err: any):

`export class RollbarErrorHandler implements ErrorHandler`

This function is the one that Ionic now uses by default, overloading the in-built one, to handle any uncaught exception that occurs and automatically logs the error to Rollbar. In this case, we are simply logging to Rollbar an "error" level log. This could be customised to manipulate the error and/or log different levels depending on the error type.

In our class constructor, we are using the Device plugin provided by Capacitor to retrieve our app's version number. This is purely added to the Rollbar configuration object to add information to the error logs that are sent.

Following this, we have addRollbarPerson(user). In [our](https://www.interapptive.com.au/) apps, this function is called after the user logs in. The user argument contains the information retrieved from the database about the user. This allows the logs to be attributed to a user.

Lastly, we export Rollbar into a factory which we then use as a provider in our app.module.ts

A quick how-to guide to adding Rollbar cloud error logging to your Ionic app with Angular

Adding Rollbar Error Tracking to Ionic + Angular

### What is an HTTP Interceptor?

Every HTTP transaction that occurs between the client and server of web applications has a request and a response.

The client requests something or sends something to the server. The server processes this and responds with a response.

HTTP Interceptors allow the client application to modify either (or both) the content of the request and response. For those familiar with Nodejs, the HTTP interceptor is not too dissimilar from Express middleware in that it acts as a middle-man to the requests.

### Common Uses

The most common use I come across in general development is to add JWT access tokens into the outgoing request headers for a server to validate with. Generally, this will mean accessing the JWT from wherever it is being stored (hopefully not local storage) and appending a new header value with the correct name for the server to accept, validate and continue with the request.

The other common use I have implemented is to add additional data into the response object. Generally, this will be a piece of information that is required for all responses to be processed by the client, but not actually data that needs to make the trip to and from the server. This could be a local user Id or email address, or some other display-only data.

### Adding the Interceptor

Assuming you already have an Angular app spun up, adding the interceptor itself is relatively trivial.

In my projects, I either create a new provider in a servers/providers folder or a separate folder just for the interceptor:

~/angular-app/src/app/services/http-interceptor.service.ts

or

~/angular-app/src/app/interceptors/http.interceptor.ts

But either way, the file needs to be a provider file as per Angular providers.

The implementation of this file at a base level is very simple. The service class must implement HttpInterceptor from the "@angular/common/http" part of the Angular framework. This brings in the requirement to have a function definition of intercept() which handles the request modification:

```typescript
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {
  constrcutor() { }
  
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    let headers = request.headers.append('Content-Type', 'application/json');
    const requestClone = request.clone({
            headers
          });
    return next.handle(requestClone);
  }
}
```

In the above example, we're simply adding the Content-Type header to all outgoing requests.

The real magic is the request.clone() function. As it says, it creates a new copy of the outgoing request and allows us to modify it before using it as the outgoing request information.

In addition to the above file, in order for the interceptor to fire correctly, the Angular module needs to be updated to tell the app the interceptor exists. So, in the app.module.ts file you will need to add an additional provider:

```typescript
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpInterceptorService } from './services/http-interceptor.service';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [...],
  providers: [
    ...,
    { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

That's all there is to it. The logic of the intercept function should do all the work required to modify the request.

An HTTP interceptor is a piece of logic that is able to attach to a HTTP request or response. This logic can then modify the data being transferred.

How to setup an Angular HTTP Interceptor

Environment variables in an Angular app are extremely useful for storing constants in your app that need to be used frequently, such as API url's, API access keys, Firebase config values and other general flags.

### Environment File Structure

When a new Angular app is created via the CLI tooling using ng new, one of the folders generated is 'environments'.

By default, this folder contains two files:

\- environment.ts

\- environment.prod.ts

These files come prepopulated with the following code:

environment.ts:

```typescript
export const environment = {
  production: false,
};
```

environment.prod.ts:

```typescript
export const environment = {
  production: true,
};
```

### How are Environment Files Used

The simple explanation of the usage of these files is that any values added into an environment file are injected into the compiled files when the Angular app is built. 

The different files are used depending on the build type defined. Running ng build --prod will cause the environment.prod.ts file to be used in place of the standard environment.ts file that is used for the normal ng build process.

An example of this could be something like:

```typescript
export const environment = {
  production: true,
  apiKey: 'dsgdsfghjfgjdghf',
  apiUrl: 'https://awesomeApi.myserver.com'
};
```

This will result in any reference to the environment files from within the Angular app to use the correct environment value as defined in the relative file.

In your app itself, there is no need to import the specific file to separate your environments. Only the default or main environment file should be imported into your Angular files:

```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(
    private http: HttpClient
  ) {}
  
  // Get some data. If in development mode return a string array.
  // If in prod mode get string array from server via API
  async getData(url: string): Promise<string[]> { 
    if (!environment.production) return ['development', 'data', 'values'];
    return this.http.get(environment.apiUrl).toPromise();
  }
}
```

### Adding Additional/Custom Environments

There are two steps to adding an additional environment:

\- Create a new environment file in the environments folder. Like the environment.prod.ts file, the filename of this custom file must have the additional environment name in it. 

For example, if we were to have an additional development environment, the filename would be: **environment.development.ts**

Secondly, we must update the Angular app configuration to understand wher ethis file is and what replacements it should make when building for this configuration.

To do this, open up the angular.json file in the root of your progejct directory.

In this file you will find a "configurations" object property. In order for the app to recognise the new environment file, we need to add a configuration in:

```json
"configurations": {
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ]
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3mb",
                  "maximumError": "6mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
```

We can give the new configuration any name we like. A short name is often good practice as it is the namne used in package.json scripts and in the CLI so it is easy to type out without mistakes if it is short.

The other options seen in the production configuration can be added in if required to the new development configuration, but mostly these are unnecessary.

This configuration will tell the angular app to replace the default environment file variables with the values provided in the new custom file.

### Compiling with the Custom Environment

The custom environment can be used in two main ways - via the CLI or in package.json scripts.

In the cli, we can append --configuration=dev to the normal ng build command and it will add in the dev environment values.

Similarly in the package.json, we can define scripts that also run this:

```json
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev": "ng build --configuration=dev"
}
```

Then we can run npm run dev in the CLI and it will execute the dev environment replacements.

Environment variables in an Angular app are extremely useful for storing constants in your app that need to be used frequently, such as API url's, API access keys, Firebase config values and other general flags.

How to Use Environment Variables in An Angular App

![Firebase-Logo](/assets/firebase-1024x293.jpg "Firebase Logo")

[Firebase](https://firebase.google.com/) provides a wide variety of modules that are highly useful for mobile & web apps, particularly Authentication, Firestore DocumentDB, Storage, Analytics, and App Performance Monitoring.

Here, we will integrate Firebase with an Ionic Capacitor app built with Angular.

There are a couple of [Capacitor Community plugins](https://github.com/capacitor-community) available that provide a native wrapper around the Firebase libraries, but I have found that they are unnecessary as the web Firebase set up does all of the same and more just as quickly.

Let's start by spinning up a new Ionic app. Open a new command prompt and run the following:

![New app](https://cdn.hashnode.com/res/hashnode/image/upload/v1607766648768/EaJuxY8mD.png?auto=compress,format&format=webp "Create New App")

This creates a new ionic app called firebase-ionic-app that is preconfigured using a blank Ionic template, Angular as the underlying framework and automatically adds the Capacitor requirements so we do not need to do this manually later.

Once that has finished setting up and installing all the required packages let's also install firebase by cd-ing into the newly created directory (firebase-ionic-app in this case) and running npm i firebase.

Now we can open the directory in your IDE of choice. You'll also need to have [set up a web project in Firebase](https://firebase.google.com/docs/web/setup) to connect to (At this stage there is no need to set up Android or iOS projects).

Starting in the environment.ts file in src/environments/environment.ts, let's add a firebaseConfig property to the environment object:

```javascript
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey:
    authDomain:
    databaseURL:
    projectId:
    storageBucket:
    messagingSenderId:
    appId:
    measurementId: 
  }
};
```

All these values can be retrieved from the Firebase project created previously. Next, we're going to move on to the src/app/app.module.ts file and initially, we're going to add three lines of code right above the @NgModule declaration:

```javascript
import { environment } from "../environments/environment";
import firebase from "firebase/app";

firebase.initializeApp(environment.firebaseConfig);
```

* make sure the firebase import is from "firebase/app" and not just "firebase" as this will cause errors.

What this does is bring in the firebaseConfig object we just created in the environment file, imports the firebase npm module and initialises our firebase app using those details.

Many examples have this setup running in the src/app/app.component.ts file, but this can result in multiple attempts to initialise the firebase app when it has already been initialised which, in turn, leads to a number of follow-on issues.

The app.module.ts file is where we also import other Firebase modules into our app, *say*, [analytics](https://firebase.google.com/docs/analytics) and [performance monitoring](https://firebase.google.com/docs/perf-mon) so our app.module.ts might end up like this:

```javascript
import { environment } from "../environments/environment";
import firebase from "firebase/app";
import "firebase/analytics";
import "firebase/performance";
firebase.initializeApp(environment.firebaseConfig);
firebase.analytics();
const perf = firebase.performance();
```

At this point, we can run "ionic serve" in our command prompt to start the Ionic app in our browser. If the firebaseConfig object is set up with the correct variable values, your app should run with no errors in the browser or the browser developer console.

From here, any component class that needs to use any of the Firebase functionality can just import the main Firebase package and any additional modules.

For example, to use the authentication module in a component:

```javascript
import firebase from "firebase/app";
import "firebase/auth";
```

From here, we can now flesh out all the Firebase functionality we need in our Ionic app until we're ready to add the Android and iOS platforms.

A quick how-to guide for adding Firebase into an Ionic application using Angular

Adding Rollbar Error Tracking to Ionic + Angular

How to setup an Angular HTTP Interceptor

How to Use Environment Variables in An Angular App

Integrating Firebase with Ionic + Angular