From 73758a9b99f8f65f8ee02aea4835e940e1277f82 Mon Sep 17 00:00:00 2001
From: MohammedMaaz <maazkhawar25@gmail.com>
Date: Thu, 24 Aug 2023 03:00:33 +0500
Subject: [PATCH 1/3] global error handler improved | axios interceptor |
 ErrorBoundary

---
 agenta-web/package-lock.json                  | 374 ++++++++++++-----
 agenta-web/package.json                       |   5 +-
 .../src/components/AppSelector/AppCard.tsx    |   2 -
 .../ABTestingEvaluationTable.tsx              |   3 +-
 .../AICritiqueEvaluationTable.tsx             |  44 +-
 .../ExactMatchEvaluationTable.tsx             |   3 +-
 .../SimilarityMatchEvaluationTable.tsx        |   3 +-
 .../components/Evaluations/Evaluations.tsx    |  20 +-
 .../src/components/Layout/ErrorFallback.tsx   |  23 ++
 agenta-web/src/components/Layout/Layout.tsx   |   6 +-
 .../AddToTestSetDrawer/AddToTestSetDrawer.tsx | 120 +++---
 .../Playground/Views/ParametersView.tsx       |   3 +-
 .../components/Playground/Views/TestView.tsx  |   5 +-
 agenta-web/src/components/Results/Results.tsx |   5 +-
 agenta-web/src/components/Sidebar/Sidebar.tsx | 253 ++++++------
 .../components/TestSetTable/TestsetTable.tsx  |   6 +-
 agenta-web/src/lib/helpers/axiosConfig.ts     |  25 ++
 agenta-web/src/lib/helpers/errorHandler.ts    |  22 +-
 agenta-web/src/lib/services/api.ts            | 375 ++++++------------
 .../pages/apps/[app_name]/testsets/index.tsx  |   5 +-
 .../[app_name]/testsets/new/upload/index.tsx  |  24 +-
 21 files changed, 684 insertions(+), 642 deletions(-)
 create mode 100644 agenta-web/src/components/Layout/ErrorFallback.tsx
 create mode 100644 agenta-web/src/lib/helpers/axiosConfig.ts

diff --git a/agenta-web/package-lock.json b/agenta-web/package-lock.json
index 57f1b4b3b0d..ebe780c4a85 100644
--- a/agenta-web/package-lock.json
+++ b/agenta-web/package-lock.json
@@ -15,8 +15,6 @@
                 "@mdx-js/react": "^2.3.0",
                 "@next/mdx": "^13.4.13",
                 "@types/mdx": "^2.0.6",
-                "@types/node": "18.16.3",
-                "@types/react": "18.2.0",
                 "@types/react-dom": "18.2.1",
                 "ag-grid-community": "^30.0.6",
                 "ag-grid-react": "^30.0.3",
@@ -31,6 +29,7 @@
                 "postcss": "8.4.23",
                 "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",
@@ -40,6 +39,8 @@
                 "usehooks-ts": "^2.9.1"
             },
             "devDependencies": {
+                "@types/node": "18.16.3",
+                "@types/react": "18.2.0",
                 "cypress": "^12.11.0",
                 "eslint-config-prettier": "^8.8.0",
                 "node-mocks-http": "^1.12.2",
@@ -81,14 +82,15 @@
             }
         },
         "node_modules/@ant-design/icons": {
-            "version": "5.1.4",
-            "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.1.4.tgz",
-            "integrity": "sha512-YHKL7Jx3bM12OxvtiYDon04BsBT/6LGitYEqar3GljzWaAyMOAD8i/uF1Rsi5Us/YNdWWXBGSvZV2OZWMpJlcA==",
+            "version": "5.2.5",
+            "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.2.5.tgz",
+            "integrity": "sha512-9Jc59v5fl5dzmxqLWtRev3dJwU7Ya9ZheoI6XmZjZiQ7PRtk77rC+Rbt7GJzAPPg43RQ4YO53RE1u8n+Et97vQ==",
             "dependencies": {
                 "@ant-design/colors": "^7.0.0",
-                "@ant-design/icons-svg": "^4.2.1",
+                "@ant-design/icons-svg": "^4.3.0",
                 "@babel/runtime": "^7.11.2",
                 "classnames": "^2.2.6",
+                "lodash.camelcase": "^4.3.0",
                 "rc-util": "^5.31.1"
             },
             "engines": {
@@ -100,9 +102,9 @@
             }
         },
         "node_modules/@ant-design/icons-svg": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
-            "integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.0.tgz",
+            "integrity": "sha512-WOgvdH/1Wl8Z7VXigRbCa5djO14zxrNTzvrAQzhWiBQtEKT0uTc8K1ltjKZ8U1gPn/wXhMA8/jE39SJl0WNxSg=="
         },
         "node_modules/@ant-design/react-slick": {
             "version": "1.0.1",
@@ -441,6 +443,16 @@
                 "react": ">=16"
             }
         },
+        "node_modules/@mdx-js/react/node_modules/@types/react": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.0.tgz",
+            "integrity": "sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==",
+            "dependencies": {
+                "@types/prop-types": "*",
+                "@types/scheduler": "*",
+                "csstype": "^3.0.2"
+            }
+        },
         "node_modules/@next/env": {
             "version": "13.3.4",
             "resolved": "https://registry.npmjs.org/@next/env/-/env-13.3.4.tgz",
@@ -474,31 +486,31 @@
                 }
             }
         },
-        "node_modules/@next/swc-linux-x64-gnu": {
+        "node_modules/@next/swc-darwin-arm64": {
             "version": "13.3.4",
-            "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.4.tgz",
-            "integrity": "sha512-xU+ugaupGA4SL5aK1ZYEqVHrW3TPOhxVcpaJLfpANm2443J4GfxCmOacu9XcSgy5c51Mq7C9uZ1LODKHfZosRQ==",
+            "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.4.tgz",
+            "integrity": "sha512-vux7RWfzxy1lD21CMwZsy9Ej+0+LZdIIj1gEhVmzOQqQZ5N56h8JamrjIVCfDL+Lpj8KwOmFZbPHE8qaYnL2pg==",
             "cpu": [
-                "x64"
+                "arm64"
             ],
             "optional": true,
             "os": [
-                "linux"
+                "darwin"
             ],
             "engines": {
                 "node": ">= 10"
             }
         },
-        "node_modules/@next/swc-linux-x64-musl": {
+        "node_modules/@next/swc-darwin-x64": {
             "version": "13.3.4",
-            "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.4.tgz",
-            "integrity": "sha512-cZvmf5KcYeTfIK6bCypfmxGUjme53Ep7hx94JJtGrYgCA1VwEuYdh+KouubJaQCH3aqnNE7+zGnVEupEKfoaaA==",
+            "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.4.tgz",
+            "integrity": "sha512-1tb+6JT98+t7UIhVQpKL7zegKnCs9RKU6cKNyj+DYKuC/NVl49/JaIlmwCwK8Ibl+RXxJrK7uSXSIO71feXsgw==",
             "cpu": [
                 "x64"
             ],
             "optional": true,
             "os": [
-                "linux"
+                "darwin"
             ],
             "engines": {
                 "node": ">= 10"
@@ -537,16 +549,16 @@
             }
         },
         "node_modules/@pkgr/utils": {
-            "version": "2.4.1",
-            "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.1.tgz",
-            "integrity": "sha512-JOqwkgFEyi+OROIyq7l4Jy28h/WwhDnG/cPkXG2Z1iFbubB6jsHW1NDvmyOzTBxHr3yg68YGirmh1JUgMqa+9w==",
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
+            "integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
             "dependencies": {
                 "cross-spawn": "^7.0.3",
-                "fast-glob": "^3.2.12",
+                "fast-glob": "^3.3.0",
                 "is-glob": "^4.0.3",
                 "open": "^9.1.0",
                 "picocolors": "^1.0.0",
-                "tslib": "^2.5.0"
+                "tslib": "^2.6.0"
             },
             "engines": {
                 "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
@@ -571,9 +583,9 @@
             }
         },
         "node_modules/@rc-component/context": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.3.0.tgz",
-            "integrity": "sha512-6QdaCJ7Wn5UZLJs15IEfqy4Ru3OaL5ctqpQYWd5rlfV9wwzrzdt6+kgAQZV/qdB0MUPN4nhyBfRembQCIvBf+w==",
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
+            "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
             "dependencies": {
                 "@babel/runtime": "^7.10.1",
                 "rc-util": "^5.27.0"
@@ -612,9 +624,9 @@
             }
         },
         "node_modules/@rc-component/portal": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.1.tgz",
-            "integrity": "sha512-m8w3dFXX0H6UkJ4wtfrSwhe2/6M08uz24HHrF8pWfAXPwA9hwCuTE5per/C86KwNLouRpwFGcr7LfpHaa1F38g==",
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz",
+            "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
             "dependencies": {
                 "@babel/runtime": "^7.18.0",
                 "classnames": "^2.3.2",
@@ -648,9 +660,9 @@
             }
         },
         "node_modules/@rc-component/trigger": {
-            "version": "1.14.0",
-            "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.14.0.tgz",
-            "integrity": "sha512-BZ1OnofveyVhoeAPQHbkvUM00N4C6cWkNR7JduoAd1sl9m+Gt7atXtlbtT+ovjjD7poQ0HPLfyGk0P0PZXPxhQ==",
+            "version": "1.15.6",
+            "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.15.6.tgz",
+            "integrity": "sha512-Tl19KaGsShf4yzqxumsXVT4c7j0l20Dxe5hgP5S0HmxyhCg3oKen28ntGavRCIPW7cl7wgsGotntqcIokgDHzg==",
             "dependencies": {
                 "@babel/runtime": "^7.18.3",
                 "@rc-component/portal": "^1.1.0",
@@ -795,6 +807,16 @@
                 "@types/react": "*"
             }
         },
