4558 - error handling (#4600)

Author: camiloHimura

ui/src/router.tsx

@@ -14,6 +14,7 @@ import { ProjectDetails } from './features/project/project-details.component';
 import { Layout } from './layout';
 import { Dataset } from './routes/dataset/dataset.component';
 import { SelectedDataProvider } from './routes/dataset/provider';
+import { ErrorPage } from './routes/error-page/error-page';
 import { Inference } from './routes/inference/inference';
 import { Labels } from './routes/labels/labels';
 import { Models } from './routes/models/models';
@@ -60,7 +61,7 @@ export const router = createBrowserRouter([
                 <Layout />
             </Suspense>
         ),
-        errorElement: <div>Oh no</div>,
+        errorElement: <ErrorPage />,
         children: [
             {
                 index: true,

ui/src/routes/error-page/error-page.tsx

@@ -0,0 +1,68 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button, Heading, IllustratedMessage, View } from '@geti/ui';
+import { NotFound } from '@geti/ui/icons';
+import { isRouteErrorResponse, useRouteError } from 'react-router';
+
+import { paths } from '../../router';
+import { redirectTo } from '../utils';
+
+const useErrorMessage = () => {
+    const error = useRouteError();
+
+    if (isRouteErrorResponse(error)) {
+        if (error.status === 400) {
+            return 'The server cannot or will not process the current request.';
+        }
+
+        if (error.status === 403) {
+            return 'You do not have permission to access this page.';
+        }
+
+        if (error.status === 404) {
+            return "This page doesn't exist!";
+        }
+
+        if (error.status === 401) {
+            return "You aren't authorized to see this";
+        }
+
+        if (error.status === 500) {
+            return 'The server encountered an error and could not complete your request.';
+        }
+
+        if (error.status === 503) {
+            return 'Looks like our API is down';
+        }
+    }
+
+    if (error instanceof TypeError) {
+        return error.message;
+    }
+
+    return 'An unknown error occurred';
+};
+
+export const ErrorPage = (): JSX.Element => {
+    const message = useErrorMessage();
+
+    return (
+        <View height={'100vh'}>
+            <IllustratedMessage>
+                <NotFound />
+                <Heading>{message}</Heading>
+
+                <Button
+                    variant={'accent'}
+                    marginTop={'size-200'}
+                    onPress={() => {
+                        redirectTo(paths.root({}));
+                    }}
+                >
+                    Go back to home page
+                </Button>
+            </IllustratedMessage>
+        </View>
+    );
+};

ui/src/routes/utils.ts

@@ -0,0 +1,6 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+export const redirectTo = (url: string): void => {
+    window.location.href = url;
+};