fix: implement Global Error Boundary to prevent application crashes

[Priyasharma620064]

Description

while exploring the codebase, I noticed that the dashboard didn't have a 'safety net' for runtime errors. Right now, if a component crashes (like from a bad API response or a data parsing issue), the whole screen just goes white.

I've added a Global Error Boundary to catch these unexpected crashes. Now, instead of a blank screen, users will see a professional 'Something went wrong' page with a quick reload button. This makes the dashboard much more resilient and reliable for production users.

Changes made:

• Added a GlobalErrorBoundary component using Material UI.
• Wrapped the main App component to protect the entire application tree.
• Added a 'Reload' utility to help users recover quickly without a manual browser refresh.

[volcano-sh-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign monokaix for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[gemini-code-assist]

Code Review

This pull request introduces a GlobalErrorBoundary component to provide a graceful fallback UI when uncaught errors occur in the frontend. The boundary is integrated into the main App component, wrapping the entire application structure. Review feedback suggests moving the GlobalErrorBoundary inside the ThemeProvider to ensure the fallback UI respects the application's custom theme and recommends externalizing hardcoded strings to support future internationalization.

[gemini-code-assist]

The GlobalErrorBoundary is currently wrapping the ThemeProvider. When an error occurs and the fallback UI is rendered, it will be outside the theme context, causing Material UI components to use their default styles instead of your custom theme. Moving the error boundary inside the ThemeProvider ensures that the error page maintains visual consistency with the rest of the application.

Suggested change

	<GlobalErrorBoundary>
	<ThemeProvider theme={theme}>
	<Router>
	<Routes>
	<Route path="/" element={<Layout />}>
	<Route
	index
	element={<Navigate to="/dashboard" replace />}
	/>
	<Route path="dashboard" element={<Dashboard />} />
	<Route path="jobs" element={<Jobs />} />
	<Route path="queues" element={<Queues />} />
	<Route path="pods" element={<Pods />} />
	<Route path="podgroups" element={<PodGroups />} />
	</Route>
	</Routes>
	</Router>
	</ThemeProvider>
	</GlobalErrorBoundary>
	<ThemeProvider theme={theme}>
	<GlobalErrorBoundary>
	<Router>
	<Routes>
	<Route path="/" element={<Layout />}>
	<Route
	index
	element={<Navigate to="/dashboard" replace />}
	/>
	<Route path="dashboard" element={<Dashboard />} />
	<Route path="jobs" element={<Jobs />} />
	<Route path="queues" element={<Queues />} />
	<Route path="pods" element={<Pods />} />
	<Route path="podgroups" element={<PodGroups />} />
	</Route>
	</Routes>
	</Router>
	</GlobalErrorBoundary>
	</ThemeProvider>

[gemini-code-assist]

The user-facing strings "Something went wrong", the error description, and "Reload Dashboard" are hardcoded. To ensure the application is ready for internationalization (i18n), these strings should be moved to a localization file or a constants file.