73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { HttpError } from "@lib/core/http/error";
|
|
|
|
type Props = {
|
|
statusCode?: number | null;
|
|
error?: Error | HttpError | null;
|
|
message?: string;
|
|
/** Display debugging information */
|
|
displayDebug?: boolean;
|
|
children?: never;
|
|
};
|
|
|
|
const defaultProps = {
|
|
displayDebug: false,
|
|
};
|
|
|
|
const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = (props) => {
|
|
const { error: e } = props;
|
|
|
|
const debugMap = [
|
|
["error.message", e?.message],
|
|
["error.name", e?.name],
|
|
["error.class", e instanceof Error ? e.constructor.name : undefined],
|
|
["http.url", e instanceof HttpError ? e.url : undefined],
|
|
["http.status", e instanceof HttpError ? e.statusCode : undefined],
|
|
["http.cause", e instanceof HttpError ? e.cause?.message : undefined],
|
|
["error.stack", e instanceof Error ? e.stack : undefined],
|
|
];
|
|
|
|
return (
|
|
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
<div className="border-t border-gray-200 px-4 py-5 sm:p-0">
|
|
<dl className="sm:divide-y sm:divide-gray-200">
|
|
{debugMap.map(([key, value]) => {
|
|
if (value !== undefined) {
|
|
return (
|
|
<div key={key} className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-bold text-black">{key}</dt>
|
|
<dd className="mt-1 text-sm text-black sm:mt-0 sm:col-span-2">{value}</dd>
|
|
</div>
|
|
);
|
|
}
|
|
})}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ErrorPage: React.FC<Props> = (props) => {
|
|
const { message, statusCode, error, displayDebug } = { ...defaultProps, ...props };
|
|
|
|
return (
|
|
<>
|
|
<div className="bg-white min-h-screen px-4">
|
|
<main className="max-w-xl mx-auto pb-6 pt-16 sm:pt-24">
|
|
<div className="text-center">
|
|
<p className="text-sm font-semibold text-black uppercase tracking-wide">{statusCode}</p>
|
|
<h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
|
|
{message}
|
|
</h1>
|
|
</div>
|
|
</main>
|
|
{displayDebug && (
|
|
<div className="flex-wrap">
|
|
<ErrorDebugPanel error={error} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|