+        "node_modules/@types/react-dom/node_modules/@types/react": {
+            "version": "18.2.21",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz",
+            "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==",
+            "dependencies": {
+                "@types/prop-types": "*",
+                "@types/scheduler": "*",
+                "csstype": "^3.0.2"
+            }
+        },
         "node_modules/@types/scheduler": {
             "version": "0.16.3",
             "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -827,6 +849,13 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/yauzl/node_modules/@types/node": {
+            "version": "20.5.3",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+            "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+            "dev": true,
+            "optional": true
+        },
         "node_modules/@typescript-eslint/parser": {
             "version": "5.60.1",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.60.1.tgz",
@@ -1425,6 +1454,25 @@
                 "get-intrinsic": "^1.1.3"
             }
         },
+        "node_modules/arraybuffer.prototype.slice": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz",
+            "integrity": "sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==",
+            "dependencies": {
+                "array-buffer-byte-length": "^1.0.0",
+                "call-bind": "^1.0.2",
+                "define-properties": "^1.2.0",
+                "get-intrinsic": "^1.2.1",
+                "is-array-buffer": "^3.0.2",
+                "is-shared-array-buffer": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/asn1": {
             "version": "0.2.6",
             "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
@@ -2296,9 +2344,9 @@
             }
         },
         "node_modules/default-browser/node_modules/execa": {
-            "version": "7.1.1",
-            "resolved": "https://registry.npmjs.org/execa/-/execa-7.1.1.tgz",
-            "integrity": "sha512-wH0eMf/UXckdUYnO21+HDztteVv05rq2GXksxT4fCGeHkBhw1DROXh40wcjMcRqDOWE7iPJ4n3M7e2+YFP+76Q==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
+            "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
             "dependencies": {
                 "cross-spawn": "^7.0.3",
                 "get-stream": "^6.0.1",
@@ -2524,17 +2572,17 @@
             "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
         },
         "node_modules/editorconfig/node_modules/semver": {
-            "version": "5.7.1",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-            "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+            "version": "5.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+            "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
             "bin": {
                 "semver": "bin/semver"
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.445",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.445.tgz",
-            "integrity": "sha512-++DB+9VK8SBJwC+X1zlMfJ1tMA3F0ipi39GdEp+x3cV2TyBihqAgad8cNMWtLDEkbH39nlDQP7PfGrDr3Dr7HA=="
+            "version": "1.4.499",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz",
+            "integrity": "sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw=="
         },
         "node_modules/emoji-regex": {
             "version": "9.2.2",
@@ -2575,17 +2623,18 @@
             }
         },
         "node_modules/es-abstract": {
-            "version": "1.21.2",
-            "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
-            "integrity": "sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==",
+            "version": "1.22.1",
+            "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
+            "integrity": "sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==",
             "dependencies": {
                 "array-buffer-byte-length": "^1.0.0",
+                "arraybuffer.prototype.slice": "^1.0.1",
                 "available-typed-arrays": "^1.0.5",
                 "call-bind": "^1.0.2",
                 "es-set-tostringtag": "^2.0.1",
                 "es-to-primitive": "^1.2.1",
                 "function.prototype.name": "^1.1.5",
-                "get-intrinsic": "^1.2.0",
+                "get-intrinsic": "^1.2.1",
                 "get-symbol-description": "^1.0.0",
                 "globalthis": "^1.0.3",
                 "gopd": "^1.0.1",
@@ -2605,14 +2654,18 @@
                 "object-inspect": "^1.12.3",
                 "object-keys": "^1.1.1",
                 "object.assign": "^4.1.4",
-                "regexp.prototype.flags": "^1.4.3",
+                "regexp.prototype.flags": "^1.5.0",
+                "safe-array-concat": "^1.0.0",
                 "safe-regex-test": "^1.0.0",
                 "string.prototype.trim": "^1.2.7",
                 "string.prototype.trimend": "^1.0.6",
                 "string.prototype.trimstart": "^1.0.6",
+                "typed-array-buffer": "^1.0.0",
+                "typed-array-byte-length": "^1.0.0",
+                "typed-array-byte-offset": "^1.0.0",
                 "typed-array-length": "^1.0.4",
                 "unbox-primitive": "^1.0.2",
-                "which-typed-array": "^1.1.9"
+                "which-typed-array": "^1.1.10"
             },
             "engines": {
                 "node": ">= 0.4"
@@ -2820,13 +2873,13 @@
             }
         },
         "node_modules/eslint-import-resolver-typescript/node_modules/globby": {
-            "version": "13.2.0",
-            "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.0.tgz",
-            "integrity": "sha512-jWsQfayf13NvqKUIL3Ta+CIqMnvlaIDFveWE/dpOZ9+3AMEJozsxDvKA02zync9UuvOM8rOXzsD5GqKP4OnWPQ==",
+            "version": "13.2.2",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+            "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
             "dependencies": {
                 "dir-glob": "^3.0.1",
-                "fast-glob": "^3.2.11",
-                "ignore": "^5.2.0",
+                "fast-glob": "^3.3.0",
+                "ignore": "^5.2.4",
                 "merge2": "^1.4.1",
                 "slash": "^4.0.0"
             },
@@ -2920,9 +2973,9 @@
             }
         },
         "node_modules/eslint-plugin-import/node_modules/semver": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
             "bin": {
                 "semver": "bin/semver.js"
             }
@@ -2957,9 +3010,9 @@
             }
         },
         "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
             "bin": {
                 "semver": "bin/semver.js"
             }
@@ -3031,9 +3084,9 @@
             }
         },
         "node_modules/eslint-plugin-react/node_modules/semver": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
             "bin": {
                 "semver": "bin/semver.js"
             }
@@ -3065,11 +3118,11 @@
             }
         },
         "node_modules/espree": {
-            "version": "9.5.2",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-            "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+            "version": "9.6.1",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+            "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
             "dependencies": {
-                "acorn": "^8.8.0",
+                "acorn": "^8.9.0",
                 "acorn-jsx": "^5.3.2",
                 "eslint-visitor-keys": "^3.4.1"
             },
@@ -3278,9 +3331,9 @@
             "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
         },
         "node_modules/fast-glob": {
-            "version": "3.2.12",
-            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-            "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+            "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
             "dependencies": {
                 "@nodelib/fs.stat": "^2.0.2",
                 "@nodelib/fs.walk": "^1.2.3",
@@ -3593,9 +3646,9 @@
             }
         },
         "node_modules/get-tsconfig": {
-            "version": "4.6.2",
-            "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.6.2.tgz",
-            "integrity": "sha512-E5XrT4CbbXcXWy+1jChlZmrmCwd5KGx502kDCXJJ7y898TtWW9FwoG5HfOLVRKmlmDGkWN2HM9Ho+/Y8F0sJDg==",
+            "version": "4.7.0",
+            "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.0.tgz",
+            "integrity": "sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==",
             "dependencies": {
                 "resolve-pkg-maps": "^1.0.0"
             },
@@ -3673,9 +3726,9 @@
             }
         },
         "node_modules/globals": {
-            "version": "13.20.0",
-            "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-            "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+            "version": "13.21.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
+            "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
             "dependencies": {
                 "type-fest": "^0.20.2"
             },
@@ -4153,9 +4206,9 @@
             }
         },
         "node_modules/is-core-module": {
-            "version": "2.12.1",
-            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
-            "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+            "version": "2.13.0",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+            "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
             "dependencies": {
                 "has": "^1.0.3"
             },
@@ -4401,15 +4454,11 @@
             }
         },
         "node_modules/is-typed-array": {
-            "version": "1.1.10",
-            "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
-            "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
+            "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
             "dependencies": {
-                "available-typed-arrays": "^1.0.5",
-                "call-bind": "^1.0.2",
-                "for-each": "^0.3.3",
-                "gopd": "^1.0.1",
-                "has-tostringtag": "^1.0.0"
+                "which-typed-array": "^1.1.11"
             },
             "engines": {
                 "node": ">= 0.4"
@@ -4472,6 +4521,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/isarray": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+            "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+        },
         "node_modules/isexe": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4811,9 +4865,9 @@
             }
         },
         "node_modules/jsx-ast-utils": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.4.tgz",
