fix(http): keep the response text when a JSON response fails to parse with fetch

When a 2xx response with `responseType: 'json'` could not be parsed,
FetchBackend reported the bare `SyntaxError` as `HttpErrorResponse.error`,
so the response body was lost. HttpXhrBackend reports
`{error, text}` in this case, which lets apps show or log the body (for
example an HTML maintenance page returned with status 200).

Report the same `{error, text}` shape from FetchBackend, keeping the
original text including any XSSI prefix, as the XHR backend does.

Author: MeAkib

packages/common/http/src/fetch.ts

@@ -28,6 +28,7 @@ import {
   HttpEvent,
   HttpEventType,
   HttpHeaderResponse,
+  HttpJsonParseError,
   HttpResponse,
 } from './response';
 
@@ -342,8 +343,9 @@ export class FetchBackend implements HttpBackend {
   ): string | ArrayBuffer | Blob | object | null {
     switch (request.responseType) {
       case 'json':
+        const originalText = new TextDecoder().decode(binContent);
         // stripping the XSSI when present
-        const text = new TextDecoder().decode(binContent).replace(XSSI_PREFIX, '');
+        const text = originalText.replace(XSSI_PREFIX, '');
         if (text === '') {
           return null;
         }
@@ -357,7 +359,8 @@ export class FetchBackend implements HttpBackend {
           if (status < 200 || status >= 300) {
             return text;
           }
-          throw e;
+          // Like the XHR backend, keep the body that failed to parse.
+          throw {error: e, text: originalText} as HttpJsonParseError;
         }
       case 'text':
         return getTextDecoder(contentType).decode(binContent);

packages/common/http/test/fetch_spec.ts

@@ -297,6 +297,26 @@ describe('FetchBackend', () => {
     expect(res.error).toBe('simple text error');
   });
 
+  it('keeps the response text when a json success response fails to parse', async () => {
+    const promise = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+    fetchMock.mockFlush(HttpStatusCode.Ok, 'OK', '<html>Service unavailable</html>');
+    const events = await promise;
+    expect(events.length).toBe(2);
+    const res = events[1] as any as HttpErrorResponse;
+    expect(res.status).toBe(HttpStatusCode.Ok);
+    expect(res.error.error).toBeInstanceOf(SyntaxError);
+    expect(res.error.text).toBe('<html>Service unavailable</html>');
+  });
+
+  it('keeps the XSSI prefix in the text when a json success response fails to parse', async () => {
+    const promise = trackEvents(backend.handle(TEST_POST.clone({responseType: 'json'})));
+    fetchMock.mockFlush(HttpStatusCode.Ok, 'OK', XSSI_PREFIX + 'not json');
+    const events = await promise;
+    const res = events[1] as any as HttpErrorResponse;
+    expect(res.error.error).toBeInstanceOf(SyntaxError);
+    expect(res.error.text).toBe(XSSI_PREFIX + 'not json');
+  });
+
   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'));