#411 | Feature: Centralized Error Handling

agenta-web/package.json

@@ -24,8 +24,6 @@
         "@next/mdx": "^13.4.13",
         "@types/js-beautify": "^1.14.0",
         "@types/mdx": "^2.0.6",
-        "@types/node": "18.16.3",
-        "@types/react": "18.2.0",
         "@types/react-dom": "18.2.1",
         "@types/react-syntax-highlighter": "^15.5.7",
         "ag-grid-community": "^30.0.6",
@@ -43,6 +41,7 @@
         "posthog-js": "^1.77.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-error-boundary": "^4.0.11",
         "react-jss": "^10.10.0",
         "react-markdown": "^8.0.7",
         "react-syntax-highlighter": "^15.5.0",

agenta-web/src/components/AppSelector/AppCard.tsx

@@ -69,8 +69,6 @@ const AppCard: React.FC<{
             await removeApp(appName)
             // Refresh the data (if you're using SWR or a similar library)
             mutate(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/list_apps/`)
-        } catch (error: any) {
-            message.error(`Failed to remove app: ${error?.message}`)
         } finally {
             setVisibleDelete(false)
             setConfirmLoading(false)

agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx

@@ -176,9 +176,6 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 }
             } catch (e) {
                 setRowValue(rowIndex, columnName, "")
-                if (rowIndex === rows.length - 1) {
-                    message.error("Oops! Something went wrong")
-                }
             }
         })
     }

agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx

@@ -213,25 +213,19 @@ Answer ONLY with one of the given grading or evaluation options.
         const columnsDataNames = ["columnData0"]
         let idx = 0
         for (const columnName of columnsDataNames) {
-            try {
-                setRowValue(rowIndex, "evaluationFlow", EvaluationFlow.COMPARISON_RUN_STARTED)
+            setRowValue(rowIndex, "evaluationFlow", EvaluationFlow.COMPARISON_RUN_STARTED)
 
-                let result = await callVariant(
-                    inputParamsDict,
-                    variantData[idx].inputParams!,
-                    variantData[idx].optParams!,
-                    variantData[idx].URIPath!,
-                )
-                setRowValue(rowIndex, columnName as any, result)
-                await evaluate(rowIndex)
-                setShouldFetchResults(true)
-                if (rowIndex === rows.length - 1) {
-                    message.success("Evaluation Results Saved")
-                }
-            } catch (e) {
-                if (rowIndex === rows.length - 1) {
-                    message.error("Oops! Something went wrong")
-                }
+            let result = await callVariant(
+                inputParamsDict,
+                variantData[idx].inputParams!,
+                variantData[idx].optParams!,
+                variantData[idx].URIPath!,
+            )
+            setRowValue(rowIndex, columnName as any, result)
+            await evaluate(rowIndex)
+            setShouldFetchResults(true)
+            if (rowIndex === rows.length - 1) {
+                message.success("Evaluation Results Saved")
             }
             idx++
         }

agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx

@@ -180,11 +180,8 @@ const ExactMatchEvaluationTable: React.FC<ExactMatchEvaluationTableProps> = ({
                 if (rowIndex === rows.length - 1) {
                     message.success("Evaluation Results Saved")
                 }
-            } catch (e) {
+            } catch {
                 setRowValue(rowIndex, columnName, "")
-                if (rowIndex === rows.length - 1) {
-                    message.error("Oops! Something went wrong")
-                }
             }
         })
     }

agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx

@@ -175,12 +175,11 @@ const SimilarityMatchEvaluationTable: React.FC<SimilarityMatchEvaluationTablePro
                 evaluate(rowIndex)
                 if (rowIndex === rows.length - 1) {
                     message.success("Evaluation Results Saved")
-                    setLoadingSpinners(false)
                 }
-            } catch (e) {
+            } catch {
                 setRowValue(rowIndex, columnName, "")
+            } finally {
                 if (rowIndex === rows.length - 1) {
-                    message.error("Oops! Something went wrong")
                     setLoadingSpinners(false)
                 }
             }

agenta-web/src/components/Evaluations/Evaluations.tsx

@@ -32,6 +32,7 @@ import exactMatch from "@/media/target.png"
 import similarity from "@/media/transparency.png"
 import ai from "@/media/artificial-intelligence.png"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
+import axios from "@/lib/helpers/axiosConfig"
 import {createUseStyles} from "react-jss"
 import AutomaticEvaluationResult from "./AutomaticEvaluationResult"
 import HumanEvaluationResult from "./HumanEvaluationResult"
@@ -193,23 +194,8 @@ export default function Evaluations() {
         llmAppPromptTemplate?: string,
     ) => {
         const postData = async (url = "", data = {}) => {
-            const response = await fetch(url, {
-                method: "POST",
-                cache: "no-cache",
-                credentials: "same-origin",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                redirect: "follow",
-                referrerPolicy: "no-referrer",
-                body: JSON.stringify(data),
-            })
-
-            if (!response.ok) {
-                throw new Error((await response.json())?.detail ?? "Failed to create evaluation")
-            }
-
-            return response.json()
+            const response = await axios.post(url, data)
+            return response.data
         }
 
         const data = {

agenta-web/src/components/Layout/ErrorFallback.tsx

@@ -0,0 +1,23 @@
+import {getErrorMessage} from "@/lib/helpers/errorHandler"
+import {Button, Result} from "antd"
+
+interface Props {
+    error: any
+}
+
+const ErrorFallback: React.FC<Props> = ({error}) => {
+    return (
+        <Result
+            status="error"
+            title="An Error Occurred"
+            subTitle={getErrorMessage(error)}
+            extra={[
+                <Button key="home" href="/apps" type="primary">
+                    Go to home screen
+                </Button>,
+            ]}
+        />
+    )
+}
+
+export default ErrorFallback

agenta-web/src/components/Layout/Layout.tsx

@@ -9,6 +9,8 @@ import {useAppTheme} from "./ThemeContextProvider"
 import {useElementSize} from "usehooks-ts"
 import {createUseStyles} from "react-jss"
 import NoSSRWrapper from "../NoSSRWrapper/NoSSRWrapper"
+import {ErrorBoundary} from "react-error-boundary"
+import ErrorFallback from "./ErrorFallback"
 
 const {Content, Footer} = Layout
 
@@ -86,7 +88,9 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                     {title: capitalizedAppName},
                                 ]}
                             />
-                            {children}
+                            <ErrorBoundary FallbackComponent={ErrorFallback}>
+                                {children}
+                            </ErrorBoundary>
                         </Content>
                         <Footer ref={footerRef} className={classes.footer}>
                             <Space className={classes.footerLeft} size={10}>

agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx

@@ -1,7 +1,6 @@
 import AlertPopup from "@/components/AlertPopup/AlertPopup"
 import {useAppTheme} from "../../Layout/ThemeContextProvider"
 import {testset} from "@/lib/Types"
-import {globalErrorHandler} from "@/lib/helpers/errorHandler"
 import {renameVariables} from "@/lib/helpers/utils"
 import {createNewTestset, loadTestset, updateTestset, useLoadTestsetsList} from "@/lib/services/api"
 import {Button, Drawer, Form, Input, Modal, Select, Typography, message} from "antd"
@@ -56,10 +55,6 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, ...props}) => {
         } else dirty.current = false
     }, [props.open])
 
-    useUpdateEffect(() => {
-        if (isTestsetsLoadingError) globalErrorHandler(isTestsetsLoadingError)
-    }, [isTestsetsLoadingError])
-
     const onClose = useCallback(() => {
         if (dirty.current) {
             AlertPopup({
@@ -92,7 +87,6 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, ...props}) => {
                     message.success(`Row added to the "${name}" test set!`)
                     props.onClose?.({} as any)
                 })
-                .catch(globalErrorHandler)
                 .finally(() => setLoading(false))
         },
         [selectedTestset, props.onClose],
@@ -103,64 +97,62 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, ...props}) => {
             if (isNew) {
                 setNewTestsetModalOpen(true)
             } else {
-                loadTestset(selectedTestset!)
-                    .then((data) => {
-                        const testsetCols = Object.keys(data.csvdata?.[0] || {})
-                        const playgroundCols = Object.keys(values)
-                        const missingColsTestset = testsetCols.filter(
-                            (col) => !playgroundCols.includes(col),
-                        )
-                        const missingColsPlayground = playgroundCols.filter(
-                            (col) => !testsetCols.includes(col),
-                        )
-
-                        // if cols mismatch (playground cols not a superset of testset cols)
-                        if (missingColsTestset.length) {
-                            AlertPopup({
-                                type: "error",
-                                title: "Columns mismatch",
-                                message: (
-                                    <span>
-                                        Can't add to the selected test set, because its column(s)
-                                        don't match with the playground parameters.
-                                        <br />
-                                        <br />
-                                        <b>Test set Columns:</b> {testsetCols.join(", ")}
-                                        <br />
-                                        <br />
-                                        <b>Playground Parameters:</b> {playgroundCols.join(", ")}
-                                    </span>
-                                ),
-                                cancelText: null,
-                                okText: "Ok",
-                            })
-                        }
-                        // if unmapped cols (playground has cols that don't map to testset cols)
-                        else if (missingColsPlayground.length) {
-                            AlertPopup({
-                                type: "confirm",
-                                title: "Unmapped parameters",
-                                message: (
-                                    <span>
-                                        Following parameters from the playground can't map to any
-                                        columns of the selected test set:{" "}
-                                        <strong>{missingColsPlayground.join(", ")}</strong>
-                                        <br />
-                                        <br />
-                                        Do you want to ignore these unmapped parameters and continue
-                                        adding to the test set?
-                                    </span>
-                                ),
-                                okText: "Add",
-                                onOk: () => addToTestSet(data.name, data.csvdata, values),
-                            })
-                        }
-                        // exact match b/w playground cols and testset cols
-                        else {
-                            addToTestSet(data.name, data.csvdata, values)
-                        }
-                    })
-                    .catch(globalErrorHandler)
+                loadTestset(selectedTestset!).then((data) => {
+                    const testsetCols = Object.keys(data.csvdata?.[0] || {})
+                    const playgroundCols = Object.keys(values)
+                    const missingColsTestset = testsetCols.filter(
+                        (col) => !playgroundCols.includes(col),
+                    )
+                    const missingColsPlayground = playgroundCols.filter(
+                        (col) => !testsetCols.includes(col),
+                    )
+
+                    // if cols mismatch (playground cols not a superset of testset cols)
+                    if (missingColsTestset.length) {
+                        AlertPopup({
+                            type: "error",
+                            title: "Columns mismatch",
+                            message: (
+                                <span>
+                                    Can't add to the selected test set, because its column(s) don't
+                                    match with the playground parameters.
+                                    <br />
+                                    <br />
+                                    <b>Test set Columns:</b> {testsetCols.join(", ")}
+                                    <br />
+                                    <br />
+                                    <b>Playground Parameters:</b> {playgroundCols.join(", ")}
+                                </span>
+                            ),
+                            cancelText: null,
+                            okText: "Ok",
+                        })
+                    }
+                    // if unmapped cols (playground has cols that don't map to testset cols)
+                    else if (missingColsPlayground.length) {
+                        AlertPopup({
+                            type: "confirm",
+                            title: "Unmapped parameters",
+                            message: (
+                                <span>
+                                    Following parameters from the playground can't map to any
+                                    columns of the selected test set:{" "}
+                                    <strong>{missingColsPlayground.join(", ")}</strong>
+                                    <br />
+                                    <br />
+                                    Do you want to ignore these unmapped parameters and continue
+                                    adding to the test set?
+                                </span>
+                            ),
+                            okText: "Add",
+                            onOk: () => addToTestSet(data.name, data.csvdata, values),
+                        })
+                    }
+                    // exact match b/w playground cols and testset cols
+                    else {
+                        addToTestSet(data.name, data.csvdata, values)
+                    }
+                })
             }
         },
         [selectedTestset],