mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 03:11:15 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
187
src-old/components/error/AdminErrorBoundary.tsx
Normal file
187
src-old/components/error/AdminErrorBoundary.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import React, { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { AlertCircle, ArrowLeft, RefreshCw, Shield } from 'lucide-react';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { handleError } from '@/lib/errorHandler';
|
||||
|
||||
interface AdminErrorBoundaryProps {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
section?: string; // e.g., "Moderation", "Users", "Settings"
|
||||
}
|
||||
|
||||
type ErrorWithId = Error & { errorId: string };
|
||||
|
||||
interface AdminErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
error: ErrorWithId | null;
|
||||
errorInfo: ErrorInfo | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Admin Error Boundary Component (P0 #5)
|
||||
*
|
||||
* Specialized error boundary for admin sections.
|
||||
* Prevents admin panel errors from affecting the entire app.
|
||||
*
|
||||
* Usage:
|
||||
* ```tsx
|
||||
* <AdminErrorBoundary section="User Management">
|
||||
* <UserManagement />
|
||||
* </AdminErrorBoundary>
|
||||
* ```
|
||||
*/
|
||||
export class AdminErrorBoundary extends Component<AdminErrorBoundaryProps, AdminErrorBoundaryState> {
|
||||
constructor(props: AdminErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): Partial<AdminErrorBoundaryState> {
|
||||
return {
|
||||
hasError: true,
|
||||
error: error as ErrorWithId,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
// Log to database and get error ID for user reference
|
||||
const errorId = handleError(error, {
|
||||
action: `Admin panel error in ${this.props.section || 'unknown section'}`,
|
||||
metadata: {
|
||||
section: this.props.section,
|
||||
componentStack: errorInfo.componentStack,
|
||||
severity: 'high',
|
||||
},
|
||||
});
|
||||
|
||||
this.setState({ errorInfo, error: { ...error, errorId } as ErrorWithId });
|
||||
}
|
||||
|
||||
handleRetry = () => {
|
||||
this.setState({
|
||||
hasError: false,
|
||||
error: null,
|
||||
errorInfo: null,
|
||||
});
|
||||
};
|
||||
|
||||
handleBackToDashboard = () => {
|
||||
window.location.href = '/admin';
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
if (this.props.fallback) {
|
||||
return this.props.fallback;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-[500px] flex items-center justify-center p-6">
|
||||
<Card className="max-w-3xl w-full border-destructive/50 bg-destructive/5">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-destructive/10">
|
||||
<Shield className="w-6 h-6 text-destructive" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-destructive flex items-center gap-2">
|
||||
<AlertCircle className="w-5 h-5" />
|
||||
Admin Panel Error
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-1">
|
||||
{this.props.section
|
||||
? `An error occurred in ${this.props.section}`
|
||||
: 'An error occurred in the admin panel'}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error Details</AlertTitle>
|
||||
<AlertDescription>
|
||||
<div className="mt-2 space-y-2">
|
||||
<p className="text-sm">
|
||||
{this.state.error?.message || 'An unexpected error occurred in the admin panel'}
|
||||
</p>
|
||||
{(this.state.error as any)?.errorId && (
|
||||
<p className="text-xs font-mono bg-destructive/10 px-2 py-1 rounded">
|
||||
Reference ID: {((this.state.error as any).errorId as string).slice(0, 8)}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This error has been logged. If the problem persists, please contact support.
|
||||
</p>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={this.handleRetry}
|
||||
className="gap-2"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Retry
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={this.handleBackToDashboard}
|
||||
className="gap-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
JSON.stringify({
|
||||
section: this.props.section,
|
||||
error: this.state.error?.message,
|
||||
stack: this.state.error?.stack,
|
||||
timestamp: new Date().toISOString(),
|
||||
url: window.location.href,
|
||||
}, null, 2)
|
||||
);
|
||||
}}
|
||||
>
|
||||
Copy Error Report
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{import.meta.env.DEV && this.state.errorInfo && (
|
||||
<details className="text-xs">
|
||||
<summary className="cursor-pointer text-muted-foreground hover:text-foreground font-medium">
|
||||
Show Stack Trace (Development Only)
|
||||
</summary>
|
||||
<div className="mt-2 space-y-2">
|
||||
<pre className="overflow-auto p-3 bg-muted rounded text-xs max-h-[200px]">
|
||||
{this.state.error?.stack}
|
||||
</pre>
|
||||
<pre className="overflow-auto p-3 bg-muted rounded text-xs max-h-[200px]">
|
||||
{this.state.errorInfo.componentStack}
|
||||
</pre>
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user