94 lines
2.4 KiB
React
94 lines
2.4 KiB
React
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
import ErrorImage from '../src/Images/Error.png'; // Adjust if path differs
|
||
|
|
|
||
|
|
const subDirectory = import.meta.env.BASE_URL;
|
||
|
|
|
||
|
|
const GlobalErrorHandler = ({ children }) => {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [hasError, setHasError] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handleError = (event) => {
|
||
|
|
const error = event?.reason || event?.message;
|
||
|
|
|
||
|
|
// Skip known harmless errors (like cancellation or validation)
|
||
|
|
if (
|
||
|
|
error?.errorFields ||
|
||
|
|
error?.name === 'CanceledError' || // Axios cancel error
|
||
|
|
error?.message?.includes('canceled') || // string version
|
||
|
|
error?.message?.includes('Request failed with status code 499') || // some systems use this
|
||
|
|
error?.message?.includes('Network request cancelled') ||
|
||
|
|
(typeof error === 'string' &&
|
||
|
|
(error.includes('validation') ||
|
||
|
|
error.includes('canceled') ||
|
||
|
|
error.includes('aborted')))
|
||
|
|
) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.error('Global Error:', error);
|
||
|
|
setHasError(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
window.onerror = handleError;
|
||
|
|
window.onunhandledrejection = handleError;
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
window.onerror = null;
|
||
|
|
window.onunhandledrejection = null;
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const goHome = () => {
|
||
|
|
setHasError(false); // ✅ Reset error so we can see the app again
|
||
|
|
navigate(`${subDirectory}app-page/home`);
|
||
|
|
};
|
||
|
|
|
||
|
|
if (hasError) {
|
||
|
|
return (
|
||
|
|
<div style={styles.container}>
|
||
|
|
<img src={ErrorImage} alt="Error occurred" style={styles.image} />
|
||
|
|
<h1 style={styles.heading}>Oops! Something went wrong.</h1>
|
||
|
|
<p style={styles.message}>
|
||
|
|
An unexpected error occurred. Please try again later or{' '}
|
||
|
|
<span onClick={goHome} style={styles.link}>
|
||
|
|
Home
|
||
|
|
</span>
|
||
|
|
.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return children;
|
||
|
|
};
|
||
|
|
|
||
|
|
const styles = {
|
||
|
|
container: {
|
||
|
|
textAlign: 'center',
|
||
|
|
padding: '50px',
|
||
|
|
fontFamily: 'Arial, sans-serif',
|
||
|
|
},
|
||
|
|
image: {
|
||
|
|
width: '150px',
|
||
|
|
maxWidth: '90%',
|
||
|
|
marginBottom: '30px',
|
||
|
|
},
|
||
|
|
heading: {
|
||
|
|
fontSize: '2rem',
|
||
|
|
color: '#333',
|
||
|
|
},
|
||
|
|
message: {
|
||
|
|
fontSize: '1rem',
|
||
|
|
color: '#666',
|
||
|
|
},
|
||
|
|
link: {
|
||
|
|
color: '#1292ee',
|
||
|
|
textDecoration: 'underline',
|
||
|
|
cursor: 'pointer',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export default GlobalErrorHandler;
|