forked from extern/bruno
feat: beteer cors error messaging
This commit is contained in:
parent
46949e48ba
commit
7078d5cec2
@ -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 () => {};
|
||||
|
||||
|
@ -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;
|
@ -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);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
};
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user