From fdca86ffd2fe6c13f5f845372b37606ae87bb7cd Mon Sep 17 00:00:00 2001
From: therealrinku <rinkunited2032@gmail.com>
Date: Mon, 9 Oct 2023 12:33:10 +0545
Subject: [PATCH 1/2] showing error response in response tab instead of alert
 message

---
 .../ResponsePane/Overlay/StyledWrapper.js     |  2 +-
 .../src/components/ResponsePane/index.js      |  9 ++++++--
 .../ReduxStore/slices/collections/actions.js  | 21 ++++++++++---------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
index 68779c3c2..02ec6f4f7 100644
--- a/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   position: absolute;
   z-index: 1;
-  height: 100vh;
+  height: 75vh;
   background-color: ${(props) => props.theme.requestTabPanel.responseOverlayBg};
 
   div.overlay {
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index e38538145..81e0805c2 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -116,8 +116,13 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
         ) : null}
       </div>
       <section className={`flex flex-grow ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}>
-        {isLoading ? <Overlay item={item} collection={collection} /> : null}
-        {getTabPanel(focusedTab.responsePaneTab)}
+        {isLoading && <Overlay item={item} collection={collection} />}
+
+        {response.isError ? (
+          <span className="mt-5 px-5 text-red-500">{response.error}</span>
+        ) : (
+          getTabPanel(focusedTab.responsePaneTab)
+        )}
       </section>
     </StyledWrapper>
   );
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
index 42b8318ac..5cc3870dd 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
@@ -117,22 +117,23 @@ export const sendRequest = (item, collectionUid) => (dispatch, getState) => {
       })
       .then(resolve)
       .catch((err) => {
+        const errorMessage = err.message ?? 'Something went wrong';
+
+        const errorResponse = {
+          status: 'Error',
+          isError: true,
+          error: errorMessage,
+          size: '0',
+          duration: '0'
+        };
+
         dispatch(
           responseReceived({
             itemUid: item.uid,
             collectionUid: collectionUid,
-            response: null
+            response: errorResponse
           })
         );
-
-        if (err && err.message === "Error invoking remote method 'send-http-request': Error: Request cancelled") {
-          console.log('>> request cancelled');
-          return;
-        }
-
-        console.log('>> sending request failed');
-        console.log(err);
-        toast.error(err ? err.message : 'Something went wrong!');
       });
   });
 };

From 571b4459ac73b27937bc769a41dec9b5ae07197a Mon Sep 17 00:00:00 2001
From: therealrinku <rinkunited2032@gmail.com>
Date: Tue, 10 Oct 2023 10:51:45 +0545
Subject: [PATCH 2/2] update: showing error in queryresult component

---
 .../src/components/ResponsePane/QueryResult/index.js         | 4 ++--
 packages/bruno-app/src/components/ResponsePane/index.js      | 1 +
 .../src/providers/ReduxStore/slices/collections/actions.js   | 5 +++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
index d77d09951..b63fd6f77 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -11,7 +11,7 @@ import StyledWrapper from './StyledWrapper';
 import { useState } from 'react';
 import { useMemo } from 'react';
 
-const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers }) => {
+const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers, error }) => {
   const { storedTheme } = useTheme();
   const [tab, setTab] = useState('preview');
   const dispatch = useDispatch();
@@ -113,7 +113,7 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
       <div className="flex justify-end gap-2 text-xs" role="tablist">
         {getTabs()}
       </div>
-      {activeResult}
+      {error ? <span className="text-red-500">{error}</span> : activeResult}
     </StyledWrapper>
   );
 };
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index 3e24c61b8..629d8516c 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -42,6 +42,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             width={rightPaneWidth}
             data={response.data}
             headers={response.headers}
+            error={response.error}
           />
         );
       }
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
index 9dbf91bcf..8ed1136a3 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
@@ -140,6 +140,11 @@ export const sendRequest = (item, collectionUid) => (dispatch, getState) => {
       })
       .then(resolve)
       .catch((err) => {
+        if (err && err.message === "Error invoking remote method 'send-http-request': Error: Request cancelled") {
+          console.log('>> request cancelled');
+          return;
+        }
+
         const errorMessage = err.message ?? 'Something went wrong';
 
         const errorResponse = {