Add error handling around await response.json() call

This is to catch cases where they return `content-type: application/json` but do not return valid JSON

We have to clone the object first before we parse, as the objects can only be read once

packages/api-explorer/__tests__/lib/parse-response.test.js

@@ -137,3 +137,13 @@ test('should parse non-json response as text', async () => {
     nonJsonResponseBody,
   );
 });
+
+test('should not error if invalid json is returned', async () => {
+  const invalidJsonResponse = new Response('plain text', {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  expect((await codeSampleResponse(har, invalidJsonResponse)).responseBody).toEqual('plain text');
+});

packages/api-explorer/src/lib/parse-response.js

@@ -13,6 +13,18 @@ async function parseResponse(har, response) {
   const querystring =
     Object.keys(convertedQueryString).length > 0 ? `?${stringify(convertedQueryString)}` : '';
 
+  let responseBody;
+  // We have to clone it before reading, just incase
+  // we cannot parse it as JSON later, then we can
+  // re-read again as plain text
+  const clonedResponse = response.clone();
+
+  try {
+    responseBody = await response[isJson ? 'json' : 'text']();
+  } catch (e) {
+    responseBody = await clonedResponse.text();
+  }
+
   return {
     method: har.log.entries[0].request.method,
     requestHeaders: har.log.entries[0].request.headers.map(
@@ -24,7 +36,7 @@ async function parseResponse(har, response) {
     isBinary: !!(contentDisposition && contentDisposition.match(/attachment/)),
     url: har.log.entries[0].request.url.replace('https://try.readme.io/', '') + querystring,
     status: response.status,
-    responseBody: await response[isJson ? 'json' : 'text'](),
+    responseBody,
   };
 }