diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 9215fea87..a8445de26 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -789,7 +789,6 @@
},
"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
"version": "1.3.0",
- "extraneous": true,
"inBundle": true,
"license": "MIT",
"engines": {
diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx
index 12a69264a..211b69dc5 100644
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@@ -58,6 +58,7 @@ function ApiInterceptor() {
}
}
await clearBuildVerticesState(error);
+ return Promise.reject(error);
},
);
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 74ced8078..72031a9fe 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -192,7 +192,12 @@ export default function CodeAreaModal({
}
>
-
{error?.detail?.error}
+
+ {error?.detail?.error}
+
{error?.detail?.traceback}
diff --git a/src/frontend/tests/end-to-end/generalBugs-shard-6.spec.ts b/src/frontend/tests/end-to-end/generalBugs-shard-6.spec.ts
new file mode 100644
index 000000000..6c0c37ac8
--- /dev/null
+++ b/src/frontend/tests/end-to-end/generalBugs-shard-6.spec.ts
@@ -0,0 +1,88 @@
+import { expect, test } from "@playwright/test";
+
+test("should be able to see error when something goes wrong on Code Modal", async ({
+ page,
+}) => {
+ await page.goto("/");
+
+ let modalCount = 0;
+
+ try {
+ const modalTitleElement = await page?.getByTestId("modal-title");
+ if (modalTitleElement) {
+ modalCount = await modalTitleElement.count();
+ }
+ } catch (error) {
+ modalCount = 0;
+ }
+
+ while (modalCount === 0) {
+ await page.getByText("New Project", { exact: true }).click();
+ await page.waitForTimeout(5000);
+ modalCount = await page.getByTestId("modal-title")?.count();
+ }
+
+ await page.waitForSelector('[data-testid="blank-flow"]', {
+ timeout: 30000,
+ });
+
+ await page.getByTestId("blank-flow").click();
+ await page.waitForSelector('[data-testid="extended-disclosure"]', {
+ timeout: 30000,
+ });
+
+ await page.getByTestId("extended-disclosure").click();
+ await page.getByPlaceholder("Search").click();
+ await page.getByPlaceholder("Search").fill("custom component");
+ await page.waitForTimeout(1000);
+
+ await page
+ .getByTestId("helpersCustom Component")
+ .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+ await page.getByTitle("zoom out").click();
+ await page.getByTitle("zoom out").click();
+
+ await page.getByTestId("div-generic-node").click();
+ await page.getByTestId("code-button-modal").click();
+
+ const customCodeWithError = `
+# from langflow.field_typing import Data
+from langflow.custom import Component
+from langflow.io import MessageTextInput, Output
+from langflow.schema import Data
+import pytorch
+
+class CustomComponent(Component):
+ display_name = "Custom Component"
+ description = "Use as a template to create your own component."
+ documentation: str = "http://docs.langflow.org/components/custom"
+ icon = "custom_components"
+ name = "CustomComponent"
+
+ inputs = [
+ MessageTextInput(name="input_value", display_name="Input Value", value="Hello, World!"),
+ ]
+
+ outputs = [
+ Output(display_name="Output", name="output", method="build_output"),
+ ]
+
+ def build_output(self) -> Data:
+ data = Data(value=self.input_value)
+ self.status = data
+ return data
+ `;
+
+ await page.locator("textarea").press("Control+a");
+ await page.locator("textarea").fill(customCodeWithError);
+
+ await page.getByText("Save").click();
+
+ await page.waitForTimeout(1000);
+
+ const error = await page.getByTestId("title_error_code_modal").textContent();
+
+ expect(error!.length).toBeGreaterThan(50);
+ expect(error?.toLowerCase()).toContain("custom component");
+});