Add custom error handler to prevent app from being broken

I’d like to add a custom error handler to prevent the app from being broken after an error occurred. Most of the time these a coding errors or wrong expectations but in the wild the strangest things tend to happen so I’d like to log the error but the app should still be usable.

Currently when you have an error thrown on a button click you can’t use the app anymore after dismissing the ionic supplied error pop up.

This became urgent again, and I still don’t know how to solve this. Am already using the current version 3.6.0.

Anyone interested in this as well?

Does this actually happen in production builds? I was under the impression the runtime error stuff was only in dev mode… (but that is just what I assumed).

In general I would look into some error logging service like Rollbar and how these are implemented. There are Angular packages for most of them to be implemented in Ionic.

I’ve found a working solution following Extend IonicErrorHandler + navigate to new page

How exactly does that work and solve your problem? Could you explain?

I’m using a custom error handler to emit a custom event on error and receive this in the main component where it gets logged and an alert is displayed which forces the user to reload the whole app:

export class AppErrorHandler implements ErrorHandler {

  constructor(
    private events: Events
  ) { }

  handleError(error: any): void {
    this.events.publish(EVENT_ERROR_UNHANDLED, error);
  }
}
    this.platform.ready().then(() => {
      this.events.subscribe(EVENT_ERROR_UNHANDLED, (error) => {
        this.events.unsubscribe(EVENT_ERROR_UNHANDLED);
        this.errorService.handleAppError({ name: 'AppError', message: error.message, stack: error.stack } as Error);
      });
export class ErrorService {
  handleAppError(error: Error) {
    this.alert.create({
      title: this.translate.instant('label.error.title'),
      message: messageText,
      buttons: [
        {
          text: this.translate.instant('label.error.reload'),
          handler: () => window.location.reload()
        }
      ]
    }).present();
  }
}

Ah, so an error that you can actually handle. Nice!