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>
-                              {`${response.get("name")}: ${response.get("message")}`}
-                            </span>
+                  isError ? <Markdown source={`${response.get("name") !== "" ? `${response.get("name")}: ` : ""}${response.get("message")}`}/>
                           : null
                 }
                 {

src/core/plugins/spec/actions.js

@@ -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)
         })