-            "integrity": "sha512-fX2TVdCViod6HwKEtSWGHs57oFhVfCMwieb9PuRDgjDPh5XeqJiHFFFJCHxU5cnTc3Bu/GRL+kPiFmw8XWOfKw==",
+            "version": "3.3.5",
+            "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+            "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
             "dependencies": {
                 "array-includes": "^3.1.6",
                 "array.prototype.flat": "^1.3.1",
@@ -4927,6 +4981,11 @@
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
             "dev": true
         },
+        "node_modules/lodash.camelcase": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+            "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
+        },
         "node_modules/lodash.merge": {
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6110,6 +6169,31 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/next/node_modules/postcss/node_modules/nanoid": {
+            "version": "3.3.6",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+            "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
+            },
+            "engines": {
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+            }
+        },
+        "node_modules/next/node_modules/postcss/node_modules/source-map-js": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/node-mocks-http": {
             "version": "1.12.2",
             "resolved": "https://registry.npmjs.org/node-mocks-http/-/node-mocks-http-1.12.2.tgz",
@@ -6132,9 +6216,9 @@
             }
         },
         "node_modules/node-releases": {
-            "version": "2.0.12",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
-            "integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ=="
+            "version": "2.0.13",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+            "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
         },
         "node_modules/nopt": {
             "version": "6.0.0",
@@ -7242,9 +7326,9 @@
             }
         },
         "node_modules/rc-util": {
-            "version": "5.34.0",
-            "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.34.0.tgz",
-            "integrity": "sha512-+zCDJ1gq+KwqbaZPAk7PGlNAssoTcnZSnTsr5KMYDBhzdPNFxyuglnewWMP5PyP/kAC6uW4r9Ejc08M+Lei04A==",
+            "version": "5.36.0",
+            "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.36.0.tgz",
+            "integrity": "sha512-a4uUvT+UNHvYL+awzbN8H8zAjfduwY4KAp2wQy40wOz3NyBdo3Xhx/EAAPyDkHLoGm535jIACaMhIqExGiAjHw==",
             "dependencies": {
                 "@babel/runtime": "^7.18.3",
                 "react-is": "^16.12.0"
@@ -7255,14 +7339,14 @@
             }
         },
         "node_modules/rc-virtual-list": {
-            "version": "3.5.2",
-            "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.5.2.tgz",
-            "integrity": "sha512-sE2G9hTPjVmatQni8OP2Kx33+Oth6DMKm67OblBBmgMBJDJQOOFpSGH7KZ6Pm85rrI2IGxDRXZCr0QhYOH2pfQ==",
+            "version": "3.10.5",
+            "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.10.5.tgz",
+            "integrity": "sha512-Vc89TL3JHfRlLVQXVj5Hmv0dIflgwmHDcbjt9lrZjOG3wNUDkTF5zci8kFDU/CzdmmqgKu+CUktEpT10VUKYSQ==",
             "dependencies": {
                 "@babel/runtime": "^7.20.0",
                 "classnames": "^2.2.6",
                 "rc-resize-observer": "^1.0.0",
-                "rc-util": "^5.15.0"
+                "rc-util": "^5.36.0"
             },
             "engines": {
                 "node": ">=8.x"
@@ -7300,6 +7384,17 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-error-boundary": {
+            "version": "4.0.11",
+            "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.11.tgz",
+            "integrity": "sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5"
+            },
+            "peerDependencies": {
+                "react": ">=16.13.1"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7519,11 +7614,11 @@
             "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
         },
         "node_modules/resolve": {
-            "version": "1.22.2",
-            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
-            "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+            "version": "1.22.4",
+            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
+            "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
             "dependencies": {
-                "is-core-module": "^2.11.0",
+                "is-core-module": "^2.13.0",
                 "path-parse": "^1.0.7",
                 "supports-preserve-symlinks-flag": "^1.0.0"
             },
@@ -7689,6 +7784,23 @@
                 "node": ">=6"
             }
         },
+        "node_modules/safe-array-concat": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
+            "integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==",
+            "dependencies": {
+                "call-bind": "^1.0.2",
+                "get-intrinsic": "^1.2.0",
+                "has-symbols": "^1.0.3",
+                "isarray": "^2.0.5"
+            },
+            "engines": {
+                "node": ">=0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/safe-buffer": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -8461,6 +8573,54 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/typed-array-buffer": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+            "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+            "dependencies": {
+                "call-bind": "^1.0.2",
+                "get-intrinsic": "^1.2.1",
+                "is-typed-array": "^1.1.10"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/typed-array-byte-length": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+            "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+            "dependencies": {
+                "call-bind": "^1.0.2",
+                "for-each": "^0.3.3",
+                "has-proto": "^1.0.1",
+                "is-typed-array": "^1.1.10"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/typed-array-byte-offset": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+            "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+            "dependencies": {
+                "available-typed-arrays": "^1.0.5",
+                "call-bind": "^1.0.2",
+                "for-each": "^0.3.3",
+                "has-proto": "^1.0.1",
+                "is-typed-array": "^1.1.10"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/typed-array-length": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
@@ -8679,6 +8839,7 @@
         },
         "node_modules/usehooks-ts": {
             "version": "2.9.1",
+            "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
             "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
             "engines": {
                 "node": ">=16.15.0",
@@ -8878,16 +9039,15 @@
             }
         },
         "node_modules/which-typed-array": {
-            "version": "1.1.9",
-            "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
-            "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
+            "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
             "dependencies": {
                 "available-typed-arrays": "^1.0.5",
                 "call-bind": "^1.0.2",
                 "for-each": "^0.3.3",
                 "gopd": "^1.0.1",
-                "has-tostringtag": "^1.0.0",
-                "is-typed-array": "^1.1.10"
+                "has-tostringtag": "^1.0.0"
             },
             "engines": {
                 "node": ">= 0.4"
diff --git a/agenta-web/package.json b/agenta-web/package.json
index f5d07c52e42..9f48ad8d814 100644
--- a/agenta-web/package.json
+++ b/agenta-web/package.json
@@ -21,8 +21,6 @@
         "@mdx-js/react": "^2.3.0",
         "@next/mdx": "^13.4.13",
         "@types/mdx": "^2.0.6",
-        "@types/node": "18.16.3",
-        "@types/react": "18.2.0",
         "@types/react-dom": "18.2.1",
         "ag-grid-community": "^30.0.6",
         "ag-grid-react": "^30.0.3",
@@ -37,6 +35,7 @@
         "postcss": "8.4.23",
         "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",
@@ -46,6 +45,8 @@
         "usehooks-ts": "^2.9.1"
     },
     "devDependencies": {
+        "@types/node": "18.16.3",
+        "@types/react": "18.2.0",
         "cypress": "^12.11.0",
         "eslint-config-prettier": "^8.8.0",
         "node-mocks-http": "^1.12.2",
diff --git a/agenta-web/src/components/AppSelector/AppCard.tsx b/agenta-web/src/components/AppSelector/AppCard.tsx
index 890e1adec7d..acff5a1fbfa 100644
--- a/agenta-web/src/components/AppSelector/AppCard.tsx
+++ b/agenta-web/src/components/AppSelector/AppCard.tsx
@@ -45,8 +45,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) {
-            message.error(`Failed to remove app: ${error.message}`)
         } finally {
             setVisibleDelete(false)
             setConfirmLoading(false)
diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index f2c452a14c6..10b8213f0e4 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -146,9 +146,8 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 )
                 setRowValue(rowIndex, columnName, result)
                 setRowValue(rowIndex, "evaluationFlow", EvaluationFlow.COMPARISON_RUN_STARTED)
-            } catch (e) {
+            } catch {
                 setRowValue(rowIndex, columnName, "")
-                message.error("Oops! Something went wrong")
             }
         })
     }
