fix error fallback
This commit is contained in:
parent
b406974299
commit
0c5be865c4
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user