vndangkhoa/apix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Add ErrorBoundary for client-side error handling on mobile
Some checks are pending
CI / build (18.x) (push) Waiting to run
Details
CI / build (20.x) (push) Waiting to run
Details

Browse source
This commit is contained in:
Khoa Vo 2026-01-07 20:57:06 +07:00
parent 072c7adf89
commit 8fd791df68
2 changed files with 100 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/layout.tsx
View file

@ -1,6 +1,7 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import ErrorBoundary from "@/components/ErrorBoundary";
const inter = Inter({ subsets: ["latin"] });
@ -17,7 +18,9 @@ export default function RootLayout({
return (
<html lang="en" className="dark" suppressHydrationWarning>
<body className={inter.className} suppressHydrationWarning>
<ErrorBoundary>
{children}
</ErrorBoundary>
</body>
</html>
);

96
components/ErrorBoundary.tsx Normal file
View file

@ -0,0 +1,96 @@
"use client";
import React, { Component, ErrorInfo, ReactNode } from 'react';
interface Props {
children: ReactNode;
}
interface State {
hasError: boolean;
error: Error | null;
errorInfo: ErrorInfo | null;
}
class ErrorBoundary extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = { hasError: false, error: null, errorInfo: null };
}
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error, errorInfo: null };
}
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error("ErrorBoundary caught an error:", error, errorInfo);
this.setState({ errorInfo });
}
handleReload = () => {
window.location.reload();
};
handleClearStorage = () => {
try {
localStorage.clear();
sessionStorage.clear();
window.location.reload();
} catch (e) {
console.error("Failed to clear storage:", e);
window.location.reload();
}
};
render() {
if (this.state.hasError) {
return (
<div className="min-h-screen bg-[#0a0a0b] text-white flex items-center justify-center p-4">
<div className="max-w-md w-full bg-[#18181B] border border-white/10 rounded-2xl p-6 text-center">
<div className="h-16 w-16 mx-auto mb-4 rounded-full bg-red-500/10 flex items-center justify-center">
<svg className="h-8 w-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<h2 className="text-xl font-bold mb-2">Something went wrong</h2>
<p className="text-muted-foreground text-sm mb-4">
An error occurred while rendering the application. This might be due to corrupted data or a temporary issue.
</p>
<div className="space-y-3">
<button
onClick={this.handleReload}
className="w-full py-3 px-4 bg-primary text-primary-foreground font-semibold rounded-xl hover:bg-primary/90 transition-all"
>
Reload Page
</button>
<button
onClick={this.handleClearStorage}
className="w-full py-3 px-4 bg-white/5 hover:bg-white/10 text-white font-medium rounded-xl transition-all border border-white/5"
>
Clear Cache & Reload
</button>
</div>
{process.env.NODE_ENV === 'development' && this.state.error && (
<details className="mt-4 text-left">
<summary className="text-xs text-muted-foreground cursor-pointer">Error Details</summary>
<pre className="mt-2 p-2 bg-black/50 rounded text-xs overflow-auto max-h-40 text-red-400">
{this.state.error.toString()}
{this.state.errorInfo?.componentStack}
</pre>
</details>
)}
</div>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;