diff --git a/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx
index 40d663a5d21..796956301d8 100644
--- a/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx
@@ -1,20 +1,7 @@
 import {useState, useEffect} from "react"
 import type {ColumnType} from "antd/es/table"
-import {BarChartOutlined, LineChartOutlined} from "@ant-design/icons"
-import {
-    Button,
-    Card,
-    Col,
-    Input,
-    Row,
-    Space,
-    Spin,
-    Statistic,
-    Table,
-    Tag,
-    Typography,
-    message,
-} from "antd"
+import {LineChartOutlined} from "@ant-design/icons"
+import {Button, Card, Col, Input, Row, Space, Spin, Statistic, Table, Tag} from "antd"
 import {Evaluation, Variant} from "@/lib/Types"
 import {
     updateEvaluationScenario,
@@ -25,7 +12,6 @@ import {
 import {useVariant} from "@/lib/hooks/useVariant"
 import {useRouter} from "next/router"
 import {EvaluationFlow} from "@/lib/enums"
-import TextArea from "antd/es/input/TextArea"
 import {getOpenAIKey} from "@/lib/helpers/utils"
 
 interface AICritiqueEvaluationTableProps {
@@ -165,21 +151,17 @@ Answer ONLY with one of the given grading or evaluation options.
 
         const columnsDataNames = ["columnData0"]
         for (const [idx, columnName] of columnsDataNames.entries()) {
-            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, result)
-                await evaluate(rowIndex)
-                setShouldFetchResults(true)
-            } catch (e) {
-                message.error("Oops! Something went wrong")
-            }
+            let result = await callVariant(
+                inputParamsDict,
+                variantData[idx].inputParams,
+                variantData[idx].optParams,
+                variantData[idx].URIPath,
+            )
+            setRowValue(rowIndex, columnName, result)
+            await evaluate(rowIndex)
+            setShouldFetchResults(true)
         }
     }
 
@@ -365,7 +347,7 @@ Answer ONLY with one of the given grading or evaluation options.
                         headStyle={{minHeight: 44, padding: "0px 12px"}}
                         title="Evaluation strategy prompt"
                     >
-                        <TextArea
+                        <Input.TextArea
                             rows={5}
                             style={{height: 120, padding: "0px 0px"}}
                             bordered={false}
diff --git a/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx
index 13b230b5e8a..763cf64efa7 100644
--- a/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx
@@ -152,9 +152,8 @@ const ExactMatchEvaluationTable: React.FC<ExactMatchEvaluationTableProps> = ({
                 setRowValue(rowIndex, columnName, result)
                 setRowValue(rowIndex, "evaluationFlow", EvaluationFlow.COMPARISON_RUN_STARTED)
                 evaluate(rowIndex)
-            } catch (e) {
+            } catch {
                 setRowValue(rowIndex, columnName, "")
-                message.error("Oops! Something went wrong")
             }
         })
     }
diff --git a/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
index f8fe694c683..1be1a94a311 100644
--- a/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
@@ -145,9 +145,8 @@ const SimilarityMatchEvaluationTable: React.FC<SimilarityMatchEvaluationTablePro
                 setRowValue(rowIndex, columnName, result)
                 setRowValue(rowIndex, "evaluationFlow", EvaluationFlow.COMPARISON_RUN_STARTED)
                 evaluate(rowIndex)
-            } catch (e) {
+            } catch {
                 setRowValue(rowIndex, columnName, "")
-                message.error("Oops! Something went wrong")
             }
         })
     }
diff --git a/agenta-web/src/components/Evaluations/Evaluations.tsx b/agenta-web/src/components/Evaluations/Evaluations.tsx
index b155471bf1a..8117b9a3a33 100644
--- a/agenta-web/src/components/Evaluations/Evaluations.tsx
+++ b/agenta-web/src/components/Evaluations/Evaluations.tsx
@@ -33,6 +33,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"
 
 export default function Evaluations() {
     const {Text, Title} = Typography
@@ -137,23 +138,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 = {
diff --git a/agenta-web/src/components/Layout/ErrorFallback.tsx b/agenta-web/src/components/Layout/ErrorFallback.tsx
new file mode 100644
index 00000000000..edd3d9707ca
--- /dev/null
+++ b/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 href="/apps" type="primary">
+                    Go to home screen
+                </Button>,
+            ]}
+        />
+    )
+}
+
+export default ErrorFallback
diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index f597cdb609b..dcbf8def402 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/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
 
@@ -83,7 +85,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}>
diff --git a/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx b/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx
index 256dd0d3f76..8a03bc566c5 100644
--- a/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx
+++ b/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx
@@ -1,6 +1,5 @@
 import AlertPopup from "@/components/AlertPopup/AlertPopup"
 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"
@@ -47,10 +46,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({
@@ -83,7 +78,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],
@@ -94,64 +88,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],
diff --git a/agenta-web/src/components/Playground/Views/ParametersView.tsx b/agenta-web/src/components/Playground/Views/ParametersView.tsx
index e603546a0a7..679f6873236 100644
--- a/agenta-web/src/components/Playground/Views/ParametersView.tsx
+++ b/agenta-web/src/components/Playground/Views/ParametersView.tsx
@@ -1,7 +1,7 @@
 import {useState} from "react"
 import React from "react"
 import {Parameter} from "@/lib/Types"
-import {Input, Row, Col, Button, Tooltip, message, Space, Card, Collapse} from "antd"
+import {Row, Col, Button, Tooltip, message, Space, Collapse} from "antd"
 import type {CollapseProps} from "antd"
 import {ModelParameters, StringParameters, ObjectParameters} from "./ParametersCards"
 interface Props {
@@ -118,6 +118,7 @@ const ParametersView: React.FC<Props> = ({
             showArrow: true,
         },
     ]
+
     return (
         <div>
             {contextHolder}
diff --git a/agenta-web/src/components/Playground/Views/TestView.tsx b/agenta-web/src/components/Playground/Views/TestView.tsx
index fc1d6fd483d..691c3b0d281 100644
--- a/agenta-web/src/components/Playground/Views/TestView.tsx
+++ b/agenta-web/src/components/Playground/Views/TestView.tsx
@@ -8,6 +8,7 @@ import {TestContext} from "../TestContextProvider"
 import LoadTestsModal from "../LoadTestsModal"
 import AddToTestSetDrawer from "../AddToTestSetDrawer/AddToTestSetDrawer"
 import {DeleteOutlined} from "@ant-design/icons"
+import {getErrorMessage} from "@/lib/helpers/errorHandler"
 
 interface TestViewProps {
     URIPath: string | null
@@ -151,7 +152,7 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, URIPath}) => {
             const newResultsList = [...resultsList]
             newResultsList[testIndex] =
                 "The code has resulted in the following error: \n\n --------------------- \n" +
-                e +
+                getErrorMessage(e) +
                 "\n---------------------\n\nPlease update your code, and re-serve it using cli and try again.\n\nFor more information please read https://docs.agenta.ai/howto/how-to-debug\n\nIf you believe this is a bug, please create a new issue here: https://github.com/Agenta-AI/agenta/issues/new?title=Issue%20in%20playground"
             setResultsList(newResultsList)
         }
@@ -172,7 +173,7 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, URIPath}) => {
             newResultsList.forEach((_, index) => {
                 newResultsList[index] =
                     "The code has resulted in the following error: \n\n --------------------- \n" +
-                    e +
+                    getErrorMessage(e) +
                     "\n---------------------\n\nPlease update your code, and re-serve it using cli and try again.\n\nFor more information please read https://docs.agenta.ai/howto/how-to-debug\n\nIf you believe this is a bug, please create a new issue here: https://github.com/Agenta-AI/agenta/issues/new?title=Issue%20in%20playground"
             })
         }
diff --git a/agenta-web/src/components/Results/Results.tsx b/agenta-web/src/components/Results/Results.tsx
index 579503e8705..2b5b1b466ea 100644
--- a/agenta-web/src/components/Results/Results.tsx
+++ b/agenta-web/src/components/Results/Results.tsx
@@ -10,14 +10,15 @@ import {
     renderPlotForExactMatchEvaluation,
     renderPlotForSimilarityMatchEvaluation,
 } from "./ResultsPlots/ResultsPlots"
