fix: show an error when pre-request script fails (#1991)

* fix: show an error when pre-request script fails

* refactor: minor ui improvements

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-app/components/http/Request.vue

@@ -185,7 +185,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "@nuxtjs/composition-api"
-import { isRight } from "fp-ts/lib/Either"
+import { isLeft, isRight } from "fp-ts/lib/Either"
 import * as E from "fp-ts/Either"
 import {
   updateRESTResponse,
@@ -273,7 +273,6 @@ const newSendRequest = async () => {
   // Double calling is because the function returns a TaskEither than should be executed
   const streamResult = await runRESTRequest$()()
 
-  // TODO: What if stream fetching failed (script execution errors ?) (isLeft)
   if (isRight(streamResult)) {
     subscribeToStream(
       streamResult.right,
@@ -291,6 +290,19 @@ const newSendRequest = async () => {
         loading.value = false
       }
     )
+  } else if (isLeft(streamResult)) {
+    loading.value = false
+    toast.error(`${t("error.script_fail")}`)
+    let error: Error
+    if (typeof streamResult.left === "string") {
+      error = { name: "RequestFailure", message: streamResult.left }
+    } else {
+      error = streamResult.left
+    }
+    updateRESTResponse({
+      type: "script_fail",
+      error,
+    })
   }
 }
 

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -68,11 +68,38 @@
         <span class="font-semibold text-center mb-2">
           {{ t("error.network_fail") }}
         </span>
-        <span class="max-w-sm text-center text-secondaryLight mb-4">
+        <span
+          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
+        >
           {{ t("helpers.network_fail") }}
         </span>
         <AppInterceptor />
       </div>
+      <div
+        v-if="response.type === 'script_fail'"
+        class="flex flex-col flex-1 p-4 items-center justify-center"
+      >
+        <img
+          :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
+          loading="lazy"
+          class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
+          :alt="`${t('error.script_fail')}`"
+        />
+        <span class="font-semibold text-center mb-2">
+          {{ t("error.script_fail") }}
+        </span>
+        <span
+          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
+        >
+          {{ t("helpers.script_fail") }}
+        </span>
+        <div
+          class="bg-primaryLight rounded font-mono w-full py-2 px-4 text-red-400 overflow-auto whitespace-normal"
+        >
+          {{ response.error.name }}: {{ response.error.message }}<br />
+          {{ response.error.stack }}
+        </div>
+      </div>
       <div
         v-if="response.type === 'success' || 'fail'"
         :class="statusCategory.className"