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

Question

我正在构建一个大小合适的 Angular 2 应用程序，并且我创建了自己的异常来滚动我自己的错误处理机制。但似乎 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 来捕获我自己的（和其他）异常：

异常处理.service.ts

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

我已在 core.module.ts 中正确注入 ErrorHandling 服务：

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

问题是，Angular 似乎试图在我的异常到达处理程序之前将其包装在其他东西中。

为了测试，我在某些组件的 ngOnInit 方法中抛出了自己的 ClientRuntimeException：

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