rheinsw-mono-repo/internal_frontend/components/error-boundary.tsx

"use client";

import React from "react";
import { showError } from "@/lib/ui/showError";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
  errorInfo: React.ErrorInfo | null;
}

interface ErrorBoundaryProps {
  children: React.ReactNode;
  fallback?: React.ComponentType<{ error: Error; reset: () => void }>;
}

export class ErrorBoundary extends React.Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
    return {
      hasError: true,
      error,
    };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error("ErrorBoundary caught an error:", error, errorInfo);
    
    this.setState({
      error,
      errorInfo,
    });

    // Show error toast
    showError(error);
  }

  handleReset = () => {
    this.setState({
      hasError: false,
      error: null,
      errorInfo: null,
    });
  };

  render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        const FallbackComponent = this.props.fallback;
        return (
          <FallbackComponent
            error={this.state.error!}
            reset={this.handleReset}
          />
        );
      }

      return (
        <ErrorDialog
          error={this.state.error}
          onReset={this.handleReset}
          open={true}
        />
      );
    }

    return this.props.children;
  }
}

interface ErrorDialogProps {
  error: Error | null;
  onReset: () => void;
  open: boolean;
}

function ErrorDialog({ error, onReset, open }: ErrorDialogProps) {
  return (
    <Dialog open={open} onOpenChange={() => {}}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Ein Fehler ist aufgetreten</DialogTitle>
          <DialogDescription>
            Es ist ein unerwarteter Fehler aufgetreten. Bitte versuchen Sie es erneut.
          </DialogDescription>
        </DialogHeader>
        
        {error && (
          <div className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 rounded-md">
            <p className="text-sm text-red-800 dark:text-red-200 font-mono">
              {error.message}
            </p>
          </div>
        )}

        <DialogFooter className="flex gap-2">
          <Button variant="outline" onClick={() => window.location.reload()}>
            Seite neu laden
          </Button>
          <Button onClick={onReset}>
            Erneut versuchen
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// Hook for handling async errors
export function useErrorHandler() {
  const handleError = React.useCallback((error: unknown) => {
    console.error("Async error caught:", error);
    showError(error);
  }, []);

  return handleError;
}