In Angular2, in a custom error handler, how to access an error stack trace with line numbers from .ts files

Question

I am trying to implement my own error handler in my application after the documentation , but I don’t know how to access the output of the original stack trace ErrorHandler. Why do I need an original? A stack trace printed to the console using the original ErrorHandler refers to line numbers from typescript.ts files (at least for application files). The stack trace available in the custom ErrorHandler refers to line numbers from javascript.js files.

An example Angular2 application is as follows:

File main.ts

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {ExceptionHandler, provide} from "angular2/core";
class MyExceptionHandler  {
    call(error, stackTrace = null, reason = null) {
        let msg = ExceptionHandler.exceptionToString(error);
        console.log(msg);
        console.log('Message: ' + error.message);
        console.log('Stack trace: ' + stackTrace);
    }
}
bootstrap(App, [provide(ExceptionHandler, {useClass: MyExceptionHandler})]);
//bootstrap(App, []);

App.ts file

import {Component} from 'angular2/core'
@Component({
  selector: 'my-app',
  providers: [],
  template: `<div><h2>Hello {{name}}</h2></div>`,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2';
    let arr = ['one', 'two'];
    let val = arr[4].id;
  }
}

, . , javascript.

, ExceptionHandler , typescript . (app.ts: 18)

angular2.dev.js:23501 TypeError: Cannot read property 'id' of undefined
    at new App (app.ts:18)

- , .ts .

Answer 1

import {ExceptionHandler, provide} from "angular2/core";

export interface IExceptionHandler {
    call(exception: any, stackTrace?: any, reason?: string): void;
}

export class MyCutomExceptionHandler implements IExceptionHandler {
    call(exception: any, stackTrace: any, reason: string): void {

        alert(exception);
        let msg = ExceptionHandler.exceptionToString(exception);
        console.log("micronyks");
        console.log(msg);
        console.log('Message:---->N ' + exception.message);
        console.log('Stack trace:----->N ' + stackTrace);
    }
}

@Component({
selector: 'my-app', 
  template: `
        main component   
  `,
  directives: [],
})
export class ParentCmp {
    constructor() {
    this.name = 'Angular2';
    let arr = ['one', 'two'];
    let val = arr[4].id;
  }

}

bootstrap(ParentCmp, [provide(ExceptionHandler, {useClass: MyCutomExceptionHandler})]);