feat(AddAppConnection): show meaningful error messages only

packages/backend/src/helpers/error-handler.js

@@ -50,7 +50,7 @@ const errorHandler = (error, request, response, next) => {
       },
     };
 
-    response.status(200).json(httpErrorPayload);
+    response.status(422).json(httpErrorPayload);
   }
 
   if (error instanceof NotAuthorizedError) {

packages/web/src/components/AddAppConnection/index.jsx

@@ -26,7 +26,8 @@ function AddAppConnection(props) {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   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 hasConnection = Boolean(connectionId);
   const useShared = searchParams.get('shared') === 'true';
@@ -76,7 +77,8 @@ function AddAppConnection(props) {
     async (data) => {
       if (!authenticate) return;
       setInProgress(true);
-      setError(null);
+      setErrorMessage(null);
+      setErrorDetails(null);
       try {
         const response = await authenticate({
           fields: data,
@@ -85,21 +87,19 @@ function AddAppConnection(props) {
         await queryClient.invalidateQueries({
           queryKey: ['apps', key, 'connections'],
         });
+
         onClose(response);
       } catch (err) {
         const error = err;
         console.log(error);
 
-        if (error.message) {
-          setError(error);
-        } else {
-          setError(error.graphQLErrors?.[0]);
-        }
+        setErrorMessage(error.message);
+        setErrorDetails(error?.response?.data?.errors);
       } finally {
         setInProgress(false);
       }
     },
-    [authenticate],
+    [authenticate, key, onClose, queryClient],
   );
 
   if (useShared)
@@ -134,16 +134,16 @@ function AddAppConnection(props) {
         </Alert>
       )}
 
-      {error && (
+      {(errorMessage || errorDetails) && (
         <Alert
           data-test="add-connection-error"
           severity="error"
           sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
         >
-          {error.message}
-          {error.details && (
+          {!errorDetails && errorMessage}
+          {errorDetails && (
             <pre style={{ whiteSpace: 'pre-wrap' }}>
-              {JSON.stringify(error.details, null, 2)}
+              {JSON.stringify(errorDetails, null, 2)}
             </pre>
           )}
         </Alert>

packages/web/src/hooks/useVerifyConnection.js

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