Add Firebase Crashlytics In Ionic Application

Firebase is combination of really nice tools/services for the developers like Crashlytics, Cloud messaging, Real time Database, Analytics and much more. From them Crashlytics is widely used by developers to get real time crash events and problem insights from the Mobile applications. Crashlytics was initially developed by Twitter and It was under the Fabric services. But From March 2020 Crashlytics have joined the Firebase services family.

In this tutorial I am going to use this cordova plugin. Plugin has latest AndroidX compatible firebase libraries. so app can support Android-29+ Api.

Github Link - dpa99c/cordova-plugin-firebasex

Step - 1 

Create Project in Firebase console

Goto Firebase Console, then click on add project if it was not created prior to this. If its first time you will see form like below to create your project.

 

Step - 2

Now project is created. So let's start crashlytics for the project. In side menu Quality > Crashlytics or you can swipe down on main page till you can see crashlytics menu. 

Enable crashlytics for project by filling form like below. You have fill few details of your project like Project name, Project application Id/ Bundle identifier and SHA-1 key for debug build. You can check this Stackoverflow post for SHA-1. 

 

 

After that step make sure you download google-services.json. This file contains configuration regarding project. complete all the steps and skip in last step as we need to code yet for logging events from the app. Make sure you put this json file in root directory of your project.

Step - 3 

Add plugin into project

cordova plugin add cordova-plugin-firebasex

Step - 4 

Create class to handle all errors at runtime

AppErrorHandler.ts

import { Injectable, ErrorHandler } from '@angular/core';
import * as stacktrace from 'stacktrace-js';
import { FirebaseX } from "@ionic-native/firebase-x/ngx";


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

  public Tag = "AppErrorHandler"

  constructor (private firebase: FirebaseX) {}

  handleError(error: any): void {
      
      // do something with the error
      console.log(error);

      stacktrace.get().then(
          trace => this.firebase.logError(this.Tag + " Error =>" + error + "Trace =>" + trace)
      );
  }

}

Step - 5 

Define above class as Custom error handler in 

App.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy, ModalController } from '@ionic/angular';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


import { Diagnostic } from '@ionic-native/diagnostic/ngx';
import { FirebaseX } from "@ionic-native/firebase-x/ngx";

import { CommonUtilService } from './services/commonutil.service';
import { AppErrorHandler } from './services/apperrorhandler';


@NgModule({
  declarations: [AppComponent, NotificationsComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IonicModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: ErrorHandler, useClass: AppErrorHandler },
    StatusBar,
    Diagnostic,
    FirebaseX
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Well setup and coding both done. now run the app in android emulator or device. As it has dependency on android platform. For testing put below code in your main page to simulate crash.

this.firebase.sendCrash();

That's it from my side. Now run the app and see the result. If you have any query please let me know in below comment box.

keep coding... :)