plane/apps/web/app/error/dev.tsx

"use client";

// plane imports
import { isRouteErrorResponse } from "react-router";
import { Banner } from "@plane/propel/banner";
import { Button } from "@plane/propel/button";
import { Card, ECardVariant } from "@plane/propel/card";
import { InfoFillIcon } from "@plane/propel/icons";

interface ErrorActionsProps {
  onGoHome: () => void;
  onReload?: () => void;
}

const ErrorActions: React.FC<ErrorActionsProps> = ({ onGoHome, onReload }) => (
  <div className="flex gap-3 pt-2">
    <Button variant="primary" size="md" onClick={onGoHome}>
      Go to home
    </Button>
    {onReload && (
      <Button variant="outline-primary" size="md" onClick={onReload}>
        Reload page
      </Button>
    )}
  </div>
);

interface DevErrorComponentProps {
  error: unknown;
  onGoHome: () => void;
  onReload: () => void;
}

export const DevErrorComponent: React.FC<DevErrorComponentProps> = ({ error, onGoHome, onReload }) => {
  if (isRouteErrorResponse(error)) {
    return (
      <div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
        <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
          <Banner
            variant="error"
            icon={<InfoFillIcon className="size-5" />}
            title="Route Error Response"
            animationDuration={0}
          />

          <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
            <div className="space-y-4">
              <div>
                <h2 className="text-2xl font-semibold text-red-500 mb-2">
                  {error.status} {error.statusText}
                </h2>
                <div className="h-px w-full bg-custom-border-200" />
              </div>

              <div className="space-y-2">
                <h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Error Data</h3>
                <div className="bg-custom-background-80 rounded-md p-4">
                  <p className="text-sm text-custom-text-200 font-mono">{error.data}</p>
                </div>
              </div>

              <ErrorActions onGoHome={onGoHome} onReload={onReload} />
            </div>
          </Card>
        </div>
      </div>
    );
  }

  if (error instanceof Error) {
    return (
      <div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
        <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
          <Banner
            variant="error"
            icon={<InfoFillIcon className="size-5" />}
            title="Runtime Error"
            animationDuration={0}
          />
          <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
            <div className="space-y-4">
              <div>
                <h2 className="text-2xl font-semibold text-red-500 mb-2">Error</h2>
                <div className="h-px w-full bg-custom-border-200" />
              </div>

              <div className="space-y-2">
                <h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Message</h3>
                <div className="bg-custom-background-80 rounded-md p-4">
                  <p className="text-sm text-custom-text-100 font-medium">{error.message}</p>
                </div>
              </div>

              {error.stack && (
                <div className="space-y-2">
                  <h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Stack Trace</h3>
                  <div className="bg-custom-background-80 rounded-md border border-custom-border-200 max-h-96 overflow-auto">
                    <pre className="p-4 text-xs text-custom-text-200 font-mono whitespace-pre-wrap break-words">
                      {error.stack}
                    </pre>
                  </div>
                </div>
              )}

              <ErrorActions onGoHome={onGoHome} onReload={onReload} />
            </div>
          </Card>

          <Card variant={ECardVariant.WITHOUT_SHADOW} className="!p-4 bg-custom-background-80 transition-none">
            <div className="flex items-start gap-3">
              <InfoFillIcon className="size-5 text-custom-text-300 flex-shrink-0 mt-0.5" />
              <div className="space-y-1">
                <p className="text-sm font-medium text-custom-text-200">Development Mode</p>
                <p className="text-xs text-custom-text-300">
                  This detailed error view is only visible in development. In production, users will see a friendly
                  error page.
                </p>
              </div>
            </div>
          </Card>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
      <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
        <Banner
          variant="error"
          icon={<InfoFillIcon className="size-5" />}
          title="Unknown Error"
          animationDuration={0}
        />

        <Card variant={ECardVariant.WITH_SHADOW} className="!p-6">
          <div className="space-y-4">
            <div>
              <h2 className="text-2xl font-semibold text-custom-text-100 mb-2">Unknown Error</h2>
              <div className="h-px w-full bg-custom-border-200" />
            </div>

            <div className="bg-custom-background-80 rounded-md p-4">
              <p className="text-sm text-custom-text-200">
                An unknown error occurred. Please try refreshing the page or contact support if the problem persists.
              </p>
            </div>

            <ErrorActions onGoHome={onGoHome} onReload={onReload} />
          </div>
        </Card>
      </div>
    </div>
  );
};