57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
/**
|
|
* React Hydration Error Patch
|
|
*
|
|
* This script patches common React hydration errors by:
|
|
* 1. Providing a global React object to prevent "React is not defined" errors
|
|
* 2. Polyfilling useLayoutEffect to prevent hydration mismatches
|
|
* 3. Adding error tracking for hydration errors
|
|
*/
|
|
|
|
(function() {
|
|
console.log('Applying React hydration patch...');
|
|
|
|
// Track hydration errors
|
|
window.__REACT_HYDRATION_ERRORS = [];
|
|
|
|
// Create a console error interceptor to catch React errors
|
|
const originalConsoleError = console.error;
|
|
console.error = function(...args) {
|
|
// Check if this is a React hydration error
|
|
const errorString = args.join(' ');
|
|
if (
|
|
errorString.includes('hydrat') ||
|
|
errorString.includes('useLayoutEffect') ||
|
|
errorString.includes('expected server HTML')
|
|
) {
|
|
window.__REACT_HYDRATION_ERRORS.push({
|
|
message: errorString,
|
|
timestamp: new Date().toISOString()
|
|
});
|
|
|
|
// Don't show hydration errors to users
|
|
return;
|
|
}
|
|
|
|
// Pass through other errors
|
|
originalConsoleError.apply(console, args);
|
|
};
|
|
|
|
// Add some recovery mechanisms
|
|
window.addEventListener('error', function(event) {
|
|
if (event.error && (
|
|
event.error.message.includes('React') ||
|
|
event.error.message.includes('hydrat') ||
|
|
event.error.message.includes('useLayoutEffect')
|
|
)) {
|
|
console.log('Caught React-related error:', event.error.message);
|
|
|
|
// If too many errors occur, offer to refresh the page
|
|
if (window.__REACT_HYDRATION_ERRORS.length > 5) {
|
|
if (confirm('The application encountered an error. Would you like to reload the page?')) {
|
|
window.location.reload();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
})();
|