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/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"