From 4e010794880fa0bad40078f2fe7db87f207fc570 Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Thu, 20 Feb 2025 15:49:18 -0800 Subject: [PATCH] fix(error): resolved hydration error --- app/layout.tsx | 40 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 21f65924f5..6bb1723603 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,42 @@ import type { Metadata, Viewport } from 'next' import './globals.css' import { ZoomPrevention } from './zoom-prevention' +// Add browser extension attributes that we want to ignore +const BROWSER_EXTENSION_ATTRIBUTES = [ + 'data-new-gr-c-s-check-loaded', + 'data-gr-ext-installed', + 'data-gr-ext-disabled', + 'data-grammarly', + 'data-fgm', + 'data-lt-installed', + // Add other known extension attributes here +] + +if (typeof window !== 'undefined') { + const originalError = console.error + console.error = (...args) => { + // Check if it's a hydration error + if (args[0].includes('Hydration')) { + // Check if the error is related to browser extensions + const isExtensionError = BROWSER_EXTENSION_ATTRIBUTES.some((attr) => + args.some((arg) => typeof arg === 'string' && arg.includes(attr)) + ) + + if (!isExtensionError) { + // Log non-extension hydration errors with more detail + console.group('Hydration Error') + console.log('Error Details:', args) + console.log( + 'Component Stack:', + args.find((arg) => typeof arg === 'string' && arg.includes('component stack')) + ) + console.groupEnd() + } + } + originalError.apply(console, args) + } +} + export const viewport: Viewport = { themeColor: '#ffffff', } @@ -27,14 +63,14 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + - + {children}