How to use ErrorHandler and IonicErrorHandler in ionic 2

Ionic Framework ionic-v3
1

The ionic blog release RC3 Error reporting. Am follow the all the steps in the same way but am getting error. But am updating RC3and scripts also.

My Steps:-
app.module.ts
import { NgModule, ErrorHandler } from ‘@angular/core’;[Uploading…]
import { IonicApp, IonicModule, IonicErrorHandler } from ‘ionic-angular’;

providers: [ErrorHandler, IonicErrorHandler, Utils, Loginservice].

Am attached the error screenshot.

Thanks.

1 Like
2

New class:

import { ErrorHandler } from ‘@angular/core’;
import {IonicErrorHandler} from ‘ionic-angular’;

export class MyErrorHandler extends IonicErrorHandler implements ErrorHandler {

constructor() {
super();
}

handleError(err: any): void {
console.log('Error: ’ + err);
super.handleError(err);
}

}

In app.module.ts instead of:

[{ provide: ErrorHandler, useClass: IonicErrorHandler }]

use:

[{ provide: ErrorHandler, useClass: MyErrorHandler }]

3 Likes
3

where i have add the final step in my @NgModule is
@NgModule({
declarations: [
MyApp,
Page1,
Page2,
LoginPage,
RegistrationPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Page1,
Page2,
LoginPage,
RegistrationPage
],
providers: [Utils, Loginservice]
})

This is my where i have to add [{ provide: ErrorHandler, useClass: MyErrorHandler }] code

4

providers: [
Utils,
Loginservice,
[{ provide: ErrorHandler, useClass: MyErrorHandler }]
]

2 Likes
5

Its working. Thank you crissi.

6

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.