2019-05-31 11:56:07 -04:00
|
|
|
/**
|
|
|
|
* @license
|
2020-05-19 15:08:49 -04:00
|
|
|
* Copyright Google LLC All Rights Reserved.
|
2019-05-31 11:56:07 -04:00
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
|
|
|
import {patchEventTarget} from '../common/events';
|
|
|
|
|
fix(zone.js): should continue to executue listeners when throw error (#41562)
Close #41522
`zone.js` patches event listeners and run all event listeners together, if
one event handler throws error, the listeners afterward may not be invoked.
Reproduction:
```
export class AppComponent implements AfterViewInit {
@ViewChild('btn') btn: ElementRef;
title = 'event-error';
constructor(private ngZone: NgZone) {}
ngAfterViewInit() {
this.ngZone.runOutsideAngular(() => {
this.btn.nativeElement.addEventListener('click', () => {
throw new Error('test1');
});
this.btn.nativeElement.addEventListener('click', () => {
console.log('add eventlistener click');
});
});
}
}
```
Until now no Angular users report this issue becuase in the `ngZone`, all
error will be caught and will not rethrow, so the event listeners afterward
will still continue to execute, but if the event handlers are outside of `ngZone`,
the error will break the execution.
This commit catch all errors, and after all event listeners finished invocation,
rethrow the errors in seperate `microTasks`, the reason I am using `microTask` here
is to handle multiple errors case.
PR Close #41562
2021-04-11 02:19:23 -04:00
|
|
|
Zone.__load_patch('EventEmitter', (global: any, Zone: ZoneType, api: _ZonePrivate) => {
|
2019-05-31 11:56:07 -04:00
|
|
|
// For EventEmitter
|
|
|
|
const EE_ADD_LISTENER = 'addListener';
|
|
|
|
const EE_PREPEND_LISTENER = 'prependListener';
|
|
|
|
const EE_REMOVE_LISTENER = 'removeListener';
|
|
|
|
const EE_REMOVE_ALL_LISTENER = 'removeAllListeners';
|
|
|
|
const EE_LISTENERS = 'listeners';
|
|
|
|
const EE_ON = 'on';
|
2020-06-30 18:15:22 -04:00
|
|
|
const EE_OFF = 'off';
|
2019-05-31 11:56:07 -04:00
|
|
|
|
|
|
|
const compareTaskCallbackVsDelegate = function(task: any, delegate: any) {
|
|
|
|
// same callback, same capture, same event name, just return
|
|
|
|
return task.callback === delegate || task.callback.listener === delegate;
|
|
|
|
};
|
|
|
|
|
|
|
|
const eventNameToString = function(eventName: string|Symbol) {
|
|
|
|
if (typeof eventName === 'string') {
|
2019-10-09 11:17:52 -04:00
|
|
|
return eventName;
|
2019-05-31 11:56:07 -04:00
|
|
|
}
|
|
|
|
if (!eventName) {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
return eventName.toString().replace('(', '_').replace(')', '_');
|
|
|
|
};
|
|
|
|
|
|
|
|
function patchEventEmitterMethods(obj: any) {
|
fix(zone.js): should continue to executue listeners when throw error (#41562)
Close #41522
`zone.js` patches event listeners and run all event listeners together, if
one event handler throws error, the listeners afterward may not be invoked.
Reproduction:
```
export class AppComponent implements AfterViewInit {
@ViewChild('btn') btn: ElementRef;
title = 'event-error';
constructor(private ngZone: NgZone) {}
ngAfterViewInit() {
this.ngZone.runOutsideAngular(() => {
this.btn.nativeElement.addEventListener('click', () => {
throw new Error('test1');
});
this.btn.nativeElement.addEventListener('click', () => {
console.log('add eventlistener click');
});
});
}
}
```
Until now no Angular users report this issue becuase in the `ngZone`, all
error will be caught and will not rethrow, so the event listeners afterward
will still continue to execute, but if the event handlers are outside of `ngZone`,
the error will break the execution.
This commit catch all errors, and after all event listeners finished invocation,
rethrow the errors in seperate `microTasks`, the reason I am using `microTask` here
is to handle multiple errors case.
PR Close #41562
2021-04-11 02:19:23 -04:00
|
|
|
const result = patchEventTarget(global, api, [obj], {
|
2019-05-31 11:56:07 -04:00
|
|
|
useG: false,
|
|
|
|
add: EE_ADD_LISTENER,
|
|
|
|
rm: EE_REMOVE_LISTENER,
|
|
|
|
prepend: EE_PREPEND_LISTENER,
|
|
|
|
rmAll: EE_REMOVE_ALL_LISTENER,
|
|
|
|
listeners: EE_LISTENERS,
|
|
|
|
chkDup: false,
|
|
|
|
rt: true,
|
|
|
|
diff: compareTaskCallbackVsDelegate,
|
|
|
|
eventNameToString: eventNameToString
|
|
|
|
});
|
|
|
|
if (result && result[0]) {
|
|
|
|
obj[EE_ON] = obj[EE_ADD_LISTENER];
|
2020-06-30 18:15:22 -04:00
|
|
|
obj[EE_OFF] = obj[EE_REMOVE_LISTENER];
|
2019-05-31 11:56:07 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// EventEmitter
|
|
|
|
let events;
|
|
|
|
try {
|
|
|
|
events = require('events');
|
|
|
|
} catch (err) {
|
|
|
|
}
|
|
|
|
|
|
|
|
if (events && events.EventEmitter) {
|
|
|
|
patchEventEmitterMethods(events.EventEmitter.prototype);
|
|
|
|
}
|
|
|
|
});
|