Unable to find the source of setTimeout() with a huge delay (99999000) - zone.js macrotask Angular 17

68 Views Asked by At

I am trying to get rid of a warning in my Angular 17 app:

NG0506: Angular hydration expected the ApplicationRef.isStable() to emit true, but it didn't happen within 10000ms. Angular hydration logic depends on the application becoming stable as a signal to complete hydration process. Find more at https://angular.io/errors/NG0506

Using zone.js TaskTrackingZone, I noticed 2 macrotasks are present - I don't have those in my app (checked all node_modules and dist folders as well).

Probably because of them, my app is not stable.

I can't copy the object :o here is the screenshot and copied error:

enter image description here

Error: Task 'macroTask' from 'setTimeout'.
    at TaskTrackingZoneSpec.onScheduleTask (http://localhost:4000/vendor.9f6cd70fedaa13b7.js:58544:32)
    at _ZoneDelegate.scheduleTask (http://localhost:4000/polyfills.fdfe3409afcd3961.js:433:43)
    at Object.onScheduleTask (http://localhost:4000/polyfills.fdfe3409afcd3961.js:350:61)
    at _ZoneDelegate.scheduleTask (http://localhost:4000/polyfills.fdfe3409afcd3961.js:433:43)
    at Zone.scheduleTask (http://localhost:4000/polyfills.fdfe3409afcd3961.js:291:35)
    at Zone.scheduleMacroTask (http://localhost:4000/polyfills.fdfe3409afcd3961.js:313:19)
    at scheduleMacroTaskWithCurrentZone (http://localhost:4000/polyfills.fdfe3409afcd3961.js:721:23)
    at http://localhost:4000/polyfills.fdfe3409afcd3961.js:2415:20

If I console.log this:

 this.zone.onMicrotaskEmpty.subscribe(() => {
        console.log('Microtasks are empty');
        console.log('Macro :  ' + this.zone.hasPendingMacrotasks);
    });

    this.zone.onStable.subscribe(() => {
        console.log('Application is stable');
    });

    this.zone.onUnstable.subscribe(() => {
        console.log('Application is unstable');
    });

I see this in my console:

enter image description here

I am not sure if this is something I should worry about? I guess this is the reason why my view is not updating after render (on page load I have both 'desktop' and 'mobile' views). It only happens with SSR.

What interesting, Angular says that is stable and then I see this warning: (see first ald last line)

enter image description here

Thank you!

2

There are 2 best solutions below

0
newbe On

I found these timeouts in a very old socket.io file!

0
CaspianTerrazzo On

To find these you can temporarily trace them, by overwriting the global settimout function with a wrapped function of set timeout like so:

const timeout = setTimeout;
window.setTimeout = (fn,millis) => {
    console.trace("called with millis",millis); //this will point to the exact location
    timeout(fn,millis)
}

This should print something like:

setTimeout(() => console.log("hello"),500)

Result:
// called with millis 500
window.setTimeout   @   VM1320:2
(anonym)