fix(http): Include HTTP status code and headers when HTTP requests errored in httpResource

wartab · wartab · commit 424ea3473249 · 2025-04-09T17:52:19.000+02:00
Currently the HTTP status code and headers are only included if the request succeeded. Given status codes convey more information in case of a request error vs. success, this makes it more useful than inspecting what is contained in `.error()`.
diff --git a/packages/common/http/src/resource.ts b/packages/common/http/src/resource.ts
@@ -25,7 +25,7 @@ import {Subscription} from 'rxjs';
 
 import {HttpRequest} from './request';
 import {HttpClient} from './client';
-import {HttpEventType, HttpProgressEvent, HttpResponseBase} from './response';
+import {HttpErrorResponse, HttpEventType, HttpProgressEvent, HttpResponseBase} from './response';
 import {HttpHeaders} from './headers';
 import {HttpParams} from './params';
 import {HttpResourceRef, HttpResourceOptions, HttpResourceRequest} from './resource_api';
@@ -353,7 +353,14 @@ class HttpResourceImpl<T>
                 break;
             }
           },
-          error: (error) => send({error}),
+          error: (error) => {
+            if (error instanceof HttpErrorResponse) {
+              this._headers.set(error.headers);
+              this._statusCode.set(error.status);
+            }
+
+            send({error});
+          },
           complete: () => {
             if (resolve) {
               send({error: new Error('Resource completed before producing a value')});
diff --git a/packages/common/http/test/resource_spec.ts b/packages/common/http/test/resource_spec.ts
@@ -122,6 +122,24 @@ describe('httpResource', () => {
     expect(res.statusCode()).toBe(200);
   });
 
+  it('should return response headers & status when request errored', async () => {
+    const backend = TestBed.inject(HttpTestingController);
+    const res = httpResource(() => '/data', {injector: TestBed.inject(Injector)});
+    TestBed.flushEffects();
+    const req = backend.expectOne('/data');
+    req.flush([], {
+      headers: {
+        'X-Special': '123',
+      },
+      status: 429,
+      statusText: 'Too many requests',
+    });
+    await TestBed.inject(ApplicationRef).whenStable();
+    expect((res.error() as any).error).toEqual([]);
+    expect(res.headers()?.get('X-Special')).toBe('123');
+    expect(res.statusCode()).toBe(429);
+  });
+
   it('should support progress events', async () => {
     const backend = TestBed.inject(HttpTestingController);
     const res = httpResource(
