Prevent white screen: wrap ActivityFeed in error boundary and improve ClientProviders error handling
This commit is contained in:
@@ -31,20 +31,39 @@ export default function ClientProviders({
|
|||||||
setMounted(true);
|
setMounted(true);
|
||||||
// Check if we're on a 404 page by looking for the data attribute or pathname
|
// Check if we're on a 404 page by looking for the data attribute or pathname
|
||||||
const check404 = () => {
|
const check404 = () => {
|
||||||
if (typeof window !== "undefined") {
|
try {
|
||||||
const has404Component = document.querySelector('[data-404-page]');
|
if (typeof window !== "undefined" && typeof document !== "undefined") {
|
||||||
const is404Path = pathname === '/404' || window.location.pathname === '/404' || window.location.pathname.includes('404');
|
const has404Component = document.querySelector('[data-404-page]');
|
||||||
setIs404Page(!!has404Component || is404Path);
|
const is404Path = pathname === '/404' || (window.location && (window.location.pathname === '/404' || window.location.pathname.includes('404')));
|
||||||
|
setIs404Page(!!has404Component || is404Path);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// Silently fail - 404 detection is not critical
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
console.warn('Error checking 404 status:', error);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// Check immediately and after a short delay
|
// Check immediately and after a short delay
|
||||||
check404();
|
try {
|
||||||
const timeout = setTimeout(check404, 100);
|
check404();
|
||||||
const interval = setInterval(check404, 500);
|
const timeout = setTimeout(check404, 100);
|
||||||
return () => {
|
const interval = setInterval(check404, 500);
|
||||||
clearTimeout(timeout);
|
return () => {
|
||||||
clearInterval(interval);
|
try {
|
||||||
};
|
clearTimeout(timeout);
|
||||||
|
clearInterval(interval);
|
||||||
|
} catch {
|
||||||
|
// Silently fail during cleanup
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
// If setup fails, just return empty cleanup
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
console.warn('Error setting up 404 check:', error);
|
||||||
|
}
|
||||||
|
return () => {};
|
||||||
|
}
|
||||||
}, [pathname]);
|
}, [pathname]);
|
||||||
|
|
||||||
// Wrap in multiple error boundaries to isolate failures
|
// Wrap in multiple error boundaries to isolate failures
|
||||||
|
|||||||
13
app/page.tsx
13
app/page.tsx
@@ -7,9 +7,16 @@ import Projects from "./components/Projects";
|
|||||||
import Contact from "./components/Contact";
|
import Contact from "./components/Contact";
|
||||||
import Footer from "./components/Footer";
|
import Footer from "./components/Footer";
|
||||||
import Script from "next/script";
|
import Script from "next/script";
|
||||||
import ActivityFeed from "./components/ActivityFeed";
|
import dynamic from "next/dynamic";
|
||||||
|
import ErrorBoundary from "@/components/ErrorBoundary";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
// Wrap ActivityFeed in error boundary to prevent crashes
|
||||||
|
const ActivityFeed = dynamic(() => import("./components/ActivityFeed").catch(() => ({ default: () => null })), {
|
||||||
|
ssr: false,
|
||||||
|
loading: () => null,
|
||||||
|
});
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen">
|
<div className="min-h-screen">
|
||||||
@@ -35,7 +42,9 @@ export default function Home() {
|
|||||||
}),
|
}),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<ActivityFeed />
|
<ErrorBoundary>
|
||||||
|
<ActivityFeed />
|
||||||
|
</ErrorBoundary>
|
||||||
<Header />
|
<Header />
|
||||||
{/* Spacer to prevent navbar overlap */}
|
{/* Spacer to prevent navbar overlap */}
|
||||||
<div className="h-24 md:h-32" aria-hidden="true"></div>
|
<div className="h-24 md:h-32" aria-hidden="true"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user