Track Bugs in Realtime with Ionic Monitoring
Bugs happen, and can be hard to track down - especially with hundreds of possible combinations of mobile devices and operating systems. Appflow Monitoring allows you to track errors in your app on users’ phones and it sends them directly to you instantly, even if your code is minified!
Reducing customer frustration by fixing major issues quickly in your production apps are a substantial part of providing a high quality app experience. Combined with Appflow Deploy, new updates can be rolled out quickly to address problems in real-time.
To begin, let’s add a global error handler that will catch and report all unhandled exceptions that occur in the app. Open src/app/app.module.ts
, then add two import statements:
import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { IonicErrorHandler } from 'ionic-angular';
Next, create an error handler class calls the Monitoring service’s API whenever any errors have been encountered:
@Injectable()
export class MyErrorHandler implements ErrorHandler {
ionicErrorHandler: IonicErrorHandler;
constructor(injector: Injector) {
try {
this.ionicErrorHandler = injector.get(IonicErrorHandler);
} catch (e) {
// Unable to get the IonicErrorHandler provider, ensure
// IonicErrorHandler has been added to the providers list below
}
}
handleError(err: any): void {
Pro.monitoring.handleNewError(err);
this.ionicErrorHandler && this.ionicErrorHandler.handleError(err);
}
}
Then, within the providers array, update IonicErrorHandler to MyErrorHandler:
{provide: ErrorHandler, useClass: MyErrorHandler},
It should then look like:
providers: [
// ...
IonicErrorHandler,
[{ provide: ErrorHandler, useClass: MyErrorHandler }],
];
Next, let’s intentionally create a bug so we can demonstrate the power of Ionic Monitoring. Open about.html
and rename the takePicture method to something that doesn’t exist, such as “takePhoto”:
<button ion-fab (click)="photoService.takePhoto()"></button>