diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index b45e17b56..47f91d4b2 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -26,6 +26,7 @@ import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
 import { codeAreaModalPropsType } from "../../types/components";
 import BaseModal from "../baseModal";
+import { CodeErrorDataTypeAPI } from "../../types/api";
 
 export default function CodeAreaModal({
   value,
@@ -50,7 +51,7 @@ export default function CodeAreaModal({
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [error, setError] = useState<{
-    detail: { error: string | undefined; traceback: string | undefined };
+    detail: CodeErrorDataTypeAPI;
   } | null>(null);
 
   useEffect(() => {
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 5e7682307..fc8346a5b 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -159,3 +159,17 @@ export type VertexDataTypeAPI = {
   timedelta?: number;
   duration?: string;
 };
+
+export type CodeErrorDataTypeAPI = {
+  error: string | undefined;
+  traceback: string | undefined;
+};
+
+// the error above is inside this error.response.data.detail.error
+// which comes from a request to the API
+// to type the error we need to know the structure of the object
+
+// error that has a response, that has a data, that has a detail, that has an error
+export type ResponseErrorTypeAPI = {
+  response: { data: { detail: CodeErrorDataTypeAPI } };
+};