Add ErrorPage component to handle route errors

src/pages/ErrorPage.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
+
+const ErrorPage =() =>{
+  const error = useRouteError();
+  console.error(error);
+
+  if (isRouteErrorResponse(error)) {
+    return (
+      <div>
+        <h1>{error.status}</h1>
+        <p>{error.statusText}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>Something went wrong.</h1>
+      <p>{error?.message || 'Unknown error occurred'}</p>
+    </div>
+  );
+}
+export default ErrorPage

src/router/AppRoutes.jsx

@@ -30,7 +30,7 @@ import MasterPage from "../pages/master/MasterPage";
 import Support from "../pages/support/Support";
 import Documentation from "../pages/support/Documentation";
 import Connect from "../pages/support/Connect";
-import { ErrorPage } from "../pages/support/ErrorPage";
+import ErrorPage from "../pages/ErrorPage";
 import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
 
 // Protected Route Wrapper
@@ -51,6 +51,7 @@ const router = createBrowserRouter(
     },
     {
       element: <ProtectedRoute />,
+      errorElement:<ErrorPage/>,
       children: [
         {
           element: <HomeLayout />,