feature/404-page

web/src/components/App.tsx

@@ -5,6 +5,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import { Box, Container, CssBaseline } from '@mui/material'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
 import { LocalizationProvider } from '@mui/x-date-pickers'
+import { NotFound } from '../routes/not-found/NotFound'
 import { Provider } from 'react-redux'
 import { ReduxRouter, createRouterMiddleware } from '@lagunovsky/redux-react-router'
 import { Route, Routes } from 'react-router-dom'
@@ -69,6 +70,7 @@ const App = (): ReactElement => {
                       element={<ColumnLevel />}
                     />
                     <Route path={'/lineage/:nodeType/:namespace/:name'} element={<TableLevel />} />
+                    <Route path='*' element={<NotFound />} />
                   </Routes>
                   <Toast />
                 </Box>

web/src/routes/not-found/NotFound.tsx

@@ -0,0 +1,23 @@
+// Copyright 2018-2024 contributors to the Marquez project
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react'
+import { Box } from '@mui/system'
+import { Button } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+import MqEmpty from '../../components/core/empty/MqEmpty'
+
+export const NotFound = () => {
+  return (
+    <Box pt={4} display={'flex'} justifyContent={'center'}>
+      <MqEmpty title={'Not Found'}>
+        <>
+          Sorry, the page you are looking for does not exist.
+          <Button size={'small'} component={RouterLink} to={'/'}>
+            Go Home
+          </Button>
+        </>
+      </MqEmpty>
+    </Box>
+  )
+}