+import axios from "@/lib/helpers/axiosConfig"
 
 interface Vote {
     [key: string]: number
 }
 
 const fetchData = async (url: string): Promise<any> => {
-    const response = await fetch(url)
-    return response.json()
+    const response = await axios.get(url)
+    return response.data
 }
 
 const Results: React.FC = () => {
diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index 3e53d977355..d77f4060212 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -3,23 +3,20 @@ import {useRouter} from "next/router"
 import {
     RocketOutlined,
     AppstoreOutlined,
-    FileTextOutlined,
     DatabaseOutlined,
     CloudUploadOutlined,
     BarChartOutlined,
     LineChartOutlined,
-    MonitorOutlined,
-    UserOutlined,
     QuestionOutlined,
-    GlobalOutlined,
     DashboardOutlined,
     LockOutlined,
 } from "@ant-design/icons"
-import {Avatar, Layout, Menu, Modal, Space, Tag, Tooltip, theme} from "antd"
+import {Layout, Menu, Space, Tooltip, theme} from "antd"
 
 import Logo from "../Logo/Logo"
 import Link from "next/link"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
+import {ErrorBoundary} from "react-error-boundary"
 
 const {Sider} = Layout
 
@@ -85,141 +82,147 @@ const Sidebar: React.FC = () => {
                 >
                     <Logo />
                 </div>
-                <Menu mode="inline" selectedKeys={initialSelectedKeys} style={{borderRight: 0}}>
-                    <Menu.Item key="apps" icon={<AppstoreOutlined />}>
-                        <Tooltip
-                            placement="right"
-                            title="Create new applications or switch between your existing projects."
-                        >
-                            <Link
-                                data-cy="app-management-link"
-                                href={getNavigationPath("apps")}
-                                style={{width: "100%"}}
+                <ErrorBoundary fallback={<div />}>
+                    <Menu mode="inline" selectedKeys={initialSelectedKeys} style={{borderRight: 0}}>
+                        <Menu.Item key="apps" icon={<AppstoreOutlined />}>
+                            <Tooltip
+                                placement="right"
+                                title="Create new applications or switch between your existing projects."
                             >
-                                App Management
-                            </Link>
-                        </Tooltip>
-                    </Menu.Item>
-                    {page_name && (
-                        <>
-                            <Menu.Item key="playground" icon={<RocketOutlined />}>
-                                <Tooltip
-                                    placement="right"
-                                    title="Experiment with real data and optimize your parameters including prompts, methods, and configuration settings."
+                                <Link
+                                    data-cy="app-management-link"
+                                    href={getNavigationPath("apps")}
+                                    style={{width: "100%"}}
                                 >
-                                    <Link
-                                        data-cy="app-playground-link"
-                                        href={getNavigationPath("playground")}
-                                        style={{width: "100%"}}
+                                    App Management
+                                </Link>
+                            </Tooltip>
+                        </Menu.Item>
+                        {page_name && (
+                            <>
+                                <Menu.Item key="playground" icon={<RocketOutlined />}>
+                                    <Tooltip
+                                        placement="right"
+                                        title="Experiment with real data and optimize your parameters including prompts, methods, and configuration settings."
                                     >
-                                        Playground
-                                    </Link>
-                                </Tooltip>
-                            </Menu.Item>
-
-                            <Menu.Item key="testsets" icon={<DatabaseOutlined />}>
-                                <Tooltip
-                                    placement="right"
-                                    title="Create and manage testsets for evaluation purposes."
-                                >
-                                    <Link
-                                        data-cy="app-testsets-link"
-                                        href={getNavigationPath("testsets")}
-                                        style={{width: "100%"}}
+                                        <Link
+                                            data-cy="app-playground-link"
+                                            href={getNavigationPath("playground")}
+                                            style={{width: "100%"}}
+                                        >
+                                            Playground
+                                        </Link>
+                                    </Tooltip>
+                                </Menu.Item>
+
+                                <Menu.Item key="testsets" icon={<DatabaseOutlined />}>
+                                    <Tooltip
+                                        placement="right"
+                                        title="Create and manage testsets for evaluation purposes."
                                     >
-                                        Test Sets
-                                    </Link>
-                                </Tooltip>
-                            </Menu.Item>
-
-                            <Menu.Item key="evaluations" icon={<LineChartOutlined />}>
-                                <Tooltip
-                                    placement="right"
-                                    title="Perform 1-to-1 variant comparisons on testsets to identify superior options."
-                                >
-                                    <Link
-                                        data-cy="app-evaluations-link"
-                                        href={getNavigationPath("evaluations")}
-                                        style={{width: "100%"}}
+                                        <Link
+                                            data-cy="app-testsets-link"
+                                            href={getNavigationPath("testsets")}
+                                            style={{width: "100%"}}
+                                        >
+                                            Test Sets
+                                        </Link>
+                                    </Tooltip>
+                                </Menu.Item>
+
+                                <Menu.Item key="evaluations" icon={<LineChartOutlined />}>
+                                    <Tooltip
+                                        placement="right"
+                                        title="Perform 1-to-1 variant comparisons on testsets to identify superior options."
                                     >
-                                        Evaluate
-                                    </Link>
-                                </Tooltip>
-                            </Menu.Item>
-                            <Menu.Item key="results" icon={<BarChartOutlined />}>
-                                <Tooltip
-                                    placement="right"
-                                    title="Analyze the evaluation outcomes to determine the most effective variants."
-                                >
-                                    <Link
-                                        data-cy="app-results-link"
-                                        href={getNavigationPath("results")}
-                                        style={{width: "100%"}}
+                                        <Link
+                                            data-cy="app-evaluations-link"
+                                            href={getNavigationPath("evaluations")}
+                                            style={{width: "100%"}}
+                                        >
+                                            Evaluate
+                                        </Link>
+                                    </Tooltip>
+                                </Menu.Item>
+                                <Menu.Item key="results" icon={<BarChartOutlined />}>
+                                    <Tooltip
+                                        placement="right"
+                                        title="Analyze the evaluation outcomes to determine the most effective variants."
                                     >
-                                        Results
-                                    </Link>
-                                </Tooltip>
-                            </Menu.Item>
-
-                            <Menu.Item key="endpoints" icon={<CloudUploadOutlined />}>
-                                <Tooltip
-                                    placement="right"
-                                    title="Monitor production logs to ensure seamless operations."
-                                >
-                                    <Link
-                                        data-cy="app-endpoints-link"
-                                        href={getNavigationPath("endpoints")}
-                                        style={{width: "100%"}}
+                                        <Link
+                                            data-cy="app-results-link"
+                                            href={getNavigationPath("results")}
+                                            style={{width: "100%"}}
+                                        >
+                                            Results
+                                        </Link>
+                                    </Tooltip>
+                                </Menu.Item>
+
+                                <Menu.Item key="endpoints" icon={<CloudUploadOutlined />}>
+                                    <Tooltip
+                                        placement="right"
+                                        title="Monitor production logs to ensure seamless operations."
                                     >
-                                        <Space>
-                                            <span>Endpoints</span>
-                                        </Space>
-                                    </Link>
-                                </Tooltip>
-                            </Menu.Item>
-                        </>
-                    )}
-                </Menu>
-
-                <div style={{flex: 1}} />
-
-                <Menu
-                    mode="vertical"
-                    style={{paddingBottom: 24, borderRight: 0}}
-                    selectedKeys={selectedKeys}
-                >
-                    <Menu.Item key="apikeys" icon={<LockOutlined />}>
-                        <Tooltip
-                            placement="right"
-                            title="Your api keys that are used in applications"
-                        >
-                            <Link
-                                data-cy="apikeys-link"
-                                href={getNavigationPath("keys")}
-                                style={{width: "100%"}}
+                                        <Link
+                                            data-cy="app-endpoints-link"
+                                            href={getNavigationPath("endpoints")}
+                                            style={{width: "100%"}}
+                                        >
+                                            <Space>
+                                                <span>Endpoints</span>
+                                            </Space>
+                                        </Link>
+                                    </Tooltip>
+                                </Menu.Item>
+                            </>
+                        )}
+                    </Menu>
+
+                    <div style={{flex: 1}} />
+
+                    <Menu
+                        mode="vertical"
+                        style={{paddingBottom: 24, borderRight: 0}}
+                        selectedKeys={selectedKeys}
+                    >
+                        <Menu.Item key="apikeys" icon={<LockOutlined />}>
+                            <Tooltip
+                                placement="right"
+                                title="Your api keys that are used in applications"
                             >
-                                <Space>
-                                    <span>API keys</span>
-                                </Space>
+                                <Link
+                                    data-cy="apikeys-link"
+                                    href={getNavigationPath("keys")}
+                                    style={{width: "100%"}}
+                                >
+                                    <Space>
+                                        <span>API keys</span>
+                                    </Space>
+                                </Link>
+                            </Tooltip>
+                        </Menu.Item>
+                        <Menu.Item
+                            key="theme"
+                            icon={<DashboardOutlined />}
+                            onClick={toggleAppTheme}
+                        >
+                            <span>{appTheme === "light" ? "Dark mode" : "Light mode"}</span>
+                        </Menu.Item>
+                        <Menu.Item key="help" icon={<QuestionOutlined />}>
+                            <Link href="https://docs.agenta.ai" target="_blank">
+                                Help
                             </Link>
-                        </Tooltip>
-                    </Menu.Item>
-                    <Menu.Item key="theme" icon={<DashboardOutlined />} onClick={toggleAppTheme}>
-                        <span>{appTheme === "light" ? "Dark mode" : "Light mode"}</span>
-                    </Menu.Item>
-                    <Menu.Item key="help" icon={<QuestionOutlined />}>
-                        <Link href="https://docs.agenta.ai" target="_blank">
-                            Help
-                        </Link>
-                    </Menu.Item>
-                    {/* <Menu.Item key="user">
+                        </Menu.Item>
+                        {/* <Menu.Item key="user">
                         <Space>
                             <Avatar size="small" style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                             <span>Foulen</span>
                         </Space>
 
                     </Menu.Item> */}
-                </Menu>
+                    </Menu>
+                </ErrorBoundary>
             </div>
         </Sider>
     )
diff --git a/agenta-web/src/components/TestSetTable/TestsetTable.tsx b/agenta-web/src/components/TestSetTable/TestsetTable.tsx
index 4517b763f23..1d2dc8d9db1 100644
--- a/agenta-web/src/components/TestSetTable/TestsetTable.tsx
+++ b/agenta-web/src/components/TestSetTable/TestsetTable.tsx
@@ -15,7 +15,6 @@ import useStateCallback from "@/hooks/useStateCallback"
 import {AxiosResponse} from "axios"
 import EditRowModal from "./EditRowModal"
 import {getVariantInputParameters} from "@/lib/helpers/variantHelper"
-import {globalErrorHandler} from "@/lib/helpers/errorHandler"
 import {convertToCsv, downloadCsv} from "../../lib/helpers/utils"
 
 export const CHECKBOX_COL = {
@@ -181,9 +180,8 @@ const TestsetTable: React.FC<testsetTableProps> = ({mode}) => {
                 colData.push({field: "correct_answer"})
 
                 applyColData(colData)
-            })().catch((e) => {
+            })().catch(() => {
                 applyColData([])
-                globalErrorHandler(e)
             })
         }
     }, [mode, testset_id, appName])
