diff --git a/torchci/lib/GeneralUtils.ts b/torchci/lib/GeneralUtils.ts
index 50beaf1052..e9338dd7f3 100644
--- a/torchci/lib/GeneralUtils.ts
+++ b/torchci/lib/GeneralUtils.ts
@@ -2,6 +2,16 @@ import { Octokit } from "octokit";
 import { isFailure } from "./JobClassifierUtil";
 import { CommitData, JobData } from "./types";
 
+class ErrorWithStatusCode extends Error {
+  status: number;
+  info: any;
+  constructor(message: string, status: number, info: any) {
+    super(message);
+    this.status = status;
+    this.info = info;
+  }
+}
+
 export function includesCaseInsensitive(
   value: string,
   pattern: string
@@ -11,6 +21,20 @@ export function includesCaseInsensitive(
 
 export const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
+export const fetcherHandleError = async (url: string) => {
+  const res = await fetch(url);
+  if (!res.ok) {
+    const info = await res.json();
+    const error = new ErrorWithStatusCode(
+      `An error occurred while fetching the data`,
+      res.status,
+      info?.error
+    );
+    throw error;
+  }
+  return res.json();
+};
+
 export const getMessage = (
   message: string,
   classification: string,
diff --git a/torchci/lib/error_utils.ts b/torchci/lib/error_utils.ts
index bf909f1286..6f141cb079 100644
--- a/torchci/lib/error_utils.ts
+++ b/torchci/lib/error_utils.ts
@@ -1,28 +1,28 @@
 // TypeScript defaults error type to unknown, this file is to handle error messages and types
 
 type ErrorWithMessage = {
-	message: string
-}
+  message: string;
+};
 
 function isErrorWithMessage(error: unknown): error is ErrorWithMessage {
-	return (
-		typeof error === 'object' &&
-		error !== null &&
-		'message' in error &&
-		typeof (error as Record<string, unknown>).message === 'string'
-	)
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "message" in error &&
+    typeof (error as Record<string, unknown>).message === "string"
+  );
 }
 
 function toErrorWithMessage(candidate: unknown): ErrorWithMessage {
-	if (isErrorWithMessage(candidate)) {
-        return candidate
-    }
-	try {
-		return new Error(JSON.stringify(candidate))
-	} catch {
-		return new Error(String(candidate))
-	}
+  if (isErrorWithMessage(candidate)) {
+    return candidate;
+  }
+  try {
+    return new Error(JSON.stringify(candidate));
+  } catch {
+    return new Error(String(candidate));
+  }
 }
 export function getErrorMessage(error: unknown) {
-	return toErrorWithMessage(error).message
+  return toErrorWithMessage(error).message;
 }
diff --git a/torchci/pages/api/utilization/[workflowId]/[jobId]/[attempt].ts b/torchci/pages/api/utilization/[workflowId]/[jobId]/[attempt].ts
index 754e937dc8..869b6e0a35 100644
--- a/torchci/pages/api/utilization/[workflowId]/[jobId]/[attempt].ts
+++ b/torchci/pages/api/utilization/[workflowId]/[jobId]/[attempt].ts
@@ -17,14 +17,16 @@ export default async function handler(
     job_id: jobId as string,
   };
 
-  try{
+  try {
     const utilData = await fetchUtilization(params);
     if (utilData == null) {
-      return res.status(404).json({error: `No data found for params ${JSON.stringify(params)}`});
+      return res
+        .status(404)
+        .json({ error: `No data found for params ${JSON.stringify(params)}` });
     }
-    return res.status(200).json({data: utilData});
+    return res.status(200).json(utilData);
   } catch (error) {
     const err_msg = getErrorMessage(error);
-    return res.status(500).json({error: err_msg});
+    return res.status(500).json({ error: err_msg });
   }
 }
diff --git a/torchci/pages/utilization/[workflowId]/[jobId]/[attempt]/[[...page]].tsx b/torchci/pages/utilization/[workflowId]/[jobId]/[attempt]/[[...page]].tsx
index c30f917aa1..b2b86ce875 100644
--- a/torchci/pages/utilization/[workflowId]/[jobId]/[attempt]/[[...page]].tsx
+++ b/torchci/pages/utilization/[workflowId]/[jobId]/[attempt]/[[...page]].tsx
@@ -1,4 +1,4 @@
-import { fetcher } from "lib/GeneralUtils";
+import { fetcherHandleError } from "lib/GeneralUtils";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 
@@ -8,12 +8,20 @@ const ApiData = () => {
 
   let { data, error } = useSWR(
     `/api/utilization/${workflowId}/${jobId}/${attempt}`,
-    fetcher,
+    fetcherHandleError,
     {
       refreshInterval: 12 * 60 * 60 * 1000, // refresh every 12 hours
     }
   );
 
+  if (error) {
+    return (
+      <div>
+        error: {error.message}, StatusCode: {error.status}, info: {error.info}
+      </div>
+    );
+  }
+
   if (!data) {
     return <div>loading...</div>;
   }
@@ -23,7 +31,7 @@ const ApiData = () => {
       <h1>API Data</h1>
       <div>
         workflowId:{workflowId}, JobId: {jobId}, attempt: {attempt}, job_name:{" "}
-        {data.metadata.job_name}, workflow_name: {data.metadata.workflow_name}
+        {data.metadata?.job_name}, workflow_name: {data.metadata?.workflow_name}
       </div>
       <div
         style={{ maxWidth: "800px", whiteSpace: "pre-wrap", overflowX: "auto" }}