Show graphql error message (#1852)

Co-authored-by: StephaneBischoffSSENSE <stephane.bischoff@ssense.com>
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -447,12 +447,15 @@ const runQuery = async () => {
       icon: "done",
     })
   } catch (e: any) {
-    response.value = `${e}. ${t("error.check_console_details")}`
+    response.value = `${e}`
     nuxt.value.$loading.finish()
 
-    $toast.error(`${e} ${t("error.f12_details")}`, {
-      icon: "error_outline",
-    })
+    $toast.error(
+      `${t("error.something_went_wrong")}. ${t("error.check_console_details")}`,
+      {
+        icon: "error_outline",
+      }
+    )
     console.error(e)
   }
 

packages/hoppscotch-app/helpers/strategies/AxiosStrategy.js

@@ -1,6 +1,7 @@
 import axios from "axios"
 import { decodeB64StringToArrayBuffer } from "../utils/b64"
 import { settingsStore } from "~/newstore/settings"
+import { JsonFormattedError } from "~/helpers/utils/JsonFormattedError"
 
 let cancelSource = axios.CancelToken.source()
 
@@ -39,7 +40,6 @@ const axiosWithProxy = async (req) => {
       // eslint-disable-next-line no-throw-literal
       throw "cancellation"
     } else {
-      console.error(e)
       throw e
     }
   }
@@ -52,14 +52,16 @@ const axiosWithoutProxy = async (req, _store) => {
       cancelToken: (cancelSource && cancelSource.token) || "",
       responseType: "arraybuffer",
     })
-
     return res
   } catch (e) {
     if (axios.isCancel(e)) {
       // eslint-disable-next-line no-throw-literal
       throw "cancellation"
+    } else if (e.response?.data) {
+      throw new JsonFormattedError(
+        JSON.parse(Buffer.from(e.response.data, "base64").toString("utf8"))
+      )
     } else {
-      console.error(e)
       throw e
     }
   }

packages/hoppscotch-app/helpers/strategies/__tests__/AxiosStrategy-NoProxy.spec.js

@@ -1,5 +1,6 @@
 import axios from "axios"
 import axiosStrategy from "../AxiosStrategy"
+import { JsonFormattedError } from "~/helpers/utils/JsonFormattedError"
 
 jest.mock("axios")
 jest.mock("~/newstore/settings", () => {
@@ -42,18 +43,34 @@ describe("axiosStrategy", () => {
       await expect(axiosStrategy({})).resolves.toBeDefined()
     })
 
-    test("rejects cancel errors with text 'cancellation'", () => {
+    test("rejects cancel errors with text 'cancellation'", async () => {
       axios.isCancel.mockReturnValueOnce(true)
       axios.mockRejectedValue("err")
 
-      expect(axiosStrategy({})).rejects.toBe("cancellation")
+      await expect(axiosStrategy({})).rejects.toBe("cancellation")
     })
 
-    test("rejects non-cancellation errors as-is", () => {
+    test("rejects non-cancellation errors as-is", async () => {
       axios.isCancel.mockReturnValueOnce(false)
       axios.mockRejectedValue("err")
 
-      expect(axiosStrategy({})).rejects.toBe("err")
+      await expect(axiosStrategy({})).rejects.toBe("err")
+    })
+
+    test("non-cancellation errors that have response data are thrown", async () => {
+      const errorResponse = { error: "errr" }
+      axios.isCancel.mockReturnValueOnce(false)
+      axios.mockRejectedValue({
+        response: {
+          data: Buffer.from(JSON.stringify(errorResponse), "utf8").toString(
+            "base64"
+          ),
+        },
+      })
+
+      await expect(axiosStrategy({})).rejects.toMatchObject(
+        new JsonFormattedError(errorResponse)
+      )
     })
   })
 })

packages/hoppscotch-app/helpers/utils/JsonFormattedError.ts

@@ -0,0 +1,5 @@
+export class JsonFormattedError extends Error {
+  constructor(jsonObject: any) {
+    super(JSON.stringify(jsonObject, null, 2))
+  }
+}