AgGrid Cell Component agInit runs sometimes outside of the zone

Question

Issue

We use a Angular cell component which contains a button. I noticed that sometimes (approximately 1 out of 10 times) the button event is handled outside of the zone which leads to issues.

What I've found out so far

agInit sometimes runs outside of the zone. I found that out by using the following snippet:

agInit(params: RendererParams): void {
  const inZone = NgZone.isInAngularZone();
  console.log("AgInit in Zone?: " + inZone);
}

If agInit is not in the angular zone, the button callback is also not in the zone.

I also noticed that the callstack is slightly different in the case where agInit runs inside our outside the zone:

Here is a link to a full diff of both stack traces: https://www.diffchecker.com/e54rZEsC

I also noticed that in the error case, the callstack start from Utils.debounce in agGrid.

To further investigate the issue, I forked the ngzone (see snippet below). No errors were logged.

ngDoBootstrap(applicationRef: ApplicationRef) {
  const debugSpec: ZoneSpec = {
    name: "debugSpec",
    onHandleError: (parentZoneDelegate: ZoneDelegate, currentZone: Zone, targetZone: Zone, error: any) => {
      console.log(error);
      return true;
    }
  };

  Zone.current.fork(debugSpec).run(() => {
    applicationRef.bootstrap(AppComponent);
  });
}

Workaround

I can always manually run the callback within the zone. That works.

Answer 1

I found the the problem. Since it's hard to reproduce I am not 100% sure though. I think it is a AgGrid bug.

Why?

1. I noticed that if it is outside the zone its called by Utils.debounce
2. Then i check where ag grid calls it. In around 6 places. One of them was in a ResizeObserver callback
3. Angular zone monkeypatches setTimeout, but not ResizeObserver
4. I could toggle between ResizeObserver and and polyfill which relies on setTimeout by using suppressBrowserResizeObserverin the gridSettings
5. I wrote an automation to refresh the browser in an endless loop and stop when the error happens
6. I could always with max 10 refresh reproduce the error with ResizeObserver enabled
7. I could never reproduce the error using the polyfill

Will open an issue on github.

How i fixed the issue

I added the following import:

import 'zone.js/dist/zone-patch-resize-observer';