diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1cd2e40..f2dfb9c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import "./globals.css"; import type { Metadata } from "next"; +import ErrorBoundary from "@/components/providers/ErrorBoundary"; export const metadata: Metadata = { title: { @@ -24,7 +25,9 @@ export default function RootLayout({ return ( - {children} + + {children} + ); diff --git a/src/components/providers/ErrorBoundary.tsx b/src/components/providers/ErrorBoundary.tsx new file mode 100644 index 0000000..26deb7a --- /dev/null +++ b/src/components/providers/ErrorBoundary.tsx @@ -0,0 +1,63 @@ +"use client"; + +import { Component, ErrorInfo, ReactNode } from "react"; + +interface Props { + children: ReactNode; +} + +interface State { + hasError: boolean; + error?: Error; +} + +export default class ErrorBoundary extends Component { + public state: State = { + hasError: false, + }; + + public static getDerivedStateFromError(error: Error): State { + return { hasError: true, error }; + } + + public componentDidCatch(error: Error, errorInfo: ErrorInfo) { + // Ignore browser extension errors + if (error.message?.includes('tron') || + error.message?.includes('chrome-extension') || + error.stack?.includes('chrome-extension')) { + console.warn('Browser extension error ignored:', error.message); + // Reset error state to continue rendering + this.setState({ hasError: false }); + return; + } + + console.error("Uncaught error:", error, errorInfo); + } + + public render() { + if (this.state.hasError) { + // Check if it's an extension error + if (this.state.error?.message?.includes('tron') || + this.state.error?.stack?.includes('chrome-extension')) { + // Silently recover and render children + return this.props.children; + } + + return ( +
+
+

Something went wrong

+ +
+
+ ); + } + + return this.props.children; + } +}