Improve error boundary granularity with page and section level boundaries

Implement three-level error boundary strategy:
- Top-level (app shell): catches critical failures
- Page-level: preserves navigation when page crashes
- Section-level: graceful degradation for charts/tables

Create new components:
- PageErrorBoundary: wraps page routes
- SectionErrorBoundary: wraps data-heavy sections

Enhance ErrorBoundary with customizable titles, messages, and reload behavior.

Apply page boundaries to all route handlers in App.tsx.

Apply section boundaries to:
- DashboardPage: server status, ban trend, country charts, ban list
- JailsPage: jail overview, ban/unban form, IP lookup
- MapPage: world map, ban table
- ConfigPage: configuration editor
- HistoryPage: history table, IP detail view
- BlocklistsPage: sources, schedule, import log

Update Web-Development.md with error boundary strategy documentation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/components/ErrorBoundary.tsx

@@ -2,6 +2,8 @@
  * React error boundary component.
  *
  * Catches render-time exceptions in child components and shows a fallback UI.
+ * This is the base component; use PageErrorBoundary or SectionErrorBoundary
+ * for page and section-level boundaries.
  */
 import React from "react";
 import { Button, makeStyles, Text, tokens } from "@fluentui/react-components";
@@ -13,14 +15,22 @@ interface ErrorBoundaryState {
 
 interface ErrorBoundaryProps {
   children: React.ReactNode;
+  title?: string;
+  message?: string;
+  showReloadButton?: boolean;
+  isFullPage?: boolean;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
 }
 
 interface ErrorBoundaryFallbackProps {
+  title: string;
   message: string;
+  showReloadButton: boolean;
+  isFullPage: boolean;
   onReload: () => void;
 }
 
-const useFallbackStyles = makeStyles({
+const useFullPageStyles = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -36,20 +46,46 @@ const useFallbackStyles = makeStyles({
   },
 });
 
-function ErrorBoundaryFallback({ message, onReload }: ErrorBoundaryFallbackProps): React.ReactElement {
-  const styles = useFallbackStyles();
+const useSectionStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    padding: tokens.spacingVerticalM,
+    backgroundColor: tokens.colorNeutralBackground3,
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorStatusWarningForeground1}`,
+    gap: tokens.spacingVerticalM,
+  },
+  message: {
+    color: tokens.colorNeutralForeground1,
+  },
+});
+
+function ErrorBoundaryFallback({
+  title,
+  message,
+  showReloadButton,
+  isFullPage,
+  onReload,
+}: ErrorBoundaryFallbackProps): React.ReactElement {
+  const fullPageStyles = useFullPageStyles();
+  const sectionStyles = useSectionStyles();
+  const styles = isFullPage ? fullPageStyles : sectionStyles;
 
   return (
     <div className={styles.root} role="alert">
-      <Text as="h1" size={700} weight="semibold">
-        Something went wrong
+      <Text as={isFullPage ? "h1" : "h2"} size={isFullPage ? 700 : 500} weight="semibold">
+        {title}
       </Text>
-      <Text size={300} className={styles.message}>
+      <Text size={isFullPage ? 300 : 200} className={isFullPage ? fullPageStyles.message : sectionStyles.message}>
         {message}
       </Text>
-      <Button appearance="primary" onClick={onReload}>
-        Reload
-      </Button>
+      {showReloadButton && (
+        <Button appearance="primary" onClick={onReload}>
+          {isFullPage ? "Reload Page" : "Retry"}
+        </Button>
+      )}
     </div>
   );
 }
@@ -65,18 +101,37 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    console.error("ErrorBoundary caught an error", { error, errorInfo });
+    const { onError } = this.props;
+    if (onError) {
+      onError(error, errorInfo);
+    } else {
+      console.error("ErrorBoundary caught an error", { error, errorInfo });
+    }
   }
 
   handleReload = (): void => {
-    window.location.reload();
+    if (this.props.isFullPage) {
+      window.location.reload();
+    } else {
+      this.setState({ hasError: false, errorMessage: null });
+    }
   };
 
   render(): React.ReactNode {
     if (this.state.hasError) {
+      const {
+        title = "Something went wrong",
+        message = "Please try again or contact support if the problem persists.",
+        showReloadButton = true,
+        isFullPage = true,
+      } = this.props;
+
       return (
         <ErrorBoundaryFallback
-          message={this.state.errorMessage ?? "Please try reloading the page."}
+          title={title}
+          message={message}
+          showReloadButton={showReloadButton}
+          isFullPage={isFullPage}
           onReload={this.handleReload}
         />
       );