mirror of
https://github.com/supabase/supabase.git
synced 2026-06-20 11:22:25 +08:00
d8f7cc0d57
* o11y: mirror and sanitize breadcrumbs Mirror Sentry breadcrumbs as the basis for our own support logging. Also adds more sanitization to breadcrumbs. * feat(support form): toggle for attaching dashboard logs Add a toggle to the support form when the category is "Dashboard bug", to attach recent dashboard logs. Users can preview the attached logs and opt out. * feat(support links): dedicated support link component Add a new component for support links, which: - Uses the serializer for support link params to ensure serialization/deserialization pairs correctly - Snapshots breadcrumbs so the attached log on the support form will be cut off at the support link click (otherwise we will get support form actions cluttering up the log) * tests(support form): extend timeout on flaky test * Minor clean up * fix(support form): allow url to specifically indicate no specified project * minor nits * Fix tests * Fix tests --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { SupportCategories } from '@supabase/shared-types/out/constants'
|
|
import { SupportLink } from 'components/interfaces/Support/SupportLink'
|
|
import { PropsWithChildren } from 'react'
|
|
|
|
import {
|
|
AlertDescription_Shadcn_,
|
|
AlertTitle_Shadcn_,
|
|
Alert_Shadcn_,
|
|
Button,
|
|
WarningIcon,
|
|
} from 'ui'
|
|
|
|
export interface AlertErrorProps {
|
|
projectRef?: string
|
|
subject?: string
|
|
error?: { message: string } | null
|
|
className?: string
|
|
showIcon?: boolean
|
|
additionalActions?: React.ReactNode
|
|
}
|
|
|
|
// [Joshen] To standardize the language for all error UIs
|
|
|
|
export const AlertError = ({
|
|
projectRef,
|
|
subject,
|
|
error,
|
|
className,
|
|
showIcon = true,
|
|
children,
|
|
additionalActions,
|
|
}: PropsWithChildren<AlertErrorProps>) => {
|
|
const formattedErrorMessage = error?.message?.includes('503')
|
|
? '503 Service Temporarily Unavailable'
|
|
: error?.message
|
|
|
|
return (
|
|
<Alert_Shadcn_ className={className} variant="warning" title={subject}>
|
|
{showIcon && <WarningIcon className="h-4 w-4" strokeWidth={2} />}
|
|
<AlertTitle_Shadcn_ className="text-foreground">{subject}</AlertTitle_Shadcn_>
|
|
<AlertDescription_Shadcn_ className="flex flex-col gap-3 break-words">
|
|
<div>
|
|
{error?.message && <p className="text-left">Error: {formattedErrorMessage}</p>}
|
|
<p className="text-left">
|
|
Try refreshing your browser, but if the issue persists for more than a few minutes,
|
|
please reach out to us via support.
|
|
</p>
|
|
</div>
|
|
{children}
|
|
<div className="flex gap-2">
|
|
{additionalActions}
|
|
<Button asChild type="warning" className="w-min">
|
|
<SupportLink
|
|
queryParams={{
|
|
category: SupportCategories.DASHBOARD_BUG,
|
|
projectRef,
|
|
subject,
|
|
error: error?.message,
|
|
}}
|
|
>
|
|
Contact support
|
|
</SupportLink>
|
|
</Button>
|
|
</div>
|
|
</AlertDescription_Shadcn_>
|
|
</Alert_Shadcn_>
|
|
)
|
|
}
|
|
|
|
export default AlertError
|