From 39cf1f725f06c9c5ef1f657d571b3125291bb64e Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Thu, 15 Jan 2026 13:03:04 +0000
Subject: [PATCH] Update app/devtools-guard.tsx

---
 app/devtools-guard.tsx | 47 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 app/devtools-guard.tsx

diff --git a/app/devtools-guard.tsx b/app/devtools-guard.tsx
new file mode 100644
index 0000000..2ce7c03
--- /dev/null
+++ b/app/devtools-guard.tsx
@@ -0,0 +1,47 @@
+"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
+}