Lukas
da6433b2cf
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>
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
/**
|
|
* Configuration page — fail2ban jail and server configuration editor.
|
|
*
|
|
* Top-level page component for the configuration interface. Renders page layout
|
|
* and delegates tab routing to {@link ConfigPageContainer}.
|
|
*
|
|
* Tabs:
|
|
* Jails — per-jail config accordion with inline editing
|
|
* Filters — structured filter.d form editor
|
|
* Actions — structured action.d form editor
|
|
* Server — server-level settings, map thresholds, service health + log viewer
|
|
* Regex Tester — live pattern tester
|
|
*
|
|
* Configuration content is wrapped with SectionErrorBoundary to prevent
|
|
* one tab or editor from crashing the entire page.
|
|
*/
|
|
|
|
import { Text, makeStyles, tokens } from "@fluentui/react-components";
|
|
import { SectionErrorBoundary } from "../components/SectionErrorBoundary";
|
|
import { ConfigPageContainer } from "../components/config/ConfigPageContainer";
|
|
|
|
const useStyles = makeStyles({
|
|
page: {
|
|
padding: tokens.spacingVerticalXXL,
|
|
maxWidth: "1100px",
|
|
},
|
|
header: {
|
|
marginBottom: tokens.spacingVerticalL,
|
|
},
|
|
infoText: {
|
|
color: tokens.colorNeutralForeground3,
|
|
fontStyle: "italic",
|
|
},
|
|
});
|
|
|
|
export function ConfigPage(): React.JSX.Element {
|
|
const styles = useStyles();
|
|
|
|
return (
|
|
<div className={styles.page}>
|
|
<div className={styles.header}>
|
|
<Text as="h1" size={700} weight="semibold" block>
|
|
Configuration
|
|
</Text>
|
|
<Text as="p" size={300} className={styles.infoText}>
|
|
Inspect and edit fail2ban jail configuration, global settings, and
|
|
server parameters.
|
|
</Text>
|
|
</div>
|
|
|
|
<SectionErrorBoundary sectionName="Configuration Editor">
|
|
<ConfigPageContainer />
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
);
|
|
}
|
|
|