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

15
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);
@ -103,8 +103,7 @@ export default function CodeAreaModal({
}); });
}); });
} }
else else {
{
postCustomComponent(code, nodeClass).then((apiReturn) => { postCustomComponent(code, nodeClass).then((apiReturn) => {
const { data } = apiReturn; const { data } = apiReturn;
if (data) { if (data) {
@ -112,6 +111,9 @@ export default function CodeAreaModal({
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,9 +173,9 @@ 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>))
} }