jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(codeAreaModal): update error state type to match API response structure for better error handling

Browse source 
feat(codeAreaModal): add support for displaying error details and traceback in the error tab for better debugging
refactor(codeAreaModal): improve code readability and formatting for better maintainability
This commit is contained in:
anovazzi1 2023-07-05 14:01:09 -03:00
commit b5c7646b37
1 changed files with 43 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -50,7 +50,7 @@ export default function CodeAreaModal({
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const [activeTab, setActiveTab] = useState("0"); const [activeTab, setActiveTab] = useState("0");
const [error, setError] = useState<{detail:string,traceback:string}>(null) const [error, setError] = useState<{ detail: { error: string, traceback: string } }>(null)
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
@ -64,54 +64,56 @@ export default function CodeAreaModal({
function handleClick() { function handleClick() {
setLoading(true); setLoading(true);
if(!dynamic){ if (!dynamic) {
postValidateCode(code) postValidateCode(code)
.then((apiReturn) => { .then((apiReturn) => {
setLoading(false); setLoading(false);
if (apiReturn.data) { if (apiReturn.data) {
let importsErrors = apiReturn.data.imports.errors; let importsErrors = apiReturn.data.imports.errors;
let funcErrors = apiReturn.data.function.errors; let funcErrors = apiReturn.data.function.errors;
if (funcErrors.length === 0 && importsErrors.length === 0) { if (funcErrors.length === 0 && importsErrors.length === 0) {
setSuccessData({ setSuccessData({
title: "Code is ready to run", title: "Code is ready to run",
}); });
// setValue(code); // setValue(code);
} else {
if (funcErrors.length !== 0) {
setErrorData({
title: "There is an error in your function",
list: funcErrors,
});
}
if (importsErrors.length !== 0) {
setErrorData({
title: "There is an error in your imports",
list: importsErrors,
});
}
}
} else { } else {
if (funcErrors.length !== 0) { setErrorData({
setErrorData({ title: "Something went wrong, please try again",
title: "There is an error in your function", });
list: funcErrors,
});
}
if (importsErrors.length !== 0) {
setErrorData({
title: "There is an error in your imports",
list: importsErrors,
});
}
} }
} else { })
.catch((_) => {
setLoading(false);
setErrorData({ setErrorData({
title: "Something went wrong, please try again", title: "There is something wrong with this code, please review it",
}); });
}
})
.catch((_) => {
setLoading(false);
setErrorData({
title: "There is something wrong with this code, please review it",
}); });
});
} }
else else {
{
postCustomComponent(code, nodeClass).then((apiReturn) => { postCustomComponent(code, nodeClass).then((apiReturn) => {
const {data} = apiReturn; const { data } = apiReturn;
if (data) { if (data) {
setNodeClass(data); setNodeClass(data);
setModalOpen(false); setModalOpen(false);
} }
}).catch((err) => { }).catch((err) => {
setErrorData({
title: "There is something wrong with this code, please see the error on the errors tab",
});
console.log(err.response.data); console.log(err.response.data);
setError(err.response.data); setError(err.response.data);
}); });
@ -145,7 +147,8 @@ export default function CodeAreaModal({
<div className="flex flex-col items-start h-72 px-2"> <div className="flex flex-col items-start h-72 px-2">
<TabsList> <TabsList>
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsTrigger disabled={index===1&&error?.detail===undefined} key={index} value={index.toString()}>{tab.name}</TabsTrigger> <TabsTrigger disabled={index === 1 && error?.detail.error === undefined} key={index} value={index.toString()}>
<span className={error?.detail.error !== undefined && index===1 ? "text-destructive" : ""}>{tab.name}</span></TabsTrigger>
))} ))}
</TabsList> </TabsList>
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
@ -170,10 +173,10 @@ export default function CodeAreaModal({
className="w-full rounded-lg h-full custom-scroll border-[1px] border-gray-300 dark:border-gray-600" className="w-full rounded-lg h-full custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
/> />
</div> : <div className="w-full h-full bg-red-200 p-2 flex flex-col overflow-scroll custom-scroll text-left"> </div> : <div className="w-full h-full bg-red-200 p-2 flex flex-col overflow-scroll custom-scroll text-left">
<h1 className="text-red-600 text-lg">{error?.detail}</h1> <h1 className="text-red-600 text-lg">{error?.detail?.error}</h1>
<span className="border border-red-300 w-full"></span> <span className="border border-red-300 w-full"></span>
<div className="text-red-500 text-sm">{error?.traceback}</div> <div className="text-red-500 text-sm">{error?.detail?.traceback}</div>
</div>} </div>}
</TabsContent>)) </TabsContent>))
} }
</div> </div>