@@ -413,9 +411,7 @@ const TestsetTable: React.FC<testsetTableProps> = ({mode}) => {
                 }
             }
         } catch (error) {
-            mssgModal("error", "Error saving test set")
             console.error("Error saving test set:", error)
-            throw error
         }
     }
 
diff --git a/agenta-web/src/lib/helpers/axiosConfig.ts b/agenta-web/src/lib/helpers/axiosConfig.ts
new file mode 100644
index 00000000000..cb4a7d4631f
--- /dev/null
+++ b/agenta-web/src/lib/helpers/axiosConfig.ts
@@ -0,0 +1,25 @@
+import axiosApi from "axios"
+import {getErrorMessage, globalErrorHandler} from "./errorHandler"
+
+const axios = axiosApi.create({
+    headers: {
+        "Content-Type": "application/json",
+    },
+})
+
+axios.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        let msg = getErrorMessage(error.response?.data?.error || error.response?.data, "")
+        if (!msg)
+            msg = `${error.response?.statusText ? error.response.statusText + "! " : ""}${
+                error.message
+            }`
+        error.message = msg
+
+        globalErrorHandler(error)
+        throw error
+    },
+)
+
+export default axios
diff --git a/agenta-web/src/lib/helpers/errorHandler.ts b/agenta-web/src/lib/helpers/errorHandler.ts
index 382994957ec..8389005f041 100644
--- a/agenta-web/src/lib/helpers/errorHandler.ts
+++ b/agenta-web/src/lib/helpers/errorHandler.ts
@@ -1,11 +1,21 @@
 import {message} from "antd"
 
