在自定义错误处理程序中的Angular2中,如何使用.ts文件中的行号访问错误堆栈跟踪

Question

我尝试在我的应用程序中按照文档实现自定义错误处理程序,但不知道如何访问原始ErrorHandler堆栈跟踪的输出.为什么我需要原创？由原始ErrorHandler打印到控制台的堆栈跟踪是指来自typescript .ts文件的行号(至少对于我的app文件).自定义ErrorHandler中可用的堆栈跟踪是指来自javascript .js文件的行号.

Angular2应用程序示例如下:

文件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

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

App构造函数的最后一个语句按预期引发错误.我的自定义错误处理程序向控制台输出一些内容,但堆栈跟踪仅包含来自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})]);