fix: add RouteErrorBoundary for data router error handling

The data router catches render errors internally instead of letting
them reach the React class component error boundary. Add an errorElement
on the root route that renders the same ErrorPage component and reports
to Sentry, so intentional page crashes (developer options, E2E tests)
still show the custom error page.

Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>

Author: cursoragent

ui/pages/index.js

@@ -6,6 +6,7 @@ import {
   Outlet,
   RouterProvider,
   createHashRouter,
+  useRouteError,
 } from 'react-router-dom';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { captureException } from '../../shared/lib/sentry';
@@ -25,6 +26,20 @@ import ErrorPage from './error-page/error-page.component';
 
 import Routes, { routeConfig } from './routes';
 
+/**
+ * Error boundary for the data router. When a route component throws,
+ * createHashRouter catches it internally instead of letting it reach the
+ * React class component boundary. This renders the same ErrorPage used by
+ * the class boundary, and reports to Sentry.
+ */
+function RouteErrorBoundary() {
+  const error = useRouteError();
+
+  captureException(error);
+
+  return <ErrorPage error={error} />;
+}
+
 /**
  * Root layout route element containing all context providers.
  * Renders <Outlet /> which is replaced by the matched child route (<Routes />).
@@ -60,6 +75,7 @@ function AppProviders() {
 const router = createHashRouter([
   {
     element: <AppProviders />,
+    errorElement: <RouteErrorBoundary />,
     children: [
       {
         element: <Routes />,