showing error response in response tab instead of alert message

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 {

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>
   );

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!');
       });
   });
 };