![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

### Setup the Firebase Project

If you are new to [Firebase](https://firebase.google.com) then you'll need to sign up (it's free!), otherwise head over to the [Firebase Console](https://console.firebase.google.com) and hit the Add project button.

Give your project a name in step 1, if you want analytics, leave it enabled in step 2 and hit create.

Once it has finished spinning up, hit the iOS button to add an iOS app to the project. Apple sign-in is only really useful for users with Apple devices, so iOS only.

You will need to provide a bundle ID but everything else can be ignored for now.

### Create an Ionic Capacitor app

Over in a terminal, create a new ionic app using the blank template and any framework you prefer from the options.

`ionic start appleSignInDemo blank`

Once that is finished, we need to add Capacitor to the app:

`npm i @capacitor/core`

`npm i -D @capacitor/cli`

`npx cap init`

The command will prompt some questions about the naming of your app. Make sure it matches the bundle you specified in the Firebase console.

### Add iOS and Sign-in with Apple Capacitor Plugin

After the ionic CLI has finished creating the app we need to add the iOS platform and the Apple Sign-in plugin:

`npm i @capacitor/ios`

`npx cap add ios`

The [Apple Sign-in plugin](https://github.com/capacitor-community/apple-sign-in) is part of the [Capacitor Community](https://github.com/capacitor-community) Github repo and was originally written by Max Lynch (the CEO of Ionic itself).

The installation is pretty straightforward:

`npm i @capacitor-community/apple-sign-in`

### Configure Firebase in Ionic

In your ionic you will need to add the Firebase npm package:

`npm i firebase`

Then, in your app.module.ts (if you've created an Angular based Ionic project) you'll need to add to the general imports:

`import firebase from "firebase/app";`

and then above the NgModule declaration:

`firebase.initializeApp(environment.firebaseConfig);`

Now we need to add the Firebase details into the environment.ts file:

```
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "YOU-API-KEY",
    authDomain: "YOUR-APP-DOMAIN.firebaseapp.com",
    databaseURL: "https://YOUR-APP-DOMAIN.firebaseio.com",
    projectId: "PROJECT-NAME",
    storageBucket: "PROJECT-NAME.appspot.com",
    messagingSenderId: "SENDER-ID-NUMBER",
    appId: "APP-ID-NUMBER",
    measurementId: "MEASUREMENT-ID"
  }
}
```

These values come from the Firebase Project settings.

### Configure Apple Sign-in for Ionic

Using the CLI, create a login page:

ionic generate page login

Then, in the html, add the Apple Sign-in button. You will need to style this button in-line with Apple's style guide to ensure compliance.

```html
<ion-content>
  <ion-button expand="block" color="dark" class="ion-margin-bottom" *ngIf="iosVersion >= 13"
    (click)="signIn('apple')">
    <ion-icon name="logo-apple"></ion-icon> &nbsp; Sign in with Apple
  </ion-button>
 </ion-content>
```

Sign in with Apple is not supported on anything earlier than iOS 13, so we are hiding the button if the user is on an older version.

Then, in the login.component.ts we need to implement the sign-in logic (this is a Capacitor V2 example for the import of the plugins):

```typescript
import firebase from "firebase/app";
import "firebase/auth";
import { Plugins } from "@capacitor/core";
const { SignInWithApple } = Plugins;

async signIn(provider: string): Promise<void> {
  const { response } = await SignInWithApple.Authorize();
  let provider = new firebase.auth.OAuthProvider("apple.com");
  provider.addScope("email");
  provider.addScope("name");
  credential = provider.credential({
    idToken: response.identityToken,
  });
  // Redirect preferred for mobile according to above
  result = await firebase.auth().signInWithCredential(credential);
}
```

The result object (if logged in with the correct username/password combination will be the Firebase authentication result containing the user information needed to continue personalising the app and to make any subsequent authenticated Firebase API calls.

Authentication is vital for any app with user accounts. Apple requires that their authentication provider is available on all apps submitted to the iOS app store.

Adding Sign-in with Apple to Ionic Capacitor Apps with Firebase

![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

Adding Sign-in with Apple to Ionic Capacitor Apps with Firebase

Integrating Firebase with Ionic + Angular