base
This commit is contained in:
DCCONSTRUCTIONS
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
function ErrorActions({ onGoHome, onReload }: ErrorActionsProps) {
|
||||
return (
|
||||
<div className="flex gap-3 pt-2">
|
||||
<Button variant="primary" size="lg" onClick={onGoHome}>
|
||||
Go to home
|
||||
</Button>
|
||||
{onReload && (
|
||||
<Button variant="secondary" size="lg" onClick={onReload}>
|
||||
Reload page
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface DevErrorComponentProps {
|
||||
error: unknown;
|
||||
onGoHome: () => void;
|
||||
onReload: () => void;
|
||||
}
|
||||
|
||||
export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorComponentProps) {
|
||||
if (isRouteErrorResponse(error)) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
|
||||
<div className="mt-12 w-full max-w-4xl 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="mb-2 text-20 font-semibold text-danger-primary">
|
||||
{error.status} {error.statusText}
|
||||
</h2>
|
||||
<div className="bg-subtle-1 h-px w-full" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Error Data</h3>
|
||||
<div className="rounded-md bg-layer-1 p-4">
|
||||
<p className="font-code text-13 text-secondary">{error.data}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ErrorActions onGoHome={onGoHome} onReload={onReload} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error instanceof Error) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
|
||||
<div className="mt-12 w-full max-w-4xl 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="mb-2 text-20 font-semibold text-danger-primary">Error</h2>
|
||||
<div className="bg-subtle-1 h-px w-full" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Message</h3>
|
||||
<div className="rounded-md bg-layer-1 p-4">
|
||||
<p className="text-13 font-medium text-primary">{error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error.stack && (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Stack Trace</h3>
|
||||
<div className="max-h-96 overflow-auto rounded-md border border-subtle bg-layer-1">
|
||||
<pre className="p-4 font-code text-11 break-words whitespace-pre-wrap text-secondary">
|
||||
{error.stack}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ErrorActions onGoHome={onGoHome} onReload={onReload} />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant={ECardVariant.WITHOUT_SHADOW} className="bg-layer-1 !p-4 transition-none">
|
||||
<div className="flex items-start gap-3">
|
||||
<InfoFillIcon className="mt-0.5 size-5 flex-shrink-0 text-tertiary" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-13 font-medium text-secondary">Development Mode</p>
|
||||
<p className="text-11 text-tertiary">
|
||||
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="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
|
||||
<div className="mt-12 w-full max-w-4xl 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="mb-2 text-20 font-semibold text-primary">Unknown Error</h2>
|
||||
<div className="bg-subtle-1 h-px w-full" />
|
||||
</div>
|
||||
|
||||
<div className="rounded-md bg-layer-1 p-4">
|
||||
<p className="text-13 text-secondary">
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
// hooks
|
||||
import { useAppRouter } from "@/hooks/use-app-router";
|
||||
// layouts
|
||||
import { DevErrorComponent } from "./dev";
|
||||
import { ProdErrorComponent } from "./prod";
|
||||
|
||||
export function CustomErrorComponent({ error }: { error: unknown }) {
|
||||
// router
|
||||
const router = useAppRouter();
|
||||
|
||||
const handleGoHome = () => router.push("/");
|
||||
const handleReload = () => window.location.reload();
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
return <DevErrorComponent error={error} onGoHome={handleGoHome} onReload={handleReload} />;
|
||||
}
|
||||
|
||||
return <ProdErrorComponent onGoHome={handleGoHome} />;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import { useTheme } from "next-themes";
|
||||
// plane imports
|
||||
import { Button } from "@plane/propel/button";
|
||||
// assets
|
||||
import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url";
|
||||
import maintenanceModeLightModeImage from "@/app/assets/instance/maintenance-mode-light.svg?url";
|
||||
// layouts
|
||||
import DefaultLayout from "@/layouts/default-layout";
|
||||
|
||||
const linkMap = [
|
||||
{
|
||||
key: "mail_to",
|
||||
label: "Contact Support",
|
||||
value: "mailto:support@plane.so",
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status Page",
|
||||
value: "https://status.plane.so/",
|
||||
},
|
||||
{
|
||||
key: "twitter_handle",
|
||||
label: "@planepowers",
|
||||
value: "https://x.com/planepowers",
|
||||
},
|
||||
];
|
||||
|
||||
// Production Error Component
|
||||
interface ProdErrorComponentProps {
|
||||
onGoHome: () => void;
|
||||
}
|
||||
|
||||
export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
|
||||
// hooks
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
// derived values
|
||||
const maintenanceModeImage = resolvedTheme === "dark" ? maintenanceModeDarkModeImage : maintenanceModeLightModeImage;
|
||||
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<div className="relative container mx-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-2 gap-y-6 bg-surface-1 px-6 text-center">
|
||||
<div className="relative w-full">
|
||||
<img
|
||||
src={maintenanceModeImage}
|
||||
height="176"
|
||||
width="288"
|
||||
alt="ProjectSettingImg"
|
||||
className="h-full w-full object-fill object-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative mt-4 flex w-full flex-col gap-4">
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<h1 className="text-left text-18 font-semibold text-primary">🚧 Looks like something went wrong!</h1>
|
||||
<span className="text-left text-14 font-medium text-secondary">
|
||||
We track these errors automatically and working on getting things back up and running. If the problem
|
||||
persists feel free to contact us. In the meantime, try refreshing.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-1 flex items-center justify-start gap-6">
|
||||
{linkMap.map((link) => (
|
||||
<div key={link.key}>
|
||||
<a
|
||||
href={link.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-13 text-accent-primary hover:underline"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-start gap-6">
|
||||
<Button variant="primary" size="lg" onClick={onGoHome}>
|
||||
Go to home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user