mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
CharisandJoshen Lim
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>
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { NextPage } from 'next'
|
|
import { useTheme } from 'next-themes'
|
|
import Image from 'next/legacy/image'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
|
|
import { LOCAL_STORAGE_KEYS } from 'common'
|
|
import { SupportLink } from 'components/interfaces/Support/SupportLink'
|
|
import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
|
|
import { useSignOut } from 'lib/auth'
|
|
import { Button } from 'ui'
|
|
|
|
const Error500: NextPage = () => {
|
|
const router = useRouter()
|
|
const signOut = useSignOut()
|
|
const { resolvedTheme } = useTheme()
|
|
|
|
const [lastVisitedOrganization] = useLocalStorageQuery(
|
|
LOCAL_STORAGE_KEYS.LAST_VISITED_ORGANIZATION,
|
|
''
|
|
)
|
|
|
|
const onClickLogout = async () => {
|
|
await signOut()
|
|
await router.push('/sign-in')
|
|
router.reload()
|
|
}
|
|
|
|
return (
|
|
<div className="relative mx-auto flex flex-1 w-full flex-col items-center justify-center space-y-6">
|
|
<div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
|
|
<nav className="relative flex items-center justify-between sm:h-10">
|
|
<div className="flex flex-shrink-0 flex-grow items-center lg:flex-grow-0">
|
|
<div className="flex w-full items-center justify-between md:w-auto">
|
|
<Link href="/projects">
|
|
<Image
|
|
src={
|
|
resolvedTheme?.includes('dark')
|
|
? `${router.basePath}/img/supabase-dark.svg`
|
|
: `${router.basePath}/img/supabase-light.svg`
|
|
}
|
|
alt=""
|
|
height={24}
|
|
width={120}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div className="flex w-[320px] flex-col items-center justify-center space-y-3">
|
|
<h4 className="text-lg">Something went wrong 🤕</h4>
|
|
<p className="text-center">
|
|
Sorry about that, please try again later or feel free to reach out to us if the problem
|
|
persists.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
{router.pathname !== '/organizations' ? (
|
|
<Button asChild>
|
|
<Link
|
|
href={
|
|
!!lastVisitedOrganization ? `/org/${lastVisitedOrganization}` : '/organizations'
|
|
}
|
|
>
|
|
Head back
|
|
</Link>
|
|
</Button>
|
|
) : (
|
|
<Button onClick={onClickLogout}>Head back</Button>
|
|
)}
|
|
<Button type="secondary" asChild>
|
|
<SupportLink>Submit a support request</SupportLink>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Error500
|