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 { useNavigate } from 'react-router-dom';
import { routesPath } from '../../../router/routes.path';
import React from 'react';
import { FallbackProps } from 'react-error-boundary';
interface ErrorFallbackProps {
error: Error
}
const ErrorFallback: React.FC<ErrorFallbackProps> = ({
error
const ErrorFallback: React.FC<FallbackProps> = ({
error,
resetErrorBoundary
}) => {
const navigate = useNavigate()
const handleResetErrorBoundary = () => {
navigate(routesPath.MAIN_PATH)
resetErrorBoundary()
window.location.reload()
}
return (
<div role="alert">
<h1>Something went wrong:</h1>
<pre>{error.message}</pre>
<button onClick={handleResetErrorBoundary}>Try again</button>
<div
role="alert"
style={{
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>
);
};

View File

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