Zone.js does not properly handle AbortSignal in addEventListener

[DavidANeil]

Which @angular/* package(s) are the source of the bug?

zone.js

Is this a regression?

No

Description

Zone.js tries to be clever and creates a single handler for all listeners to the same event on the same target that have the same capture setting.

However, with the somewhat recent addition of the signal setting, this means that handlers can improperly registered, consider the following two tests:

const controller = new AbortController();
window.addEventListener('myEvent', () => console.log('expected'));
window.addEventListener('myEvent', () => console.log('unexpected'), {signal: controller.signal});
controller.abort();
window.dispatchEvent(new Event('myEvent'));
// LOG: 'expected'
// LOG: 'unexpected'

const controller = new AbortController();
window.addEventListener('myEvent', () => console.log('unexpected'), {signal: controller.signal});
window.addEventListener('myEvent', () => console.log('expected'));
controller.abort();
window.dispatchEvent(new Event('myEvent'));
// nothing logs

If zone.js is not installed, only 'expected' is logged in each case.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

No response

Anything else?

No response

[DavidANeil]

These are the Jasmine tests I'm not using to make sure this doesn't break for us again:

    it('should cancel secondary listeners that are aborted', () => {
        const controller = new AbortController();
        const spy1 = jasmine.createSpy('spy1');
        const spy2 = jasmine.createSpy('spy2');
        const target = new EventTarget();
        target.addEventListener('myEvent', spy1);
        target.addEventListener('myEvent', spy2, {signal: controller.signal});
        controller.abort();
        target.dispatchEvent(new Event('myEvent'));

        expect(spy1).toHaveBeenCalled();
        expect(spy2).not.toHaveBeenCalled();
    });

    it('should not cancel secondary listeners that are not aborted', () => {
        const controller = new AbortController();
        const spy1 = jasmine.createSpy('spy1');
        const spy2 = jasmine.createSpy('spy2');
        const target = new EventTarget();
        target.addEventListener('myEvent', spy1, {signal: controller.signal});
        target.addEventListener('myEvent', spy2);
        controller.abort();
        target.dispatchEvent(new Event('myEvent'));

        expect(spy1).not.toHaveBeenCalled();
        expect(spy2).toHaveBeenCalled();
    });

And I have just used this patch to workaround the issue by basically opting out of Zone entirely:

diff --git a/node_modules/zone.js/dist/zone.js b/node_modules/zone.js/dist/zone.js
index f7c28f6..87d9b43 100755
--- a/node_modules/zone.js/dist/zone.js
+++ b/node_modules/zone.js/dist/zone.js
@@ -1876,6 +1876,9 @@
                     if (!delegate) {
                         return nativeListener.apply(this, arguments);
                     }
+                    if (typeof arguments[2] === 'object' && typeof arguments[2].signal !== 'undefined') {
+                        return nativeListener.apply(this, arguments);
+                    }
                     if (isNode && eventName === 'uncaughtException') {
                         // don't patch uncaughtException of nodejs to prevent endless loop
                         return nativeListener.apply(this, arguments);

Someone who knows more about Zone.js might be able to do something better.

[JiaLiPassion]

@DavidANeil , thank you for posting the issue, I will check it.

[LinhTT46]

Thanks @JiaLiPassion for fixing this issue. However, please take a look at the commit, it seems like it is not deployed.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}