在Angular 2中抛出我自己的异常,Angular用viewWrappedDebugError包装它

时间:2017-05-18 15:50:26

标签: angular

我正在构建一个体面的Angular 2应用程序,我已经创建了自己的Exception来推出自己的错误处理机制。但似乎Angular试图将我的错误包含在某些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来捕获我自己的(以及其他)异常:

异常handling.service.ts

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

我已经在我的core.module.ts中正确地注入了ErrorHandling服务:

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

问题是,Angular似乎试图在到达Handler之前将异常包装在其他东西中。

要测试,我在某个组件的ngOnInit方法中抛出自己的ClientRuntimeException:

一些-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>]

1 个答案:

答案 0 :(得分:2)

我已经解决了这个问题。您的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;
  }
}