Fix: malformed json error (#3107)

* create json validator function * make message more readable * show response alongside warning
microsoftgraph · Apr 30, 2024 · 38c3849 · 38c3849
1 parent a84d7a4
commit 38c3849
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 40 deletions.
diff --git a/src/app/services/actions/query-action-creator-util.ts b/src/app/services/actions/query-action-creator-util.ts
@@ -221,6 +221,14 @@ export async function generateResponseDownloadUrl(
   }
 }
 
+async function tryParseJson(textValue: string) {
+  try {
+    return JSON.parse(textValue);
+  } catch (error) {
+    return textValue;
+  }
+}
+
 export function parseResponse(
   response: any,
   respHeaders: any = {}
@@ -233,7 +241,7 @@ export function parseResponse(
     const contentType = getContentType(response.headers);
     switch (contentType) {
       case ContentType.Json:
-        return response.json();
+        return response.text().then(tryParseJson);
       case ContentType.XML:
       case ContentType.HTML:
       case ContentType.TextCsv:

diff --git a/src/app/services/actions/query-action-creators.ts b/src/app/services/actions/query-action-creators.ts
@@ -145,8 +145,8 @@ export function runQuery(query: IQuery) {
     };
 
     if (error instanceof ClientError) {
-      status.status = 0;
-      status.statusText = `${error.name}: ${error.message}`;
+      status.status = error.message;
+      status.statusText = error.name;
     }
 
     if (queryResultsInCorsError(query.sampleUrl)) {

diff --git a/src/app/views/query-response/response/Response.tsx b/src/app/views/query-response/response/Response.tsx
@@ -1,28 +1,29 @@
 
-import { useDispatch } from 'react-redux';
 
-import { AppDispatch, useAppSelector } from '../../../../store';
+import { useAppSelector } from '../../../../store';
 import { getContentType } from '../../../services/actions/query-action-creator-util';
-import { convertVhToPx, getResponseEditorHeight,
-  getResponseHeight } from '../../common/dimensions/dimensions-adjustment';
+import {
+  convertVhToPx, getResponseEditorHeight,
+  getResponseHeight
+} from '../../common/dimensions/dimensions-adjustment';
 import ResponseDisplay from './ResponseDisplay';
 import { ResponseMessages } from './ResponseMessages';
 
 const Response = () => {
-  const { dimensions: { response }, graphResponse, responseAreaExpanded, sampleQuery, authToken, graphExplorerMode } =
+  const { dimensions: { response }, graphResponse, responseAreaExpanded} =
     useAppSelector((state) => state);
   const { body, headers } = graphResponse;
-  const dispatch: AppDispatch = useDispatch();
 
   const defaultHeight = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 220);
   const monacoHeight = getResponseEditorHeight(150);
 
   const contentDownloadUrl = body?.contentDownloadUrl;
   const throwsCorsError = body?.throwsCorsError;
   const contentType = getContentType(headers);
+
   return (
     <div style={{ display: 'block' }}>
-      {ResponseMessages(graphResponse, sampleQuery, authToken, graphExplorerMode, dispatch)}
+      <ResponseMessages />
       {!contentDownloadUrl && !throwsCorsError && headers &&
         <ResponseDisplay
           contentType={contentType}

diff --git a/src/app/views/query-response/response/ResponseMessages.tsx b/src/app/views/query-response/response/ResponseMessages.tsx
@@ -1,10 +1,11 @@
 import { Link, MessageBar, MessageBarType } from '@fluentui/react';
 import { useState } from 'react';
-import { IAuthenticateResult } from '../../../../types/authentication';
-import { Mode } from '../../../../types/enums';
-import { IGraphResponse } from '../../../../types/query-response';
+import { useDispatch } from 'react-redux';
 
+import { AppDispatch, useAppSelector } from '../../../../store';
+import { Mode } from '../../../../types/enums';
 import { IQuery } from '../../../../types/query-runner';
+import { getContentType } from '../../../services/actions/query-action-creator-util';
 import { runQuery } from '../../../services/actions/query-action-creators';
 import { setSampleQuery } from '../../../services/actions/query-input-action-creators';
 import { MOZILLA_CORS_DOCUMENTATION_LINK } from '../../../services/graph-constants';
@@ -15,31 +16,32 @@ interface ODataLink {
   name: string;
 }
 
-export function ResponseMessages(
-  graphResponse: IGraphResponse,
-  sampleQuery: IQuery,
-  authToken: IAuthenticateResult,
-  graphExplorerMode: Mode,
-  dispatch: Function) {
-
-  function getOdataLinkFromResponseBody(responseBody: any): ODataLink | null {
-    const odataLinks = ['nextLink', 'deltaLink'];
-    let data = null;
-    if (responseBody) {
-      odataLinks.forEach(link => {
-        if (responseBody[`@odata.${link}`]) {
-          data = {
-            link: responseBody[`@odata.${link}`],
-            name: link
-          };
-        }
-      });
-    }
-    return data;
+function getOdataLinkFromResponseBody(responseBody: any): ODataLink | null {
+  const odataLinks = ['nextLink', 'deltaLink'];
+  let data = null;
+  if (responseBody) {
+    odataLinks.forEach(link => {
+      if (responseBody[`@odata.${link}`]) {
+        data = {
+          link: responseBody[`@odata.${link}`],
+          name: link
+        };
+      }
+    });
   }
+  return data;
+}
+
+export const ResponseMessages = () => {
+  const dispatch: AppDispatch = useDispatch();
+  const messageBars = [];
+
+  const { graphResponse: { body, headers }, sampleQuery, authToken, graphExplorerMode
+  } = useAppSelector((state) => state);
   const [displayMessage, setDisplayMessage] = useState(true);
+
   const tokenPresent = !!authToken.token;
-  const { body } = graphResponse;
+  const contentType = getContentType(headers);
   const odataLink = getOdataLinkFromResponseBody(body);
 
   const setQuery = () => {
@@ -51,7 +53,7 @@ export function ResponseMessages(
 
   // Display link to step to next result
   if (odataLink) {
-    return (
+    messageBars.push(
       <MessageBar messageBarType={MessageBarType.info}>
         {translateMessage('This response contains an @odata property.')}: @odata.{odataLink.name}
         <Link onClick={() => setQuery()} underline>
@@ -63,7 +65,7 @@ export function ResponseMessages(
 
   // Display link to download file response
   if (body?.contentDownloadUrl) {
-    return (
+    messageBars.push(
       <div>
         <MessageBar messageBarType={MessageBarType.warning}>
           {translateMessage('This response contains unviewable content')}
@@ -77,7 +79,7 @@ export function ResponseMessages(
 
   // Show CORS compliance message
   if (body?.throwsCorsError) {
-    return (
+    messageBars.push(
       <div>
         <MessageBar messageBarType={MessageBarType.warning}>
           {translateMessage('Response content not available due to CORS policy')}
@@ -90,7 +92,7 @@ export function ResponseMessages(
   }
 
   if (body && !tokenPresent && displayMessage && graphExplorerMode === Mode.Complete) {
-    return (
+    messageBars.push(
       <div>
         <MessageBar
           messageBarType={MessageBarType.warning}
@@ -104,4 +106,20 @@ export function ResponseMessages(
       </div>
     );
   }
-}
+
+  if (contentType === 'application/json' && typeof body === 'string') {
+    messageBars.push(
+      <div>
+        <MessageBar
+          messageBarType={MessageBarType.info}
+          onDismiss={() => setDisplayMessage(false)}
+          dismissButtonAriaLabel={translateMessage('Close')}
+        >
+          {translateMessage('Malformed JSON body')}
+        </MessageBar>
+      </div>
+    );
+  }
+
+  return messageBars;
+}