fix(api): flatten v2 error envelope in ErrorResponseHandler

frontend/src/api/ErrorResponseHandler.ts

@@ -2,6 +2,15 @@ import { AxiosError, AxiosResponse, isCancel } from 'axios';
 import { ErrorResponse } from 'types/api';
 import { ErrorStatusCode } from 'types/common';
 
+function getClientErrorMessage(data: AxiosResponse['data']): string {
+	const { errors, error } = data;
+	if (Array.isArray(errors) && errors.length >= 1) {
+		return errors[0].msg;
+	}
+	// v2 endpoints send `error` as an `{ code, message }` envelope.
+	return typeof error?.message === 'string' ? error.message : error;
+}
+
 export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 	const { response, request } = error;
 	if (response) {
@@ -21,15 +30,10 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 				};
 			}
 
-			const { errors, error } = data;
-
-			const errorMessage =
-				Array.isArray(errors) && errors.length >= 1 ? errors[0].msg : error;
-
 			return {
 				statusCode,
 				payload: null,
-				error: errorMessage,
+				error: getClientErrorMessage(data),
 				message: (response.data as any)?.status,
 				body: JSON.stringify((response.data as any).data),
 			};

frontend/src/api/__tests__/ErrorResponseHandler.test.ts

@@ -21,4 +21,19 @@ describe('ErrorResponseHandler', () => {
 
 		consoleError.mockRestore();
 	});
+
+	it('flattens a v2 error envelope on a 4xx to its message', () => {
+		const error = new AxiosError('Request failed', '400', undefined, undefined, {
+			status: 400,
+			statusText: 'Bad Request',
+			headers: {},
+			config: {} as never,
+			data: {
+				status: 'error',
+				error: { code: 'invalid_input', message: 'Syntax error: bad query' },
+			},
+		});
+
+		expect(ErrorResponseHandler(error).error).toBe('Syntax error: bad query');
+	});
 });