fix(frontend): fix client side error handling in custom mutator (#11160)

- depends on https://github.com/Significant-Gravitas/AutoGPT/pull/11159

Currently, we’re not throwing errors for client-side requests in the
custom mutator. This way, we’re ignoring the client-side request error.
If we do encounter an error, we send it as a normal response object.
That’s why our onError callback on React Query mutation and hasError
isn’t working in the query. To fix this, in this PR, we’re throwing the
client-side error.

### Changes 🏗️
- We’re throwing errors for both server-side and client-side requests.  
- Why server-side? So the client cache isn’t hydrated with the error.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] All end-to-end functionality is working properly.
- [x] I’ve manually checked all the pages and they are all functioning
correctly.

autogpt_platform/frontend/src/app/api/mutators/custom-mutator.ts

@@ -1,4 +1,5 @@
 import {
+  ApiError,
   createRequestHeaders,
   getServerAuthToken,
 } from "@/lib/autogpt-server-api/helpers";
@@ -93,17 +94,17 @@ export const customMutator = async <
     body: data,
   });
 
-  // Error handling for server-side requests
-  // We do not need robust error handling for server-side requests; we only need to log the error message and throw the error.
-  // What happens if the server-side request fails?
-  // 1. The error will be logged in the terminal, then.
-  // 2. The error will be thrown, so the cached data for this particular queryKey will be empty, then.
-  // 3. The client-side will send the request again via the proxy. If it fails again, the error will be handled on the client side.
-  // 4. If the request succeeds on the server side, the data will be cached, and the client will use it instead of sending a request to the proxy.
+  if (!response.ok) {
+    const response_data = await getBody<any>(response);
+    const errorMessage =
+      response_data?.detail || response_data?.message || response.statusText;
 
-  if (!response.ok && isServerSide()) {
-    console.error("Request failed on server side", response, fullUrl);
-    throw new Error(`Request failed with status ${response.status}`);
+    console.error(
+      `Request failed ${isServerSide() ? "on server" : "on client"}`,
+      { status: response.status, url: fullUrl, data: response_data },
+    );
+
+    throw new ApiError(errorMessage, response.status, response_data);
   }
 
   const response_data = await getBody<T["data"]>(response);