feat: verbose Failed to fetch error (#6938)

* feat: verbose Failed to fetch error

* refactor: disable console.error in src/core/plugins/spec/actions.js

Co-authored-by: Tim Lai <timothy.lai@gmail.com>

src/core/components/live-response.jsx

@@ -69,6 +69,7 @@ export default class LiveResponse extends React.Component {
       return <span className="headerline" key={key}> {key}: {joinedHeaders} </span>
     })
     const hasHeaders = returnObject.length !== 0
+    const Markdown = getComponent("Markdown", true)
 
     return (
       <div>
@@ -101,9 +102,7 @@ export default class LiveResponse extends React.Component {
               </td>
               <td className="response-col_description">
                 {
-                  isError ? <span>
+                  isError ? <Markdown source={`${response.get("name") !== "" ? `${response.get("name")}: ` : ""}${response.get("message")}`}/>
-                              {`${response.get("name")}: ${response.get("message")}`}
-                            </span>
                           : null
                 }
                 {

src/core/plugins/spec/actions.js

@@ -256,7 +256,7 @@ export const requestResolvedSubtree = path => system => {
   const isPathAlreadyBatched = requestBatch
     .map(arr => arr.join("@@"))
     .indexOf(path.join("@@")) > -1
-  
+
   if(isPathAlreadyBatched) {
     return
   }
@@ -376,9 +376,9 @@ export const executeRequest = (req) =>
     let { pathName, method, operation } = req
     let { requestInterceptor, responseInterceptor } = getConfigs()
 
-    
+
     let op = operation.toJS()
-    
+
     // ensure that explicitly-included params are in the request
 
     if (operation && operation.get("parameters")) {
@@ -439,8 +439,8 @@ export const executeRequest = (req) =>
             }
           )
           .filter(
-            (value, key) => (Array.isArray(value) 
+            (value, key) => (Array.isArray(value)
-              ? value.length !== 0 
+              ? value.length !== 0
               : !isEmptyValue(value)
             ) || requestBodyInclusionSetting.get(key)
           )
@@ -476,7 +476,11 @@ export const executeRequest = (req) =>
     } )
     .catch(
       err => {
-        console.error(err)
+        // console.error(err)
+        if(err.message === "Failed to fetch") {
+          err.name = ""
+          err.message = "**Failed to fetch.**  \n**Possible Reasons:** \n  - CORS \n  - Network Failure \n  - URL scheme must be \"http\" or \"https\" for CORS request."
+        }
         specActions.setResponse(req.pathName, req.method, {
           error: true, err: serializeError(err)
         })