48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from 'react';
|
|
|
|
/**
|
|
* 🛡️ DevTools Guard - Prevents corrupted React DevTools from crashing the app
|
|
*
|
|
* This component patches broken React DevTools extensions that have incomplete hooks.
|
|
* Common in outdated Chrome extensions or when multiple versions conflict.
|
|
*
|
|
* Symptoms of broken DevTools:
|
|
* - "Cannot read properties of undefined (reading 'call')"
|
|
* - "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on is not a function"
|
|
* - App works in Firefox/Incognito but crashes in Chrome
|
|
*
|
|
* @see https://github.com/facebook/react/issues/25186
|
|
*/
|
|
export function DevToolsGuard() {
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
const hook = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
|
|
|
if (!hook) return; // No DevTools installed
|
|
|
|
// Fix missing or broken methods
|
|
if (typeof hook.on !== 'function') {
|
|
hook.on = () => {};
|
|
}
|
|
if (typeof hook.off !== 'function') {
|
|
hook.off = () => {};
|
|
}
|
|
if (typeof hook.emit !== 'function') {
|
|
hook.emit = () => {};
|
|
}
|
|
if (!hook.renderers) {
|
|
hook.renderers = new Map();
|
|
}
|
|
if (!hook.supportsFiber) {
|
|
hook.supportsFiber = true;
|
|
}
|
|
|
|
console.log('✅ DevTools guard active - protected against broken extensions');
|
|
}, []);
|
|
|
|
return null; // This component renders nothing
|
|
}
|