Implementing ExceptionHandler In Ionic2

I’d like to implement an ExceptionHandler in my Ionic2 app, but can’t find any documentation or examples.

I followed the instructions on http://stackoverflow.com/a/39189175/385730 but the provider does not seem to be working.

Other discussions suggest its possible using Angular2’s https://angular.io/docs/js/latest/api/core/index/ExceptionHandler-class.html.

How do you implement ExceptionHandler in Ionic2?

Our Ionic2 Beta 11 app has occasionally been getting the error:

SyntaxError: Unexpected EOF, http://localhost:3000/, Line: 1

I suspect it’s happening and being eaten in a Promise, or perhaps an Angular error while updating the views. Once this error happens, the views can no longer be updated, need to restart to app to fix.

Is there anyway in Ionic2 to handle this kind of exception? Or at least debug to track down the cause?

have a look at the debugger keyword:

After a bit of work, I was able to get an ExceptionHandler working in my Ionic2 app.

import { Injectable, ExceptionHandler } from '@angular/core';
@Injectable()
export class ErrorHandler extends ExceptionHandler {
  constructor() {
    super(new ErrorLogger(), false);
  }
  call(exception: any, stackTrace?: any, reason?: string) {
    super.call(exception, stackTrace, reason);
  }
}

class ErrorLogger {
  log(s: any): void {
    console.error("Log", s);
  }
  logError(s: any): void {
    console.error("Error", s);
  }
  logGroup(s: any): void {
    console.error("Error Group", s);
  }
  logGroupEnd(){
    //console.error("Logger GroupEnd");
  };
}
import { Component, ExceptionHandler, provide } from '@angular/core';
import { ErrorHandler } from './helpers/error-handler';
@Component({
  templateUrl: 'build/app.html',
  providers: [provide(ExceptionHandler, {useClass: ErrorHandler})]
})
export class MyApp {
  constructor() {
  }
}
ionicBootstrap(MyApp,
  [provide(ExceptionHandler, {useClass: ErrorHandler})],
  {prodMode: true}).catch(err => console.error("Bootstrap", err));

Hopefully this helps someone else trying to implement ExceptionHandler in their app.

3 Likes

Thanks, it really helped me! Just one thing. Function provide() is now deprecated, so you should now just use an object with provide and useClass properties
like {provide: ExceptionHandler, useClass: ErrorHandler}

1 Like

Instead of just console.log, how can I perform an Alert, for example, from MyErrorHandler?

I added the following to the constructor…

public AlertController: AlertController,

Here is the actual hander…

    HandleError(err: any): void {
        console.log('MyErrorHandler.handleError<<------.------Error: ' + err);
        //
        let Alert = this.AlertController.create({
            title: 'An Unexpected Error has Occurred. Please report if it repeats',
            message: err,
            buttons: [{
                text: 'Ok',
                handler: (data) => {
                }
            },
            ]
        });
        // Show the alert
        Alert.present();
        //
        // -) I guess this means pass error to my ancestors :)
        super.handleError(err);
    }

the console.log above is shown in the chrome console,
However, the Alert.presents() line executes in the debugger but never pops.

In the console I see the following:
image

I would like to have the option to display the error to the user

I do have a try block around calling the method making the throw statement

                        try{
                            this.BuilldFromAMS2UQS()
                        }finally{}

I have the imports

 import { AlertController } from 'ionic-angular'; // 20180415

Here is how I throw :slight_smile:

    // 20150221
    // 20180318 started port from C# to TS 
    /// Returns MediaSlides
    /// Builds MediaSlides model from on-the-fly converted  AMS native XML resources
    BuilldFromAMS2UQS(): MediaSlides {
        console.log("UQSData.BuilldFromAMS2UQS------.------>>")
        //
        let Count = this.Slides.length
        // -) validate
        if (Count < 5) // 5-2 = 3
        {
            // https://basarat.gitbooks.io/typescript/docs/types/exceptions.html
            // https://stackoverflow.com/questions/23790509/proper-use-of-errors-in-typescript 
            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error
            throw new Error("UQSData.BuilldFromAMS2UQS: Need a minimum of 3 *content* slides to make a Quiz");
            
        }

UPDATE: I just discovered that the Alert in the HandleError(err: any): void {} above is actually working nicely under Android chrome but not under Windows Chrome where I do most of my development. Any ideas?

Thanks.

1 Like

I get an /@angular/core/core"' has no exported member 'ExceptionHandler' in an Ionic 3 app. Does this still works? thanks