fix(http): propagate plain errors when parsing fails (#62765)

sbarfurth · thePunderWoman · commit 15670d841744 · 2025-07-24T09:23:24.000Z
The fetch backend now propagates the plain body when parsing the body fails. This replicates the behavior of the XHR backend introduced in #19773. The current state completely obfuscates errors of the "wrong" response type. However, it's not uncommon for successful requests to return one type and errors to return another type. Propagating the plain error allows downstream error consumers to reason about the error body and decide how to parse it depending on application needs. PR Close #62765
diff --git a/packages/common/http/src/fetch.ts b/packages/common/http/src/fetch.ts
@@ -244,7 +244,7 @@ export class FetchBackend implements HttpBackend {
       const chunksAll = this.concatChunks(chunks, receivedLength);
       try {
         const contentType = response.headers.get(CONTENT_TYPE_HEADER) ?? '';
-        body = this.parseBody(request, chunksAll, contentType);
+        body = this.parseBody(request, chunksAll, contentType, status);
       } catch (error) {
         // Body loading or parsing failed
         observer.error(
@@ -302,12 +302,27 @@ export class FetchBackend implements HttpBackend {
     request: HttpRequest<any>,
     binContent: Uint8Array,
     contentType: string,
+    status: number,
   ): string | ArrayBuffer | Blob | object | null {
     switch (request.responseType) {
       case 'json':
         // stripping the XSSI when present
         const text = new TextDecoder().decode(binContent).replace(XSSI_PREFIX, '');
-        return text === '' ? null : (JSON.parse(text) as object);
+        if (text === '') {
+          return null;
+        }
+        try {
+          return JSON.parse(text) as object;
+        } catch (e: unknown) {
+          // Allow handling non-JSON errors (!) as plain text, same as the XHR
+          // backend. Without this special sauce, any non-JSON error would be
+          // completely inaccessible downstream as the `HttpErrorResponse.error`
+          // would be set to the `SyntaxError` from then failing `JSON.parse`.
+          if (status < 200 || status >= 300) {
+            return text;
+          }
+          throw e;
+        }
       case 'text':
         return new TextDecoder().decode(binContent);
       case 'blob':
diff --git a/packages/common/http/test/fetch_spec.ts b/packages/common/http/test/fetch_spec.ts
@@ -213,6 +213,15 @@ describe('FetchBackend', async () => {
     expect(res.error.data).toBe('some data');
   });
 
+  it('handles a text error response when a json success response was expected', async () => {
+    const promise = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+    fetchMock.mockFlush(HttpStatusCode.InternalServerError, 'Error', 'simple text error');
+    const events = await promise;
+    expect(events.length).toBe(2);
+    const res = events[1] as any as HttpErrorResponse;
+    expect(res.error).toBe('simple text error');
+  });
+
   it('handles a json error response with XSSI prefix', async () => {
     const promise = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
     fetchMock.mockFlush(
@@ -226,6 +235,19 @@ describe('FetchBackend', async () => {
     expect(res.error.data).toBe('some data');
   });
 
+  it('handles a text error response with XSSI prefix when a json success response was expected', async () => {
+    const promise = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+    fetchMock.mockFlush(
+      HttpStatusCode.InternalServerError,
+      'Error',
+      XSSI_PREFIX + 'simple text error',
+    );
+    const events = await promise;
+    expect(events.length).toBe(2);
+    const res = events[1] as any as HttpErrorResponse;
+    expect(res.error).toBe('simple text error');
+  });
+
   it('handles a json string response', async () => {
     const promise = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
     fetchMock.mockFlush(HttpStatusCode.Ok, 'OK', JSON.stringify('this is a string'));
