91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
|
||
import { HttpError } from "@calcom/lib/http-error";
|
||
import { Button } from "@calcom/ui";
|
||
|
||
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-default overflow-hidden shadow sm:rounded-lg">
|
||
<div className="border-subtle border-t px-4 py-5 sm:p-0">
|
||
<dl className="sm:divide-subtle sm:divide-y">
|
||
{debugMap.map(([key, value]) => {
|
||
if (value !== undefined) {
|
||
return (
|
||
<div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
||
<dt className="text-emphasis text-sm font-bold">{key}</dt>
|
||
<dd className="text-emphasis mt-1 text-sm sm:col-span-2 sm:mt-0">{value}</dd>
|
||
</div>
|
||
);
|
||
}
|
||
})}
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export const ErrorPage: React.FC<Props> = (props) => {
|
||
const { message, statusCode, error, displayDebug } = { ...defaultProps, ...props };
|
||
|
||
return (
|
||
<>
|
||
<div className="bg-subtle flex h-screen">
|
||
<div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
|
||
<h1 className="font-cal text-emphasis text-6xl">{statusCode}</h1>
|
||
<h2 className="text-emphasis mt-6 max-w-2xl text-2xl font-medium">It's not you, it's us.</h2>
|
||
<p className="text-default mb-6 mt-4 max-w-2xl text-sm">
|
||
Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
|
||
away for you.
|
||
</p>
|
||
|
||
<div className="mb-8 flex flex-col">
|
||
<p className="text-default mb-4 max-w-2xl text-sm">
|
||
Please provide the following text when contacting support to better help you:
|
||
</p>
|
||
<pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
|
||
{message}
|
||
</pre>
|
||
</div>
|
||
|
||
<Button href="mailto:support@cal.com">Contact Support</Button>
|
||
<Button color="secondary" href="javascript:history.back()" className="ml-2">
|
||
Go back
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
{displayDebug && (
|
||
<div className="flex-wrap">
|
||
<ErrorDebugPanel error={error} />
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
};
|