-export const globalErrorHandler = (error: any) => {
-    error?.preventDefault && error.preventDefault()
+export const getErrorMessage = (error: any, fallback = "An unknown error occurred!") => {
+    let message = fallback
+    try {
+        error?.preventDefault && error.preventDefault()
+        if (typeof error === "string") message = error
+        else if (error.message) message = error.message
+        else if (error && typeof error === "object")
+            message = getErrorMessage(Object.values(error)[0])
+        else message = JSON.stringify(error)
+    } catch {}
 
-    if (typeof error === "string") error = {message: error}
+    return message
+}
 
-    error.message = error.message || "An unknown error occurred!"
-    console.error(error.message, error)
-    message.error(error.message)
+export const globalErrorHandler = (error: any) => {
+    const errorMsg = getErrorMessage(error)
+    console.error(errorMsg, error)
+    message.error(errorMsg)
 }
diff --git a/agenta-web/src/lib/services/api.ts b/agenta-web/src/lib/services/api.ts
index 1ad299ad99b..f9538383f97 100644
--- a/agenta-web/src/lib/services/api.ts
+++ b/agenta-web/src/lib/services/api.ts
@@ -1,5 +1,5 @@
 import useSWR from "swr"
-import axios from "axios"
+import axios from "@/lib//helpers/axiosConfig"
 import {parseOpenApiSchema} from "@/lib/helpers/openapi_parser"
 import {Variant, Parameter, EvaluationResponseType, Evaluation, AppTemplate} from "@/lib/Types"
 import {
@@ -11,7 +11,7 @@ import {EvaluationType} from "../enums"
  * Raw interface for the parameters parsed from the openapi.json
  */
 
-const fetcher = (...args) => fetch(...args).then((res) => res.json())
+const fetcher = (url: string) => axios.get(url).then((res) => res.data)
 
 export async function fetchVariants(app: string): Promise<Variant[]> {
     const response = await axios.get(
@@ -84,29 +84,10 @@ export function callVariant(
     }
 
     return axios
-        .post(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${URIPath}/generate`, requestBody, {
-            headers: {
-                accept: "application/json",
-                "Content-Type": "application/json",
-            },
-        })
+        .post(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${URIPath}/generate`, requestBody)
         .then((res) => {
             return res.data
         })
-        .catch((error) => {
-            if (error.response && error.response.status === 500) {
-                throw new Error(error.response.data.error + " " + error.response.data.traceback, {
-                    cause: error.response.data.error,
-                })
-            }
-            if (error.response && error.response.status === 422) {
-                let cause = `Unprocessable Entity: The server understands the content type of the request, and the syntax of the request is correct, but it was unable to process the contained instructions.`
-                throw new Error(`${cause} Data: ${JSON.stringify(error.response.data, null, 2)}`, {
-                    cause,
-                })
-            }
-            throw error // If it's not a 500 status, or if error.response is undefined, rethrow the error so it can be handled elsewhere.
-        })
 }
 
 /**
@@ -116,34 +97,29 @@ export function callVariant(
  * @returns
  */
 export const getVariantParametersFromOpenAPI = async (app: string, variant: Variant) => {
-    try {
-        const sourceName = variant.templateVariantName
-            ? variant.templateVariantName
-            : variant.variantName
-        const url = `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${app}/${sourceName}/openapi.json`
-        const response = await axios.get(url)
-        let APIParams = parseOpenApiSchema(response.data)
-        // we create a new param for DictInput that will contain the name of the inputs
-        APIParams = APIParams.map((param) => {
-            console.log("param", param)
-            if (param.type === "object") {
-                // if param.default is defined
-                if (param?.default) {
-                    param.default = param.default.map((item: string) => {
-                        return {name: item}
-                    })
-                } else {
-                    param.default = []
-                }
+    const sourceName = variant.templateVariantName
+        ? variant.templateVariantName
+        : variant.variantName
+    const url = `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${app}/${sourceName}/openapi.json`
+    const response = await axios.get(url)
+    let APIParams = parseOpenApiSchema(response.data)
+    // we create a new param for DictInput that will contain the name of the inputs
+    APIParams = APIParams.map((param) => {
+        if (param.type === "object") {
+            // if param.default is defined
+            if (param?.default) {
+                param.default = param.default.map((item: string) => {
+                    return {name: item}
+                })
+            } else {
+                param.default = []
             }
-            return param
-        })
-        const initOptParams = APIParams.filter((param) => !param.input) // contains the default values too!
-        const inputParams = APIParams.filter((param) => param.input) // don't have input values
-        return {initOptParams, inputParams}
-    } catch (error) {
-        throw error
-    }
+        }
+        return param
+    })
+    const initOptParams = APIParams.filter((param) => !param.input) // contains the default values too!
+    const inputParams = APIParams.filter((param) => param.input) // don't have input values
+    return {initOptParams, inputParams}
 }
 
 /**
@@ -154,24 +130,16 @@ export async function saveNewVariant(appName: string, variant: Variant, paramete
         app_name: appName,
         variant_name: variant.templateVariantName,
     }
-    try {
-        const response = await axios.post(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/add/from_previous/`,
-            {
-                previous_app_variant: appVariant,
-                new_variant_name: variant.variantName,
-                parameters: parameters.reduce((acc, param) => {
-                    return {...acc, [param.name]: param.default}
-                }, {}),
-            },
-        )
-
-        // You can use the response here if needed
-    } catch (error) {
-        console.error(error)
-        // Handle error here
-        throw error
-    }
+    await axios.post(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/add/from_previous/`,
+        {
+            previous_app_variant: appVariant,
+            new_variant_name: variant.variantName,
+            parameters: parameters.reduce((acc, param) => {
+                return {...acc, [param.name]: param.default}
+            }, {}),
+        },
+    )
 }
 
 export async function updateVariantParams(
@@ -179,47 +147,29 @@ export async function updateVariantParams(
     variant: Variant,
     parameters: Parameter[],
 ) {
-    try {
-        const response = await axios.put(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/update_variant_parameters/`,
-            {
-                app_name: appName,
-                variant_name: variant.variantName,
-                parameters: parameters.reduce((acc, param) => {
-                    return {...acc, [param.name]: param.default}
-                }, {}),
-            },
-        )
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
+    await axios.put(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/update_variant_parameters/`,
+        {
+            app_name: appName,
+            variant_name: variant.variantName,
+            parameters: parameters.reduce((acc, param) => {
+                return {...acc, [param.name]: param.default}
+            }, {}),
+        },
+    )
 }
 
 export async function removeApp(appName: string) {
-    try {
-        await axios.delete(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/remove_app/`,
-            {data: {app_name: appName}},
-        )
-        console.log("App removed: " + appName)
-    } catch (error) {
-        console.error("Error removing " + appName + " " + error)
-        throw error
-    }
+    await axios.delete(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/remove_app/`, {
+        data: {app_name: appName},
+    })
 }
 
 export async function removeVariant(appName: string, variantName: string) {
-    try {
-        await axios.delete(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/remove_variant/`,
-            {data: {app_name: appName, variant_name: variantName}},
-        )
-        console.log("Variant removed: " + variantName)
-    } catch (error) {
-        console.error("Error removing " + variantName + " " + error)
-        throw error
-    }
+    await axios.delete(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/remove_variant/`,
+        {data: {app_name: appName, variant_name: variantName}},
+    )
 }
 /**
  * Loads the list of testsets
@@ -240,66 +190,41 @@ export const useLoadTestsetsList = (app_name: string) => {
 }
 
 export async function createNewTestset(appName: string, testsetName: string, testsetData: any) {
-    try {
-        const response = await axios.post(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${appName}`,
-            {
-                name: testsetName,
-                csvdata: testsetData,
-            },
-        )
-        return response
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
+    const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${appName}`,
+        {
+            name: testsetName,
+            csvdata: testsetData,
+        },
+    )
+    return response
 }
 
 export async function updateTestset(testsetId: String, testsetName: string, testsetData: any) {
-    try {
-        const response = await axios.put(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${testsetId}`,
-            {
-                name: testsetName,
-                csvdata: testsetData,
-            },
-        )
-        return response
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
+    const response = await axios.put(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${testsetId}`,
+        {
+            name: testsetName,
+            csvdata: testsetData,
+        },
+    )
+    return response
 }
 
 export const loadTestset = async (testsetId: string) => {
-    return fetch(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${testsetId}`, {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    })
-        .then((res) => res.json())
-        .then((data) => {
-            return data
-        })
-        .catch((err) => {
-            console.error(err)
-        })
+    const response = await axios.get(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${testsetId}`,
+    )
+    return response.data
 }
 
 export const deleteTestsets = async (ids: string[]) => {
-    try {
-        const response = await axios({
-            method: "delete",
-            url: `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets`,
-            data: {testset_ids: ids},
-        })
-        if (response.status === 200) {
-            return response.data
-        }
-    } catch (error) {
-        console.error(`Error deleting entity: ${error}`)
-        throw error
-    }
+    const response = await axios({
+        method: "delete",
+        url: `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets`,
+        data: {testset_ids: ids},
+    })
+    return response.data
 }
 
 const eval_endpoint = axios.create({
@@ -307,69 +232,55 @@ const eval_endpoint = axios.create({
 })
 
 export const loadEvaluations = async (app_name: string) => {
-    try {
-        return await eval_endpoint.get(`?app_name=${app_name}`).then((responseData) => {
+    return await axios
+        .get(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations?app_name=${app_name}`)
+        .then((responseData) => {
             const evaluations = responseData.data.map((item: EvaluationResponseType) => {
                 return fromEvaluationResponseToEvaluation(item)
             })
 
             return evaluations
         })
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
 }
 
 export const loadEvaluation = async (evaluationId: string) => {
-    try {
-        return await eval_endpoint.get(evaluationId).then((responseData) => {
+    return await axios
+        .get(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationId}`)
+        .then((responseData) => {
             return fromEvaluationResponseToEvaluation(responseData.data)
         })
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
 }
 
 export const deleteEvaluations = async (ids: string[]) => {
-    try {
-        const response = await axios({
-            method: "delete",
-            url: `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations`,
-            data: {evaluations_ids: ids},
-        })
-        if (response.status === 200) {
-            return response.data
-        }
-    } catch (error) {
-        console.error(`Error deleting entity: ${error}`)
-        throw error
-    }
+    await axios({
+        method: "delete",
+        url: `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations`,
+        data: {evaluations_ids: ids},
+    })
 }
 
 export const loadEvaluationsScenarios = async (
     evaluationTableId: string,
     evaluation: Evaluation,
 ) => {
-    try {
-        return await eval_endpoint
-            .get(`${evaluationTableId}/evaluation_scenarios`)
-            .then((responseData) => {
-                const evaluationsRows = responseData.data.map((item: any) => {
-                    return fromEvaluationScenarioResponseToEvaluationScenario(item, evaluation)
-                })
-
-                return evaluationsRows
+    return await axios
+        .get(
+            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationTableId}/evaluation_scenarios`,
+        )
+        .then((responseData) => {
+            const evaluationsRows = responseData.data.map((item: any) => {
+                return fromEvaluationScenarioResponseToEvaluationScenario(item, evaluation)
             })
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
+
+            return evaluationsRows
+        })
 }
 
 export const updateEvaluation = async (evaluationId: string, data) => {
-    const response = await eval_endpoint.put(`${evaluationId}`, data)
+    const response = await axios.put(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationId}`,
+        data,
+    )
     return response.data
 }
 
@@ -379,33 +290,26 @@ export const updateEvaluationScenario = async (
     data,
     evaluationType: EvaluationType,
 ) => {
-    const response = await eval_endpoint.put(
-        `${evaluationTableId}/evaluation_scenario/${evaluationScenarioId}/${evaluationType}`,
+    const response = await axios.put(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationTableId}/evaluation_scenario/${evaluationScenarioId}/${evaluationType}`,
         data,
     )
     return response.data
 }
 
 export const postEvaluationScenario = async (evaluationTableId: string, data) => {
-    const response = await eval_endpoint.post(`${evaluationTableId}/evaluation_scenario`, data)
+    const response = await eval_endpoint.post(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationTableId}/evaluation_scenario`,
+        data,
+    )
     return response.data
 }
 
 export const fetchEvaluationResults = async (evaluationId: string) => {
-    try {
-        const response = await fetch(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationId}/results`,
-        )
-        if (response.ok) {
-            const data = await response.json()
-            return data
-        } else {
-            throw new Error("Failed to fetch results.")
-        }
-    } catch (error) {
-        console.error("Error fetching results:", error)
-        throw error
-    }
+    const response = await axios.get(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationId}/results`,
+    )
+    return response.data
 }
 
 export const fetchApps = () => {
@@ -421,54 +325,23 @@ export const fetchApps = () => {
 }
 
 export const getTemplates = async () => {
-    return fetch(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/containers/templates/`, {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    })
-        .then((response) => response.json())
-        .then((data) => {
-            return data
-        })
-        .catch((error) => {
-            console.error("Error fetching templates:", error)
-        })
+    const response = await axios.get(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/containers/templates/`,
+    )
+    return response.data
 }
 
 export const pullTemplateImage = async (image_name: string) => {
-    return fetch(
+    const response = await axios.get(
         `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/containers/templates/${image_name}/images/`,
-        {
-            headers: {
-                "Content-Type": "application/json",
-            },
-        },
     )
-        .then((response) => response.json())
-        .then((data) => {
-            return data
-        })
-        .catch((error) => {
-            console.error("Error fetching template image:", error)
-            throw error
-        })
+    return response.data
 }
 
 export const startTemplate = async (templateObj: AppTemplate) => {
-    try {
-        const response = await axios.post(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/add/from_template/`,
-            templateObj,
-            {
-                headers: {
-                    accept: "application/json",
-                    "Content-Type": "application/json",
-                },
-            },
-        )
-        return response
-    } catch (error) {
-        console.error("Start Template Error => ", error)
-        throw error
-    }
+    const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/add/from_template/`,
+        templateObj,
+    )
+    return response
 }
diff --git a/agenta-web/src/pages/apps/[app_name]/testsets/index.tsx b/agenta-web/src/pages/apps/[app_name]/testsets/index.tsx
index 894fdc1a132..82d895635c0 100644
--- a/agenta-web/src/pages/apps/[app_name]/testsets/index.tsx
+++ b/agenta-web/src/pages/apps/[app_name]/testsets/index.tsx
@@ -8,6 +8,7 @@ import {useState, useEffect} from "react"
 import {formatDate} from "@/lib/helpers/dateTimeHelper"
 import {DeleteOutlined} from "@ant-design/icons"
 import {deleteTestsets} from "@/lib/services/api"
+import axios from "@/lib/helpers/axiosConfig"
 
 type testsetTableDatatype = {
     key: string
@@ -16,8 +17,8 @@ type testsetTableDatatype = {
 }
 
 const fetchData = async (url: string): Promise<any> => {
-    const response = await fetch(url)
-    return response.json()
+    const response = await axios.get(url)
+    return response.data
 }
 
 export default function testsets() {
diff --git a/agenta-web/src/pages/apps/[app_name]/testsets/new/upload/index.tsx b/agenta-web/src/pages/apps/[app_name]/testsets/new/upload/index.tsx
index e7b6bd37b44..028b3d917aa 100644
--- a/agenta-web/src/pages/apps/[app_name]/testsets/new/upload/index.tsx
+++ b/agenta-web/src/pages/apps/[app_name]/testsets/new/upload/index.tsx
@@ -1,7 +1,7 @@
 import {UploadOutlined} from "@ant-design/icons"
 import {Alert, Button, Form, Input, Space, Spin, Upload, message} from "antd"
 import {useState} from "react"
-import axios from "axios"
+import axios from "@/lib/helpers/axiosConfig"
 import {useRouter} from "next/router"
 
 export default function AddANewTestset() {
@@ -31,7 +31,7 @@ export default function AddANewTestset() {
             try {
                 setUploadLoading(true)
                 // TODO: move to api.ts
-                const response = await axios.post(
+                await axios.post(
                     `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/upload`,
                     formData,
                     {
@@ -40,22 +40,10 @@ export default function AddANewTestset() {
                         },
                     },
                 )
-
-                if (response.status === 200) {
-                    // File uploaded successfully
-                    const data = response.data
-
-                    setUploadLoading(false)
-                    form.resetFields()
-
-                    router.push(`/apps/${app_name}/testsets`)
-                } else {
-                    // Handle error
-                    console.error("Failed to upload file:", response.status)
-                    setUploadLoading(false) // Set loading state to false after failed upload
-                }
-            } catch (error) {
-                console.error("Error uploading file", error)
+                form.resetFields()
+                router.push(`/apps/${app_name}/testsets`)
+            } finally {
+                setUploadLoading(false)
             }
         }
     }

From 156686b882b24740e524f1ab6266727068bd9aea Mon Sep 17 00:00:00 2001
From: MohammedMaaz <maazkhawar25@gmail.com>
Date: Thu, 31 Aug 2023 03:13:19 +0500
Subject: [PATCH 2/3] updated package-lock.json

---
 agenta-web/package-lock.json | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/agenta-web/package-lock.json b/agenta-web/package-lock.json
index f976553ed22..8bed4f1b79b 100644
--- a/agenta-web/package-lock.json
+++ b/agenta-web/package-lock.json
@@ -14,10 +14,10 @@
                 "@mdx-js/loader": "^2.3.0",
                 "@mdx-js/react": "^2.3.0",
                 "@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",
                 "ag-grid-react": "^30.0.3",
                 "antd": "^5.4.7",
@@ -33,6 +33,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",
@@ -44,8 +45,6 @@
                 "usehooks-ts": "^2.9.1"
             },
             "devDependencies": {
-                "@types/js-beautify": "^1.14.0",
-                "@types/react-syntax-highlighter": "^15.5.7",
                 "cypress": "^12.11.0",
                 "eslint-config-prettier": "^8.8.0",
                 "node-mocks-http": "^1.12.2",
@@ -734,8 +733,7 @@
         "node_modules/@types/js-beautify": {
             "version": "1.14.0",
             "resolved": "https://registry.npmjs.org/@types/js-beautify/-/js-beautify-1.14.0.tgz",
-            "integrity": "sha512-OrJo4dEKd/8YKwGWuRP7qC/NoxNQCVsjAT7aHhgoIrNJaaDudLwX8husFrklktmXKIFbXevxzrLyEhB1842zjg==",
-            "dev": true
+            "integrity": "sha512-OrJo4dEKd/8YKwGWuRP7qC/NoxNQCVsjAT7aHhgoIrNJaaDudLwX8husFrklktmXKIFbXevxzrLyEhB1842zjg=="
         },
         "node_modules/@types/json-schema": {
             "version": "7.0.12",
@@ -798,7 +796,6 @@
             "version": "15.5.7",
             "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.7.tgz",
             "integrity": "sha512-bo5fEO5toQeyCp0zVHBeggclqf5SQ/Z5blfFmjwO5dkMVGPgmiwZsJh9nu/Bo5L7IHTuGWrja6LxJVE2uB5ZrQ==",
-            "dev": true,
             "dependencies": {
                 "@types/react": "*"
             }
@@ -7482,6 +7479,17 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-error-boundary": {
+            "version": "4.0.11",
+            "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.11.tgz",
+            "integrity": "sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5"
+            },
+            "peerDependencies": {
+                "react": ">=16.13.1"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

From e73376fb6e2f6c3c9f699283801633d469c1f351 Mon Sep 17 00:00:00 2001
From: Mahmoud Mabrouk <mahmoud.mabrouk@tu-berlin.de>
Date: Thu, 31 Aug 2023 14:59:45 +0200
Subject: [PATCH 3/3] fixing the uri for containers

---
 agenta-web/src/lib/services/api.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/lib/services/api.ts b/agenta-web/src/lib/services/api.ts
index 40f427957ea..94b478dddf0 100644
--- a/agenta-web/src/lib/services/api.ts
+++ b/agenta-web/src/lib/services/api.ts
@@ -89,7 +89,10 @@ export async function callVariant(
     const appContainerURIPath = await getAppContainerURL(splittedURIPath[0], splittedURIPath[1])
 
     return axios
-        .post(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${URIPath}/generate`, requestBody)
+        .post(
+            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${appContainerURIPath}/generate`,
+            requestBody,
+        )
         .then((res) => {
             return res.data
         })
@@ -105,7 +108,8 @@ export const getVariantParametersFromOpenAPI = async (app: string, variant: Vari
     const sourceName = variant.templateVariantName
         ? variant.templateVariantName
         : variant.variantName
-    const url = `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${app}/${sourceName}/openapi.json`
+    const appContainerURIPath = await getAppContainerURL(app, sourceName)
+    const url = `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${appContainerURIPath}/openapi.json`
     const response = await axios.get(url)
     let APIParams = parseOpenApiSchema(response.data)
     // we create a new param for DictInput that will contain the name of the inputs