在Angular 2中拋出我自己的異常，Angular用viewWrappedDebugError封裝它

Question

我構建了一個體面大小的Angular 2應用程序，並且創建了自己的異常來處理我自己的錯誤處理機制。但似乎角試圖包裝我的錯誤在一些viewWrappedDebugError

我的例外：

ClientRuntimeException.ts

export class ClientRuntimeException { 
    id: string; 
    timestamp: Date; 
    origin: ErrorOrigin; 
    errorDisplayMethod: ErrorDisplayMethod; 
    message: string; 
    stack: string; 

    constructor(shortMessage: string, displayMethod?: ErrorDisplayMethod) { 
    this.id = Guid.newGuid(); 
    this.timestamp = new Date(Date.now()); 
    this.origin = ErrorOrigin.CLIENT; 
    this.message = shortMessage; 
    this.stack = new Error().stack; 
    this.errorDisplayMethod = displayMethod || ErrorDisplayMethod.DEFAULT; 
    } 

我已經實現了的ExceptionHandler搭上我自己的（和其他）例外：

exception-handling.service .TS

@Injectable() 
export class ExceptionHandlingService extends ErrorHandler { 
    handleError(error: any) { 
     ... 
    } 
} 

我已經注射ErrorHandling中服務正確，我core.module.ts：

... 
{ provide: ErrorHandler, useClass: ExceptionHandlingService }, 
... 

的問題是，角似乎在試圖總結我的例外在到達處理程序之前的其他事情。

爲了測試，我要把我自己ClientRuntimeException在一些組件的ngOnInit方法：

一些-component.ts

export class SomeComponent implements OnInit { 

    ngOnInit() { 
     throw new ClientRuntimeException("my message"); 
    } 
} 

但馬上我的ErrorHandler裏，我越來越別人的例外：

ERROR: Uncaught (in promise): Error: [object Object] 
Error: [object Object] 
    at viewWrappedDebugError (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:8862:15) [angular] 
    at callWithDebugContext (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:13283:15) [angular] 
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:12812:12) [angular] 
    at ViewRef_.detectChanges (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:10382:63) [angular] 
    at RouterOutlet.activateWith (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23997:42) [angular] 
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23175:16) [angular] 
    at ActivateRoutes.activateRoutes (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23156:26) [angular] 
    at http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23092:58 [angular] 
    at Array.forEach (native) [angular] 
    at ActivateRoutes.activateChildRoutes (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23092:29) [angular] 
    at ActivateRoutes.activateRoutes (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23157:26) [angular] 
    at http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23092:58 [angular] 
    at Array.forEach (native) [angular] 
    at ActivateRoutes.activateChildRoutes (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23092:29) [angular]: Error: Uncaught (in promise): Error: [object Object] 
Error: [object Object] 
    at viewWrappedDebugError (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:8862:15) [angular] 
    at callWithDebugContext (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:13283:15) [angular] 
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:12812:12) [angular] 
    at ViewRef_.detectChanges (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:10382:63) [angular] 
    at RouterOutlet.activateWith (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23997:42) [angular] 
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23175:16) [angular] 
    at ActivateRoutes.activateRoutes (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23156:26) [angular] 
    at http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23092:58 [angular] 
    at Array.forEach (native) [angular] 
    at ActivateRoutes.activateChildRoutes (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23092:29) [angular] 
    at ActivateRoutes.activateRoutes (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23157:26) [angular] 
    at http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23092:58 [angular] 
    at Array.forEach (native) [angular] 
    at ActivateRoutes.activateChildRoutes (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:23092:29) [angular] 
    at resolvePromise (http://localhost:8080/cred-services/ng-dist/polyfills.bundle.js:745:31) [angular] 
    at resolvePromise (http://localhost:8080/cred-services/ng-dist/polyfills.bundle.js:716:17) [angular] 
    at http://localhost:8080/cred-services/ng-dist/polyfills.bundle.js:793:17 [angular] 
    at Object.onInvokeTask (http://localhost:8080/cred-services/ng-dist/vendor.bundle.js:4348:37) [angular] 
    at ZoneDelegate.webpackJsonp.1291.ZoneDelegate.invokeTask (http://localhost:8080/cred-services/ng-dist/polyfills.bundle.js:430:36) [angular] 
    at Zone.webpackJsonp.1291.Zone.runTask (http://localhost:8080/cred-services/ng-dist/polyfills.bundle.js:198:47) [<root> => angular] 
    at drainMicroTaskQueue (http://localhost:8080/cred-services/ng-dist/polyfills.bundle.js:626:35) [<root>] 
    at HTMLAnchorElement.ZoneTask.invoke (http://localhost:8080/cred-services/ng-dist/polyfills.bundle.js:497:25) [<root>] 

Answer 1

我已經解決了次是問題。您的ClientRuntimeException需要擴展ES6 Error。似乎有一些Angular代碼檢查是否拋出的對象擴展了Error，如果它沒有嘗試將它包裝在它自己的東西中。

export class ClientRuntimeException extends Error { 
    name: string; 
    id: string; 
    timestamp: Date; 
    origin: ErrorOrigin; 
    errorDisplayMethod: ErrorDisplayMethod; 
    message: string; 
    stack: string; 

    constructor(shortMessage: string, displayMethod?: ErrorDisplayMethod) { 
    super(shortMessage); 
    this.id = Guid.newGuid(); 
    this.name = 'Error@' + window.location.href; 
    this.timestamp = new Date(Date.now()); 
    this.origin = ErrorOrigin.CLIENT; 
    this.message = shortMessage; 
    this.errorDisplayMethod = displayMethod || ErrorDisplayMethod.DEFAULT; 
    } 
}