feat(AddAppConnection): show meaningful error messages only
This commit is contained in:
@@ -50,7 +50,7 @@ const errorHandler = (error, request, response, next) => {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
response.status(200).json(httpErrorPayload);
|
response.status(422).json(httpErrorPayload);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error instanceof NotAuthorizedError) {
|
if (error instanceof NotAuthorizedError) {
|
||||||
|
@@ -26,7 +26,8 @@ function AddAppConnection(props) {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
const formatMessage = useFormatMessage();
|
const formatMessage = useFormatMessage();
|
||||||
const [error, setError] = React.useState(null);
|
const [errorMessage, setErrorMessage] = React.useState(null);
|
||||||
|
const [errorDetails, setErrorDetails] = React.useState(null);
|
||||||
const [inProgress, setInProgress] = React.useState(false);
|
const [inProgress, setInProgress] = React.useState(false);
|
||||||
const hasConnection = Boolean(connectionId);
|
const hasConnection = Boolean(connectionId);
|
||||||
const useShared = searchParams.get('shared') === 'true';
|
const useShared = searchParams.get('shared') === 'true';
|
||||||
@@ -76,7 +77,8 @@ function AddAppConnection(props) {
|
|||||||
async (data) => {
|
async (data) => {
|
||||||
if (!authenticate) return;
|
if (!authenticate) return;
|
||||||
setInProgress(true);
|
setInProgress(true);
|
||||||
setError(null);
|
setErrorMessage(null);
|
||||||
|
setErrorDetails(null);
|
||||||
try {
|
try {
|
||||||
const response = await authenticate({
|
const response = await authenticate({
|
||||||
fields: data,
|
fields: data,
|
||||||
@@ -85,21 +87,19 @@ function AddAppConnection(props) {
|
|||||||
await queryClient.invalidateQueries({
|
await queryClient.invalidateQueries({
|
||||||
queryKey: ['apps', key, 'connections'],
|
queryKey: ['apps', key, 'connections'],
|
||||||
});
|
});
|
||||||
|
|
||||||
onClose(response);
|
onClose(response);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const error = err;
|
const error = err;
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
|
||||||
if (error.message) {
|
setErrorMessage(error.message);
|
||||||
setError(error);
|
setErrorDetails(error?.response?.data?.errors);
|
||||||
} else {
|
|
||||||
setError(error.graphQLErrors?.[0]);
|
|
||||||
}
|
|
||||||
} finally {
|
} finally {
|
||||||
setInProgress(false);
|
setInProgress(false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[authenticate],
|
[authenticate, key, onClose, queryClient],
|
||||||
);
|
);
|
||||||
|
|
||||||
if (useShared)
|
if (useShared)
|
||||||
@@ -134,16 +134,16 @@ function AddAppConnection(props) {
|
|||||||
</Alert>
|
</Alert>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{error && (
|
{(errorMessage || errorDetails) && (
|
||||||
<Alert
|
<Alert
|
||||||
data-test="add-connection-error"
|
data-test="add-connection-error"
|
||||||
severity="error"
|
severity="error"
|
||||||
sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
|
sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
|
||||||
>
|
>
|
||||||
{error.message}
|
{!errorDetails && errorMessage}
|
||||||
{error.details && (
|
{errorDetails && (
|
||||||
<pre style={{ whiteSpace: 'pre-wrap' }}>
|
<pre style={{ whiteSpace: 'pre-wrap' }}>
|
||||||
{JSON.stringify(error.details, null, 2)}
|
{JSON.stringify(errorDetails, null, 2)}
|
||||||
</pre>
|
</pre>
|
||||||
)}
|
)}
|
||||||
</Alert>
|
</Alert>
|
||||||
|
@@ -10,9 +10,13 @@ export default function useVerifyConnection() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return data;
|
return data;
|
||||||
} catch {
|
} catch (err) {
|
||||||
|
if (err.response.status === 500) {
|
||||||
throw new Error('Failed while verifying connection!');
|
throw new Error('Failed while verifying connection!');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user