feat: beteer cors error messaging

This commit is contained in:
Anoop M D 2022-10-16 22:42:29 +05:30
parent 46949e48ba
commit 7078d5cec2
6 changed files with 66 additions and 37 deletions

View File

@ -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) => (<NetworkError onClose={() => toast.dismiss(t.id)}/>), {
duration: 5000
}));
};
const onGraphqlQueryChange = (value) => {};
const runQuery = async () => {};

View File

@ -0,0 +1,31 @@
import React from 'react';
const NetworkError = ({onClose}) => {
return (
<div className="max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex bg-red-100">
<div className="flex-1 w-0 p-4">
<div className="flex items-start">
<div className="ml-3 flex-1">
<p className="text-sm font-medium text-red-800">
Network Error
</p>
<p className="mt-2 text-xs text-gray-500">
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
</p>
</div>
</div>
</div>
<div className="flex">
<button
onClick={onClose}
className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium focus:outline-none"
>
Close
</button>
</div>
</div>
);
};
export default NetworkError;

View File

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

View File

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

View File

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

View File

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