feat(AddAppConnection): show meaningful error messages only

This commit is contained in:
Ali BARIN
2024-09-24 14:38:38 +00:00
parent 589fe0f5f3
commit d6e78a48a0
3 changed files with 19 additions and 15 deletions

View File

@@ -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) {

View File

@@ -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>

View File

@@ -10,8 +10,12 @@ export default function useVerifyConnection() {
); );
return data; return data;
} catch { } catch (err) {
throw new Error('Failed while verifying connection!'); if (err.response.status === 500) {
throw new Error('Failed while verifying connection!');
}
throw err;
} }
}, },
}); });