Angular2：更好/更深的区域堆栈用于调试

Question

在Angular2中是否有一种方法可以获取异步代码更好的调用堆栈？我一直认为这是Zone的优势之一，可以跟踪setTimeout（），发出的事件，Promises等的执行上下文。

我建立了一个Plunker示例，展示了一个常见场景，使得无法追踪错误。

我有以下示例场景：

@Component({
  selector: 'my-component',
  template: `
    <div>
      <button (click)="doSmth()">Cause an async error!</button>
    </div>
  `
})
export class MyComponent {
  @Output() error = new EventEmitter<any>(true);

  public doSmth(): void {
    this.error.emit('Oh snap!');
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <my-component (error)="handleError($event)"></my-component>
    </div>
  `,
})
export class App {
  private error = "";

  public handleError(reason: any): void {
    Promise.reject(reason)
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, MyComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

Plunker: https://embed.plnkr.co/rnkxRH9G0FzA3DcBHfKO/

当按钮被点击时，这段代码会产生一个异步错误"Oh Snap!"。该错误将通过EventEmitter进行传递，并在App组件中进行处理，从而导致未处理的Promise rejection。

当前的调用堆栈看起来像这样:

Error: Oh Snap!
at resolvePromise (zone.js:538)
at Function.ZoneAwarePromise.reject (zone.js:594)
at App.handleError (app.ts:34)
at DebugAppView._View_App0._handle_error_3_0 (App.ngfactory.js:82) //not my file
at eval (core.umd.js:12718)
at eval (core.umd.js:9180)
at ZoneDelegate.invokeTask (zone.js:356)
at Object.onInvokeTask (core.umd.js:9236)
at ZoneDelegate.invokeTask (zone.js:355)
at Zone.runTask (zone.js:256)

这将使我无法在更复杂的应用程序中跟踪实际错误触发源。

我还嵌入了“long-stack-trace-zone”脚本，但没有任何作用。

问题是：我需要做什么才能获得更好的Zone堆栈跟踪？或者是否可能实现？

提前致谢。

- Seraph

Answer 1

一种解决方法是使用"Chrome DevTools"来中断异常。

因此，在Chrome DevTools中，您应该：

1. 中断未捕获的异常
2. 使用Blackboxing，只在您感兴趣的代码中中断

- Steven Muhr

---

与此同时，Chrome和Firefox Dev工具具有完整的Zone堆栈支持，这对于许多开发者来说是一个梦想。（回答晚了很抱歉） - Seraph