mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00
added basic error boundary
This commit is contained in:
parent
91ee707120
commit
03df9a260b
@ -1,26 +1,29 @@
|
|||||||
import React, { Suspense } from 'react';
|
import React, { Suspense } from "react";
|
||||||
import { RainbowThemeProvider } from './components/shared/RainbowThemeProvider';
|
import { RainbowThemeProvider } from "./components/shared/RainbowThemeProvider";
|
||||||
import { FileContextProvider } from './contexts/FileContext';
|
import { FileContextProvider } from "./contexts/FileContext";
|
||||||
import { FilesModalProvider } from './contexts/FilesModalContext';
|
import { FilesModalProvider } from "./contexts/FilesModalContext";
|
||||||
import { FileSelectionProvider } from './contexts/FileSelectionContext';
|
import { FileSelectionProvider } from "./contexts/FileSelectionContext";
|
||||||
import { ToolWorkflowProvider } from './contexts/ToolWorkflowContext';
|
import { ToolWorkflowProvider } from "./contexts/ToolWorkflowContext";
|
||||||
import { SidebarProvider } from './contexts/SidebarContext';
|
import { SidebarProvider } from "./contexts/SidebarContext";
|
||||||
import HomePage from './pages/HomePage';
|
import ErrorBoundary from "./components/shared/ErrorBoundary";
|
||||||
|
import HomePage from "./pages/HomePage";
|
||||||
|
|
||||||
// Import global styles
|
// Import global styles
|
||||||
import './styles/tailwind.css';
|
import "./styles/tailwind.css";
|
||||||
import './index.css';
|
import "./index.css";
|
||||||
|
|
||||||
// Loading component for i18next suspense
|
// Loading component for i18next suspense
|
||||||
const LoadingFallback = () => (
|
const LoadingFallback = () => (
|
||||||
<div style={{
|
<div
|
||||||
display: 'flex',
|
style={{
|
||||||
justifyContent: 'center',
|
display: "flex",
|
||||||
alignItems: 'center',
|
justifyContent: "center",
|
||||||
height: '100vh',
|
alignItems: "center",
|
||||||
fontSize: '18px',
|
height: "100vh",
|
||||||
color: '#666'
|
fontSize: "18px",
|
||||||
}}>
|
color: "#666",
|
||||||
|
}}
|
||||||
|
>
|
||||||
Loading...
|
Loading...
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -29,6 +32,7 @@ export default function App() {
|
|||||||
return (
|
return (
|
||||||
<Suspense fallback={<LoadingFallback />}>
|
<Suspense fallback={<LoadingFallback />}>
|
||||||
<RainbowThemeProvider>
|
<RainbowThemeProvider>
|
||||||
|
<ErrorBoundary>
|
||||||
<FileContextProvider enableUrlSync={true} enablePersistence={true}>
|
<FileContextProvider enableUrlSync={true} enablePersistence={true}>
|
||||||
<FilesModalProvider>
|
<FilesModalProvider>
|
||||||
<FileSelectionProvider>
|
<FileSelectionProvider>
|
||||||
@ -40,6 +44,7 @@ export default function App() {
|
|||||||
</FileSelectionProvider>
|
</FileSelectionProvider>
|
||||||
</FilesModalProvider>
|
</FilesModalProvider>
|
||||||
</FileContextProvider>
|
</FileContextProvider>
|
||||||
|
</ErrorBoundary>
|
||||||
</RainbowThemeProvider>
|
</RainbowThemeProvider>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
|
56
frontend/src/components/shared/ErrorBoundary.tsx
Normal file
56
frontend/src/components/shared/ErrorBoundary.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Text, Button, Stack } from '@mantine/core';
|
||||||
|
|
||||||
|
interface ErrorBoundaryState {
|
||||||
|
hasError: boolean;
|
||||||
|
error?: Error;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ErrorBoundaryProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
fallback?: React.ComponentType<{error?: Error; retry: () => void}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||||
|
constructor(props: ErrorBoundaryProps) {
|
||||||
|
super(props);
|
||||||
|
this.state = { hasError: false };
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||||||
|
return { hasError: true, error };
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||||
|
console.error('ErrorBoundary caught an error:', error, errorInfo);
|
||||||
|
}
|
||||||
|
|
||||||
|
retry = () => {
|
||||||
|
this.setState({ hasError: false, error: undefined });
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
if (this.props.fallback) {
|
||||||
|
const Fallback = this.props.fallback;
|
||||||
|
return <Fallback error={this.state.error} retry={this.retry} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack align="center" justify="center" style={{ minHeight: '200px', padding: '2rem' }}>
|
||||||
|
<Text size="lg" fw={500} c="red">Something went wrong</Text>
|
||||||
|
{process.env.NODE_ENV === 'development' && this.state.error && (
|
||||||
|
<Text size="sm" c="dimmed" style={{ textAlign: 'center', fontFamily: 'monospace' }}>
|
||||||
|
{this.state.error.message}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
<Button onClick={this.retry} variant="light">
|
||||||
|
Try Again
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.props.children;
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user