From 7078d5cec2b67627f6d41b2af8030db1d5ac4bbc Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Sun, 16 Oct 2022 22:42:29 +0530 Subject: [PATCH] feat: beteer cors error messaging --- .../src/components/RequestTabPanel/index.js | 9 +++++- .../ResponsePane/NetworkError/index.js | 31 +++++++++++++++++++ .../ReduxStore/slices/collections/actions.js | 23 +++++++++----- .../bruno-app/src/utils/network/browser.js | 14 ++------- packages/bruno-electron/src/ipc/network.js | 14 ++------- .../bruno-schema/src/collections/index.js | 12 +++---- 6 files changed, 66 insertions(+), 37 deletions(-) create mode 100644 packages/bruno-app/src/components/ResponsePane/NetworkError/index.js diff --git a/packages/bruno-app/src/components/RequestTabPanel/index.js b/packages/bruno-app/src/components/RequestTabPanel/index.js index 645ba9f11..a6b20c01b 100644 --- a/packages/bruno-app/src/components/RequestTabPanel/index.js +++ b/packages/bruno-app/src/components/RequestTabPanel/index.js @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import find from 'lodash/find'; +import toast from 'react-hot-toast'; import { useSelector, useDispatch } from 'react-redux'; import GraphQLRequestPane from 'components/RequestPane/GraphQLRequestPane'; import HttpRequestPane from 'components/RequestPane/HttpRequestPane'; @@ -10,6 +11,7 @@ import { updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs'; import { sendRequest } from 'providers/ReduxStore/slices/collections/actions'; import RequestNotFound from './RequestNotFound'; import QueryUrl from 'components/RequestPane/QueryUrl'; +import NetworkError from 'components/ResponsePane/NetworkError'; import useGraphqlSchema from '../../hooks/useGraphqlSchema'; import StyledWrapper from './StyledWrapper'; @@ -103,7 +105,12 @@ const RequestTabPanel = () => { ); }; - const handleRun = async () => dispatch(sendRequest(item, collection.uid)); + const handleRun = async () => { + dispatch(sendRequest(item, collection.uid)) + .catch((err) => toast.custom((t) => ( toast.dismiss(t.id)}/>), { + duration: 5000 + })); + }; const onGraphqlQueryChange = (value) => {}; const runQuery = async () => {}; diff --git a/packages/bruno-app/src/components/ResponsePane/NetworkError/index.js b/packages/bruno-app/src/components/ResponsePane/NetworkError/index.js new file mode 100644 index 000000000..2c7c55781 --- /dev/null +++ b/packages/bruno-app/src/components/ResponsePane/NetworkError/index.js @@ -0,0 +1,31 @@ +import React from 'react'; + +const NetworkError = ({onClose}) => { + return ( +
+
+
+
+

+ Network Error +

+

+ Please note that if you are using Bruno on the web, then the api you are connecting to must allow CORS. + If not, please use the chrome extension or the desktop app +

+
+
+
+
+ +
+
+ ); +}; + +export default NetworkError; 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 8e7b8f17e..ce64adc2b 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js @@ -242,16 +242,23 @@ export const sendRequest = (item, collectionUid) => (dispatch, getState) => { sendNetworkRequest(itemCopy, {cancelTokenUid: cancelTokenUid}) .then((response) => { - if(response && response.status !== -1) { - return dispatch(responseReceived({ - itemUid: item.uid, - collectionUid: collectionUid, - response: response - })); - } + return dispatch(responseReceived({ + itemUid: item.uid, + collectionUid: collectionUid, + response: response + })); }) .then(resolve) - .catch(reject); + .catch((err) => { + dispatch(responseReceived({ + itemUid: item.uid, + collectionUid: collectionUid, + response: null + })); + console.log('>> sending request failed'); + console.log(err); + reject(err); + }); }); }; diff --git a/packages/bruno-app/src/utils/network/browser.js b/packages/bruno-app/src/utils/network/browser.js index 98a65a2a0..48d38221d 100644 --- a/packages/bruno-app/src/utils/network/browser.js +++ b/packages/bruno-app/src/utils/network/browser.js @@ -21,18 +21,10 @@ export const sendHttpRequestInBrowser = async (request, options) => { data: result.data }; } catch (error) { - if(error.response) { - return { - status: error.response.status, - headers: error.response.headers, - data: error.response.data - }; + if(options && options.cancelTokenUid) { + deleteCancelToken(options.cancelTokenUid); } - return { - status: -1, - headers: [], - data: null - }; + return Promise.reject(error); } }; \ No newline at end of file diff --git a/packages/bruno-electron/src/ipc/network.js b/packages/bruno-electron/src/ipc/network.js index fda58e957..93876ab4b 100644 --- a/packages/bruno-electron/src/ipc/network.js +++ b/packages/bruno-electron/src/ipc/network.js @@ -37,19 +37,11 @@ const registerNetworkIpc = () => { data: result.data }; } catch (error) { - if(error.response) { - return { - status: error.response.status, - headers: error.response.headers, - data: error.response.data - }; + if(options && options.cancelTokenUid) { + deleteCancelToken(options.cancelTokenUid); } - return { - status: -1, - headers: [], - data: null - }; + return Promise.reject(error); } }); diff --git a/packages/bruno-schema/src/collections/index.js b/packages/bruno-schema/src/collections/index.js index 3a363958c..7d8ab3731 100644 --- a/packages/bruno-schema/src/collections/index.js +++ b/packages/bruno-schema/src/collections/index.js @@ -3,8 +3,8 @@ const { uidSchema } = require("../common"); const environmentVariablesSchema = Yup.object({ uid: uidSchema, - name: Yup.string().nullable().max(256, 'name must be 256 characters or less').defined(), - value: Yup.string().nullable().max(2048, 'value must be 2048 characters or less').defined(), + name: Yup.string().nullable().max(256, 'name must be 256 characters or less'), + value: Yup.string().nullable().max(2048, 'value must be 2048 characters or less'), type: Yup.string().oneOf(['text']).required('type is required'), enabled: Yup.boolean().defined() }).noUnknown(true).strict(); @@ -18,10 +18,10 @@ const environmentSchema = Yup.object({ const keyValueSchema = Yup.object({ uid: uidSchema, - name: Yup.string().nullable().max(256, 'name must be 256 characters or less').defined(), - value: Yup.string().nullable().max(2048, 'value must be 2048 characters or less').defined(), - description: Yup.string().nullable().max(2048, 'description must be 2048 characters or less').defined(), - enabled: Yup.boolean().defined() + name: Yup.string().nullable().max(256, 'name must be 256 characters or less'), + value: Yup.string().nullable().max(2048, 'value must be 2048 characters or less'), + description: Yup.string().nullable().max(2048, 'description must be 2048 characters or less'), + enabled: Yup.boolean() }).noUnknown(true).strict(); const requestUrlSchema = Yup.string().min(0).max(2048, 'name must be 2048 characters or less').defined();