Ionic 2 ErrorHandler: Override or Decorate

Ionic Framework ionic-v3
1

I’d like to log production errors to a database. I know it’s possible to override the default Ionic Error Handler. But is it possible/better to decorate the exception handler to provide more functionality (without removing the original functionality)?

This Angular blog post talks about decorating (instead of overriding):
https://www.loggly.com/blog/angularjs-exception-logging-made-simple/

Ionic custom error handler documentation is here:
Documentation here: IonicErrorHandler - Ionic API Documentation - Ionic Framework

It seems dangerous to override the default Ionic error handler class. What does the class do? Will my override break important behavior? How will I keep my class up to date with any future Ionic class changes?

I saw the following custom class stub here on the forum and maybe it’s as simple as using this?

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);
	}
}
2

Just look at its source: ionic-error-handler.ts

It only does nice error reporting when running in the dev server, nothing in production.

3

Thanks! I ended up doing something like this:

import { Injectable } from '@angular/core';
import { ErrorHandler } from '@angular/core';
import { IonicErrorHandler } from 'ionic-angular';
import { ErrorService } from '../errors/error.service';

@Injectable()
export class CustomErrorHandler extends IonicErrorHandler implements ErrorHandler {

    constructor(
        public errorService: ErrorService
    ) {
        // Call parent constructor (with no parameters).
        super();
    }

    handleError(err: any): void {

         // Call parent handleError method.
        super.handleError(err);

        // Wrap custom code in empty try/catch.
        try {
            this.errorService.log(err);
        } catch (e) { }
    }
}
4

Hello, where do I look up the properties of err.
I would like to log/display the context where the error occurred at least the file if not the method.
Is that possible?

Right now I get something like this

Runtime Error
_this.DataList.forEach is not a function
Stack
TypeError: _this.DataList.forEach is not a function
    at SafeSubscriber._next (http://localhost:8100/build/main.js:26665:32)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:46061:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:46010:22)
    at Subscriber._next (http://localhost:8100/build/main.js:45963:26)
    at Subscriber.next (http://localhost:8100/build/main.js:45927:18)
    at MapSubscriber._next (http://localhost:8100/build/main.js:111737:26)
    at MapSubscriber.Subscriber.next (http://localhost:8100/build/main.js:45927:18)
    at XMLHttpRequest.onLoad (http://localhost:8100/build/main.js:56046:38)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:36933:37)
Ionic Framework: ^2.0.0
Ionic Native: 2.4.1
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 7.2.0
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Thank you.

5

Is it possible to navigate to a specific support page with an error handler like this? It seems like getting a Nav Controller in this context isn’t possible?