git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 10:51:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add ErrorBoundary component for improved error handling in the application

Browse Source
This commit is contained in:
Sam Chau
2025-01-19 05:22:48 +10:30
parent fc6c18b591
commit 5608afe91d
2 changed files with 102 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/App.jsx
View File

@@ -16,7 +16,7 @@ import Footer from '@ui/Footer';
import {ToastContainer} from 'react-toastify';
import {checkSetupStatus} from '@api/auth';
import 'react-toastify/dist/ReactToastify.css';
import ErrorBoundary from '@ui/ErrorBoundary';
function App() {
const [darkMode, setDarkMode] = useState(true);
const [authState, setAuthState] = useState({
@@ -140,13 +140,20 @@ function App() {
return (
<>
<Router>
<ErrorBoundary>
<div className='min-h-screen flex flex-col bg-gray-900 text-gray-100'>
<Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
<div className='max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 mt-2 flex-grow flex-1 w-full'>
<Routes>
<Route path='/regex' element={<RegexPage />} />
<Route path='/format' element={<FormatPage />} />
<Route path='/profile' element={<ProfilePage />} />
<Route
path='/format'
element={<FormatPage />}
/>
<Route
path='/profile'
element={<ProfilePage />}
/>
<Route
path='/settings'
element={<SettingsPage />}
@@ -159,6 +166,7 @@ function App() {
</div>
<Footer />
</div>
</ErrorBoundary>
</Router>
<ToastContainer
position='top-right'
@@ -175,5 +183,4 @@ function App() {
</>
);
}
export default App;

75
frontend/src/components/ui/ErrorBoundary.jsx Normal file
View File

@@ -0,0 +1,75 @@
import React from 'react';
import {AlertTriangle, Github, BookOpen} from 'lucide-react';
import DiscordIcon from '@logo/Discord.svg';
import GithubIcon from '@logo/GitHub.svg';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {hasError: false, error: null};
}
static getDerivedStateFromError(error) {
return {hasError: true, error};
}
componentDidCatch(error, errorInfo) {
console.error('Error caught by boundary:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return (
<div className='min-h-screen bg-gray-900 flex items-center justify-center p-4'>
<div className='max-w-md w-full bg-gray-800 rounded-lg shadow-xl p-8 text-center border border-gray-700'>
<div className='flex justify-center mb-6'>
<AlertTriangle className='h-16 w-16 text-red-500' />
</div>
<h1 className='text-3xl font-bold text-gray-100 mb-4'>
Unexpected Error
</h1>
<p className='text-gray-300 mb-8'>
We apologize, but something went wrong while
rendering this page.
</p>
{/* Support links */}
<div className='border-t border-gray-700 pt-6'>
<p className='text-gray-400 mb-4'>
Need help? Reach out to us:
</p>
<div className='flex justify-center space-x-6'>
<a
href='https://discord.com/invite/Y9TYP6jeYZ'
target='_blank'
rel='noopener noreferrer'
className='group relative p-3 transition-all duration-500 hover:scale-125'>
<img
src={DiscordIcon}
alt='Discord'
className='w-6 h-6 filter invert relative z-10 transition-all duration-500 group-hover:rotate-[360deg] group-hover:animate-[pulse_1s_ease-in-out_infinite] group-hover:brightness-75'
/>
</a>
<a
href='https://github.com/Dictionarry-Hub'
target='_blank'
rel='noopener noreferrer'
className='group relative p-3 transition-all duration-500 hover:scale-125'>
<img
src={GithubIcon}
alt='GitHub'
className='w-6 h-6 filter invert relative z-10 transition-all duration-500 group-hover:rotate-[360deg] group-hover:animate-[pulse_1s_ease-in-out_infinite] group-hover:brightness-75'
/>
</a>
</div>
</div>
</div>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;