fix error fallback

This commit is contained in:
NlightN22 2024-12-01 15:46:36 +07:00
parent b406974299
commit 0c5be865c4
2 changed files with 41 additions and 14 deletions

View File

@ -1,26 +1,52 @@
import React, { FC } from 'react'; import React from 'react';
import { useNavigate } from 'react-router-dom'; import { FallbackProps } from 'react-error-boundary';
import { routesPath } from '../../../router/routes.path';
interface ErrorFallbackProps {
error: Error
}
const ErrorFallback: React.FC<ErrorFallbackProps> = ({ const ErrorFallback: React.FC<FallbackProps> = ({
error error,
resetErrorBoundary
}) => { }) => {
const navigate = useNavigate()
const handleResetErrorBoundary = () => { const handleResetErrorBoundary = () => {
navigate(routesPath.MAIN_PATH) resetErrorBoundary()
window.location.reload()
} }
return ( return (
<div role="alert"> <div
<h1>Something went wrong:</h1> role="alert"
<pre>{error.message}</pre> style={{
<button onClick={handleResetErrorBoundary}>Try again</button> display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
minHeight: '98vh',
margin: 0,
overflow: 'hidden',
textAlign: 'center',
backgroundColor: '#f8f9fa',
color: '#212529',
padding: 0,
}}
>
<h1 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Something went wrong</h1>
<pre style={{ marginBottom: '1rem', color: '#d9534f' }}>{error.message}</pre>
<button
onClick={handleResetErrorBoundary}
style={{
padding: '10px 20px',
fontSize: '1rem',
backgroundColor: '#007bff',
color: '#fff',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
}}
>
Reload Page
</button>
</div> </div>
); );
}; };

View File

@ -20,6 +20,7 @@ export const FfprobeModal = ({ context, id, innerProps }: ContextModalProps<Ffpr
} }
}) })
if (isPending) return <CogwheelLoader /> if (isPending) return <CogwheelLoader />
if (isError) return <RetryError onRetry={refetch} /> if (isError) return <RetryError onRetry={refetch} />
if (!data || data.length < 1) return <Text>Data is empty</Text> if (!data || data.length < 1) return <Text>Data is empty</Text>