Angular2: Better/Deeper Zone Stacks for Debugging

Question

Is there a way in Angular2 to get better call stacks for asynchronous code? I always thought it is one of the strengths of Zone to keep track of the execution contexts of setTimeout(), emitted events, Promises, etc.?

I built a plunker example which shows a common scenario which makes it impossible to trace the error.

I have the following example scenario:

@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/

This snipped produces an asynchronous error "Oh Snap!" when the button is clicked. This error will be emitted through an EventEmitter which will be handled in the App component that simply causes an unhandled Promise rejection.

The call stack that i get now looks like this:

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)

Which would give me no chance to trace the actual error trigger origin in a more complex application.

I also embedded the "long-stack-trace-zone" script, which has no effect at all.

Question is: What do i have to do to get better Zone stack traces? Or is it possible at all?

Thanks in advance.

Answer 1

A solution is to use the "Chrome DevTools" in order break on the Exception.

For that, in Chrome DevTools, you should:

1. Break on uncaught exceptions
2. Use Blackboxing in order to break only in the code you are interested in