72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { ExternalLink } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import type { FallbackProps } from 'react-error-boundary'
|
|
|
|
import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
|
|
import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
|
|
|
|
export const ErrorBoundaryState = ({ error, resetErrorBoundary }: FallbackProps) => {
|
|
const router = useRouter()
|
|
const message = `Path name: ${router.pathname}\n\n${error.stack}`
|
|
const isRemoveChildError = error.message.includes("Failed to execute 'removeChild' on 'Node'")
|
|
|
|
return (
|
|
<div className="w-screen h-screen flex items-center justify-center flex-col gap-y-3">
|
|
<div className="flex items-center flex-col gap-y-1">
|
|
<p className="text-sm">
|
|
Application error: a client-side exception has occurred (see browser console for more
|
|
information)
|
|
</p>
|
|
<p className="text-sm text-foreground-light">Error: {error.message}</p>
|
|
</div>
|
|
|
|
{isRemoveChildError && (
|
|
<Alert_Shadcn_ className="w-[650px]">
|
|
<WarningIcon />
|
|
<AlertTitle_Shadcn_>
|
|
This error might be caused by Google translate or third-party browser extensions
|
|
</AlertTitle_Shadcn_>
|
|
<AlertDescription_Shadcn_>
|
|
You may try to avoid using Google translate or disable certain browser extensions to
|
|
avoid running into the <code className="text-xs">'removeChild' on 'Node'</code> error.
|
|
</AlertDescription_Shadcn_>
|
|
<AlertDescription_Shadcn_ className="mt-3">
|
|
<Button asChild type="default" icon={<ExternalLink />}>
|
|
<a
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
href="https://github.com/facebook/react/issues/17256"
|
|
>
|
|
More information
|
|
</a>
|
|
</Button>
|
|
</AlertDescription_Shadcn_>
|
|
</Alert_Shadcn_>
|
|
)}
|
|
|
|
<div className="flex items-center justify-center gap-x-2">
|
|
<Button asChild type="default" icon={<ExternalLink />}>
|
|
<Link
|
|
href={`/support/new?category=dashboard_bug&subject=Client%20side%20exception%20occurred%20on%20dashboard&message=${encodeURI(message)}`}
|
|
target="_blank"
|
|
>
|
|
Report to support
|
|
</Link>
|
|
</Button>
|
|
{/* [Joshen] For local and staging, allow us to escape the error boundary */}
|
|
{/* We could actually investigate how to make this available on prod, but without being able to reliably test this, I'm not keen to do it now */}
|
|
{process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod' ? (
|
|
<Button type="outline" onClick={() => resetErrorBoundary()}>
|
|
Return to dashboard
|
|
</Button>
|
|
) : (
|
|
<Button type="outline" onClick={() => router.reload()}>
|
|
Reload dashboard
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|