Angular2: Better/Deeper Zone Stacks for Debugging
Asked Answered
Z

1

13

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.

Zante answered 18/8, 2016 at 7:52 Comment(0)
A
2

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
Alimony answered 12/12, 2016 at 8:47 Comment(1)
Meanwhile the Chrome and Firefox Dev Tools have full Zone Stack Support which is just a dream. (Sorry for the late answer)Zante

© 2022 - 2024 — McMap. All rights reserved.