How to find which async action triggers ngZone (that lead to Change Detection)?

Any changes in the stack trace of updates always lead back to globalZoneAwareCallback. How do you find out what triggered the change?

In terms of debugging it's good to have a clear picture.

globalZoneAwareCallback is a function declared in zonejs for handling all event callbacks with capture=false. (btw, for capture=true there is globalZoneAwareCaptureCallback)

It means that any event listener will first go through this method. That listener can be added on the page by Angular, by you or by any 3rd party library.

There are many ways of how we can listen to browser events in Angular:

• subscribe to browser event <element (event)="callback()">

• @HostListener decorator @HostListener('event') callback() {}

• Renderer2.listen method

• rxjs fromEvent

• assign element property element.on<event> = callback

• addEventListener method element.addEventListener(event, callback)(this method is used internally in many other ways above)

Once you're within globalZoneAwareCallback you have access to all Zone tasks that should be triggered.

Let's imagine we listen to click event on document.body:

document.body.addEventListener('click', () => {
   // some code
});

Let's open Chrome dev tools to have a clear picture:

What we've just discovered:

• each Zone task contain source so this is what triggers the change

• target property shows which object triggers the change

• callback property can lead us to the handler of the change

Let's consider another example and add click event using Angular way:

<h2 class="title" (click)="test()">Hello {{name}}</h2>

Once we click on that h2 element we should observe the following:

You might be surprised that now callback property didn't bring us to the test callback right away but rather we showed some wrapper from @angular/platform-browser package. And other cases also may differ but ZoneTask.source property is usually all you need in those cases because it shows you the root cause of the change.