More Detailed Error Message on Failed Cancel Runs (#1180)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
If the backend provides a useful error message when cancelling runs the frontend will display it. Otherwise will display "failed to fetch".

Also updates the current error handling on fetch or actually show the error message if one is provided.

Merging the [backend PR](TangleML/tangle#29) will provide a more useful error message via the API.

We can follow up and improve when we have a better error handling system.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->
Will help address user confusion that relates to Shopify/oasis-frontend#274

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

![image.png](https://app.graphite.dev/user-attachments/assets/0556186f-17d5-4f17-9e13-64c5bac7d38f.png)

(note: I cut off some of the fluff from this message after making the screenshot but it's a lengthy process to set up an environment just to get a new screenshot)

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->
The best way to test this is with two users on staging:
- user 1 starts a run
- user 2 tries to cancel it


Alternatively, this can be done in local dev by emulating two different users by changing the `DEV_USER` const in `app.py` as needed.

Note the current backend will only throw an internal exception; resulting in a `failed to fetch` on the front end. For a detailed error message [this backend PR](TangleML/tangle#29) needs to be shipped first.

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/services/pipelineRunService.ts

@@ -14,6 +14,7 @@ import {
   PIPELINE_RUNS_STORE_NAME,
   USER_PIPELINES_LIST_NAME,
 } from "@/utils/constants";
+import { fetchWithErrorHandling } from "@/utils/fetchWithErrorHandling";
 
 export const createPipelineRun = async (
   payload: BodyCreateApiPipelineRunsPost,
@@ -187,16 +188,10 @@ export const fetchPipelineRunById = async (runId: string) => {
 };
 
 export const cancelPipelineRun = async (runId: string, backendUrl: string) => {
-  const response = await fetch(
+  await fetchWithErrorHandling(
     `${backendUrl}/api/pipeline_runs/${runId}/cancel`,
     {
       method: "POST",
     },
   );
-
-  if (!response.ok) {
-    throw new Error("Failed to cancel pipeline run");
-  }
-
-  // endpoint returns nothing
 };

src/utils/fetchWithErrorHandling.ts

@@ -13,23 +13,44 @@ export const fetchWithErrorHandling = async (
   }
 
   if (!response.ok) {
-    let errorBody = "";
+    let message = "No error details";
     try {
-      errorBody = await response.text();
+      let errorBody: any;
+      if (response.headers.get("content-type")?.includes("application/json")) {
+        errorBody = await response.json();
+      } else {
+        errorBody = await response.text();
+      }
+      message = errorBody.message;
     } catch {
       // Ignore if we can't read the error body
     }
 
+    if (response.status === 403) {
+      throw new Error(message || "Access denied (403)");
+    }
+
     throw new Error(
-      `HTTP ${response.status} ${response.statusText}: ${errorBody || "No error details"} (URL: ${url})`,
+      `HTTP ${response.status} ${response.statusText}: ${message} (URL: ${url})`,
     );
   }
 
-  try {
-    return await response.json();
-  } catch (parseError) {
-    const message =
-      parseError instanceof Error ? parseError.message : String(parseError);
-    throw new Error(`Invalid JSON response: ${message} (URL: ${url})`);
+  const contentType = response.headers.get("content-type");
+  const contentLength = response.headers.get("content-length");
+
+  if (!contentType || contentLength === "0") {
+    return response;
   }
+
+  if (contentType?.includes("application/json")) {
+    try {
+      return await response.json();
+    } catch (parseError) {
+      const message =
+        parseError instanceof Error ? parseError.message : String(parseError);
+      throw new Error(`Invalid JSON response: ${message} (URL: ${url})`);
+    }
+  }
+
+  return response;
 };