fix(http): emit error on XMLHttpRequest abort event (#40767)

ItNoN · alxhub · commit 38972653fa56 · 2021-02-10T11:13:05.000-08:00
Before this change, when Google Chrome cancels a XMLHttpRequest, an Observable of the response never finishes. This happens, for example, when you put your computer to sleep or just press Ctrl+S to save the browser page. After this commit, if request is canceled or aborted an appropriate Observable will be completed with an error. Fixes #22324 PR Close #40767
diff --git a/packages/common/http/src/xhr.ts b/packages/common/http/src/xhr.ts
@@ -312,6 +312,7 @@ export class HttpXhrBackend implements HttpBackend {
       xhr.addEventListener('load', onLoad);
       xhr.addEventListener('error', onError);
       xhr.addEventListener('timeout', onError);
+      xhr.addEventListener('abort', onError);
 
       // Progress events are only enabled if requested.
       if (req.reportProgress) {
@@ -333,6 +334,7 @@ export class HttpXhrBackend implements HttpBackend {
       return () => {
         // On a cancellation, remove all registered event listeners.
         xhr.removeEventListener('error', onError);
+        xhr.removeEventListener('abort', onError);
         xhr.removeEventListener('load', onLoad);
         xhr.removeEventListener('timeout', onError);
         if (req.reportProgress) {
diff --git a/packages/common/http/test/xhr_mock.ts b/packages/common/http/test/xhr_mock.ts
@@ -55,6 +55,7 @@ export class MockXMLHttpRequest {
   listeners: {
     error?: (event: ErrorEvent) => void,
     timeout?: (event: ErrorEvent) => void,
+    abort?: () => void,
     load?: () => void,
     progress?: (event: ProgressEvent) => void,
     uploadProgress?: (event: ProgressEvent) => void,
@@ -71,12 +72,13 @@ export class MockXMLHttpRequest {
     this.body = body;
   }
 
-  addEventListener(event: 'error'|'timeout'|'load'|'progress'|'uploadProgress', handler: Function):
-      void {
+  addEventListener(
+      event: 'error'|'timeout'|'load'|'progress'|'uploadProgress'|'abort',
+      handler: Function): void {
     this.listeners[event] = handler as any;
   }
 
-  removeEventListener(event: 'error'|'timeout'|'load'|'progress'|'uploadProgress'): void {
+  removeEventListener(event: 'error'|'timeout'|'load'|'progress'|'uploadProgress'|'abort'): void {
     delete this.listeners[event];
   }
 
@@ -137,6 +139,12 @@ export class MockXMLHttpRequest {
     }
   }
 
+  mockAbortEvent(): void {
+    if (this.listeners.abort) {
+      this.listeners.abort();
+    }
+  }
+
   abort() {
     this.mockAborted = true;
   }
diff --git a/packages/common/http/test/xhr_spec.ts b/packages/common/http/test/xhr_spec.ts
@@ -173,6 +173,13 @@ const XSSI_PREFIX = ')]}\'\n';
       factory.mock.abort = abort;
       factory.mock.mockFlush(HttpStatusCode.Ok, 'OK', 'Done');
     });
+    it('emits an error when browser cancels a request', done => {
+      backend.handle(TEST_POST).subscribe(undefined, (err: HttpErrorResponse) => {
+        expect(err instanceof HttpErrorResponse).toBe(true);
+        done();
+      });
+      factory.mock.mockAbortEvent();
+    });
     describe('progress events', () => {
       it('are emitted for download progress', done => {
         backend.handle(TEST_POST.clone({reportProgress: true}))

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,7 @@ export class MockXMLHttpRequest {`
`55`	`55`	`listeners: {`
`56`	`56`	`error?: (event: ErrorEvent) => void,`
`57`	`57`	`timeout?: (event: ErrorEvent) => void,`
	`58`	`+ abort?: () => void,`
`58`	`59`	`load?: () => void,`
`59`	`60`	`progress?: (event: ProgressEvent) => void,`
`60`	`61`	`uploadProgress?: (event: ProgressEvent) => void,`
`@@ -71,12 +72,13 @@ export class MockXMLHttpRequest {`
`71`	`72`	`this.body = body;`
`72`	`73`	`}`
`73`	`74`
`74`		`- addEventListener(event: 'error'\|'timeout'\|'load'\|'progress'\|'uploadProgress', handler: Function):`
`75`		`- void {`
	`75`	`+ addEventListener(`
	`76`	`+ event: 'error'\|'timeout'\|'load'\|'progress'\|'uploadProgress'\|'abort',`
	`77`	`+ handler: Function): void {`
`76`	`78`	`this.listeners[event] = handler as any;`
`77`	`79`	`}`
`78`	`80`
`79`		`- removeEventListener(event: 'error'\|'timeout'\|'load'\|'progress'\|'uploadProgress'): void {`
	`81`	`+ removeEventListener(event: 'error'\|'timeout'\|'load'\|'progress'\|'uploadProgress'\|'abort'): void {`
`80`	`82`	`delete this.listeners[event];`
`81`	`83`	`}`
`82`	`84`
`@@ -137,6 +139,12 @@ export class MockXMLHttpRequest {`
`137`	`139`	`}`
`138`	`140`	`}`
`139`	`141`
	`142`	`+ mockAbortEvent(): void {`
	`143`	`+ if (this.listeners.abort) {`
	`144`	`+ this.listeners.abort();`
	`145`	`+ }`
	`146`	`+ }`
	`147`	`+`
`140`	`148`	`abort() {`
`141`	`149`	`this.mockAborted = true;`
`142`	`150`	`}`